2. 程式人生 > >底下選單欄的實現

底下選單欄的實現

阿新 • • 發佈：2018-11-12

這兩天計劃做一個新的專案,但是當我剛開始動工的時候,發現自己連做過的功能都不知道怎麼實現,所以現在先做一個總結和整理,以後要用的時候可以方便使用.

有兩種方式實現:1.自定義. 2.用系統提供

1.自定義方式

①寫好整體佈局

分為兩大部分,上面用幀佈局來展示fragment,下面為組合控制元件作為Tab進行主頁面的切換.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width
 
="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"  >
    <!--幀佈局,用於放置Fragment-->
    <FrameLayout
        android:id="@+id/top_bar"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"  />
 

    <!--紅色線條-->
    <View 
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:background="#BB1F35" />
    <!-- 組合控制元件 -->
    <include 
        android:id="@+id/bottom_bar"
        layout="@layout/bottom_bar" />
</LinearLayout>

②組合控制元件,Tab的製作

根據自己的需要進行設計,自定義控制元件

Java程式碼

public class BottomBar extends LinearLayout implements View.OnClickListener {

    private ImageView frag_main_iv;
    private TextView frag_main;

    private ImageView frag_category_iv;
    private TextView frag_category;

    private ImageView frag_shopcar_iv;
    private TextView frag_shopcar;

    private ImageView frag_mine_iv;
    private TextView frag_mine;
    private IBottomBarItemClickListener mListener;
    private int mCurrentTabId=-1;

    //程式設計師自己new控制元件的時候使用的
    public BottomBar(Context context) {
        super(context);
    }

    //將控制元件放到xml佈局中 系統在xml佈局檔案中載入控制元件的時候就會預設呼叫該構造器
    public BottomBar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    //獲取子控制元件  並且為子控制元件設定樣式
    //該方法用來告訴我們 佈局轉換成控制元件已經轉換完畢了
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        findViewById(R.id.frag_main_ll).setOnClickListener(this);
        findViewById(R.id.frag_category_ll).setOnClickListener(this);
        findViewById(R.id.frag_shopcar_ll).setOnClickListener(this);
        findViewById(R.id.frag_mine_ll).setOnClickListener(this);
        frag_main_iv = (ImageView) findViewById(R.id.frag_main_iv);
        frag_category_iv = (ImageView) findViewById(R.id.frag_category_iv);
        frag_shopcar_iv = (ImageView) findViewById(R.id.frag_shopcar_iv);
        frag_mine_iv = (ImageView) findViewById(R.id.frag_mine_iv);
        frag_main = (TextView) findViewById(R.id.frag_main);
        frag_category = (TextView) findViewById(R.id.frag_category);
        frag_shopcar = (TextView) findViewById(R.id.frag_shopcar);
        frag_mine = (TextView) findViewById(R.id.frag_mine);
        //模擬使用者點選了首頁
        findViewById(R.id.frag_main_ll).performClick();
    }

    /**
     * Indicators 指示器
     */
    private void changeIndicators(int viewId) {
        frag_main_iv.setSelected(viewId == R.id.frag_main_ll);
        frag_main.setSelected(viewId == R.id.frag_main_ll);
        frag_category_iv.setSelected(viewId == R.id.frag_category_ll);
        frag_category.setSelected(viewId == R.id.frag_category_ll);

        frag_shopcar_iv.setSelected(viewId == R.id.frag_shopcar_ll);
        frag_shopcar.setSelected(viewId == R.id.frag_shopcar_ll);
        frag_mine_iv.setSelected(viewId == R.id.frag_mine_ll);
        frag_mine.setSelected(viewId == R.id.frag_mine_ll);
    }

    @Override
    public void onClick(View view) {
        //如果當前是點選某個按鈕了 就要做一個攔截
        //每次都要獲取點選的item的id的優化
        int mTabId=view.getId();
        if (mCurrentTabId==mTabId){
            return;
        }
        switch (mTabId) {
            case R.id.frag_main_ll:
            case R.id.frag_category_ll:
            case R.id.frag_shopcar_ll:
            case R.id.frag_mine_ll:
                changeIndicators(mTabId);
                if (mListener != null) {
                    mListener.onItemClick(mTabId);
                }
                break;
        }
        //記錄當前點選的是哪個View
        mCurrentTabId=mTabId;
    }

    public void setIBottomBarItemClickListener(IBottomBarItemClickListener listener) {
        this.mListener = listener;
    }
}

xml程式碼

<?xml version="1.0" encoding="utf-8"?>
<com.it520.jdmall03.ui.BottomBar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:orientation="horizontal"  >

    <LinearLayout
        android:id="@+id/frag_main_ll" 
        style="@style/bottom_ll_style" >

        <ImageView
            android:id="@+id/frag_main_iv"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/home_bot_bar" />

        <TextView
            android:id="@+id/frag_main"
            style="@style/bottom_text_style"
            android:text="@string/frag_main" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/frag_category_ll" 
        style="@style/bottom_ll_style" >

        <ImageView
            android:id="@+id/frag_category_iv"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/category_bot_bar" />

        <TextView
            android:id="@+id/frag_category"
            style="@style/bottom_text_style"
            android:text="@string/frag_category" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/frag_shopcar_ll" 
        style="@style/bottom_ll_style" >

        <ImageView
            android:id="@+id/frag_shopcar_iv"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/shopcar_bot_bar" />

        <TextView
            android:id="@+id/frag_shopcar"
            style="@style/bottom_text_style"
            android:text="@string/frag_shopcar" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/frag_mine_ll"
        style="@style/bottom_ll_style" >

        <ImageView
            android:id="@+id/frag_mine_iv"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/mine_bot_bar" />

        <TextView
            android:id="@+id/frag_mine"
            style="@style/bottom_text_style"
            android:text="@string/frag_mine" />
    </LinearLayout>

</com.it520.jdmall03.ui.BottomBar>

效果如下

這裡寫圖片描述

整體效果如下

這裡寫圖片描述

每一個bottom都設定了背景選擇器,當選中時會更變顏色,可以更好地看出是哪個按鈕被選中,程式碼中還引用了Velues資料夾中資源件裡的屬性,這裡就不一一展示了.

③功能的實現

佈局設計完成後要進行功能的實現,就是按下不同的Tab,頁面進行切換
首先要建立好需要的Fragment,然後通過點選Tab按鈕進行Fragment的切換
程式碼如下:

public class MainActivity extends BaseActivity implements IBottomBarItemClickListener {

    private ArrayList<BaseFragment> mFragments;
    private BottomBar mBottomBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setBackgroundDrawable(null);
        setContentView(R.layout.activity_main);
        initViews();
        initFragments();
        changeFragment(mFragments.get(0));
    }

    private void initViews() {
        mBottomBar =(BottomBar) findViewById(R.id.bottom_bar);
        mBottomBar.setIBottomBarItemClickListener(this);
    }

    private void initFragments(){
        mFragments=new ArrayList<>();
        mFragments.add(new HomeFragment());
        mFragments.add(new CategoryFragment());
        mFragments.add(new ShopcarFragment());
        mFragments.add(new MyJdFragment());
    }

    /**
     * 點選底部欄切換Fragment--->事務
     * */
    private void changeFragment(BaseFragment f){
        FragmentManager fManager = getSupportFragmentManager();
        FragmentTransaction transaction = fManager.beginTransaction();
        //add 往容器裡面不斷的新增東西  此刻你可以認為容器就是一個佇列
        //remove  不斷的往容器裡面移除Fragment
        // show/hide   就是容器裡面已經有某個Fragment了 只能顯示隱藏
        //                  此刻Fragment的生命週期是沒變化     onHiddenChanged
        //replace  不管容器裡面有多少Fragment 都會銷燬掉  再新增新的Fragment
        //attach/detach  處理是否關聯Fragment內部的佈局  Fragment還在
        transaction.replace(R.id.top_bar,f);
        transaction.commitAllowingStateLoss();
    }

    /**
     * 底部欄點選的item方法回撥
     * */
    @Override
    public void onItemClick(int viewId) {
        switch (viewId) {
            case R.id.frag_main_ll:
                changeFragment(mFragments.get(0));
                break;
            case R.id.frag_category_ll:
                changeFragment(mFragments.get(1));
                break;
            case R.id.frag_shopcar_ll:
                changeFragment(mFragments.get(2));
                break;
            case R.id.frag_mine_ll:
                changeFragment(mFragments.get(3));
                break;
        }
    }

}

完成,終效果如下:
這裡寫圖片描述

2.利用系統提供的控制元件FragmentTabHost

①寫好主頁的佈局

分為兩部分,上面用FrameLayout來展示Fragment,下面為v4包下的FragmentTabHost控制元件,這是google提供的選單欄控制元件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/main_framelayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

    <android.support.v4.app.FragmentTabHost
        android:id="@+id/main_fragmenttabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.v4.app.FragmentTabHost>
</LinearLayout>

②功能實現

在MainActivity中找到控制元件,按照使用方法給控制元件新增自己需要的樣式

item佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
    android:gravity="center_horizontal">

    <ImageView
        android:id="@+id/item_tab_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/tab_my_selected"/>

    <TextView
        android:id="@+id/item_tab_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我的"/>
</LinearLayout>

java程式碼

public class MainActivity extends AppCompatActivity {

    private FrameLayout mMainFramelayout;
    private MyFragmentTabHost mMainTabhost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        initTabHost();
    }

    //tabHost切換tab
    private void initTabHost() {
        //最基本使用方式
        //        //1.初始化,傳入需要的引數
        //        mMainTabhost.setup(getApplicationContext(), getSupportFragmentManager(), R.id.main_framelayout);
        //        //2.開始設定tabhost
        //        //設定標籤,用來表示不同的tab
        //        TabHost.TabSpec tabSpec = mMainTabhost.newTabSpec("1");
        //        //設定指示器,即為顯示按鈕的佈局
        //        tabSpec.setIndicator("新聞");
        //        NewsFragment newsFragment = new NewsFragment();
        //        //引數:標籤,fragment物件,需要傳入的資料
        //        mMainTabhost.addTab(tabSpec, newsFragment.getClass(), null);
        //
        //利用for迴圈進行新增可以減少程式碼量
        mMainTabhost.setup(getApplicationContext(), getSupportFragmentManager(), R.id.main_framelayout);
        int[] resIds = {R.drawable.tab_news, R.drawable.tab_va, R.drawable.tab_topic, R.drawable.tab_my};
        String[] tabTexts = {"新聞", "直播", "話題", "我的"};
        Class[] fragmentClazz = {new NewsFragment().getClass(), new VaFragment().getClass(), new TopicFragment().getClass(), new MeFragment().getClass()};
        for (int i = 0; i < resIds.length; i++) {
            TabHost.TabSpec tabSpec = mMainTabhost.newTabSpec(String.valueOf(i));
            View inflate = View.inflate(getApplicationContext(), R.layout.item_tab, null);
            tabSpec.setIndicator(inflate);
            ImageView ivTab = (ImageView) inflate.findViewById(R.id.item_tab_iv);
            TextView tvTab = (TextView) inflate.findViewById(R.id.item_tab_tv);
            ivTab.setImageResource(resIds[i]);
            tvTab.setText(tabTexts[i]);

            mMainTabhost.addTab(tabSpec, fragmentClazz[i], null);
        }

    }

    private void initView() {
        mMainFramelayout = (FrameLayout) findViewById(R.id.main_framelayout);
        mMainTabhost = (MyFragmentTabHost) findViewById(R.id.main_tabhost);
    }
}

基本使用已經完成,效果如下圖:

這裡寫圖片描述

③優化

通過觀察原始碼發現,點選tab切換Fragment的方式為detach和attach兩個方法,這樣會導致每次切換Fragment時都會重新載入,不能保留客戶在介面上的操作,而我的業務需求是最好能保留客戶的操作,所以我重寫了這個類,並做了一點修改.

首先建立一個類MyFragmentTabHost,繼承TabHost,然後找到系統提供的FragmentTabHost類,全部複製一份,貼上到自己的類中,再進行修改下面方法,把detach和attach,改為hide和show

 @Nullable
    private FragmentTransaction doTabChanged(@Nullable String tag,
            @Nullable FragmentTransaction ft) {
        final TabInfo newTab = getTabInfoForTag(tag);
        if (mLastTab != newTab) {
            if (ft == null) {
                ft = mFragmentManager.beginTransaction();
            }

            if (mLastTab != null) {
                if (mLastTab.fragment != null) {
//                    ft.detach(mLastTab.fragment);
                    ==ft.hide(mLastTab.fragment)==;
                }
            }

            if (newTab != null) {
                if (newTab.fragment == null) {
                    newTab.fragment = Fragment.instantiate(mContext,
                            newTab.clss.getName(), newTab.args);
                    ft.add(mContainerId, newTab.fragment, newTab.tag);
                } else {
//                    ft.attach(newTab.fragment);
                    ==ft.show(newTab.fragment);==

                }
            }

修改完成後,再在佈局中修改引用的控制元件型別,改成自己的類就可以了.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.simon.newwangyi.activity.MainActivity">

    <FrameLayout
        android:id="@+id/main_framelayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

    <com.simon.newwangyi.view.MyFragmentTabHost
        android:id="@+id/main_tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </com.simon.newwangyi.view.MyFragmentTabHost>
</LinearLayout>

完成.

相關推薦

底下選單欄的實現

這兩天計劃做一個新的專案,但是當我剛開始動工的時候,發現自己連做過的功能都不知道怎麼實現,所以現在先做一個總結和整理,以後要用的時候可以方便使用. 有兩種方式實現:1.自定義. 2.用系統提供 1.自定義方式 ①寫好整體佈局 分為兩大部分,上面用幀佈局來展示fragment,

MFC新增選單欄實現頁面（視窗到視窗）的跳轉（基於VS2013）

首先我們看程式碼效果：點選選單中的跳轉頁面可以彈出新的視窗Step1（新建選單）首先新建一個MFC工程檔案，並開啟資源檢視新增選單欄Step2（編輯選單顯示）Step3（將選單顯示到主視窗）在主視窗的初始化函式（OnInitDialog()）中新增程式碼：CMenu menu

vue實現動態載入可收縮選單欄

引言 作為web前端開發，幾乎所有的web系統介面都會使用到選單欄，而大多數的左側選單欄都是可收縮的。接下來就一起學習下如何根據從後端獲取到的資料，動態的載入選單欄。 GitHub連結 Element-UI 我們可以使用element官網的官方demo作為基

小白入門實現一個視窗選單欄介面。

今天記錄的選單欄介面的實現。效果如下圖。         我們可以看到上圖的效果。我們可能會疑惑那些圖示是怎麼新增到視窗上面的。我們接下來貼出是如何出現這種效果的。 我們和平常一樣新建一個專案新增一個資原始檔來新增圖示。然後

【Android UI設計與開發】第06期：底部選單欄（一）使用TabActivity實現底部選單欄

轉載請註明出處：http://blog.csdn.net/yangyu20121224/article/details/8989063               從這一篇文章開始，我們將進入到一個應用程式主介面UI的開發和設計中了，底部選單欄在Android的應用開發當

【Qt】選單欄、工具欄、狀態列、右鍵選單的實現

在QMainWidget基礎上實現選單欄、工具欄、狀態列、右鍵選單。 標頭檔案： #ifndef GWDEMO_H #define GWDEMO_H #include <QMainWindow> #include <QMenu> #include <Q

JS實現側部選單欄的滑動

最近的網站越來越流行側部選單欄，所以今天自己實現了一下: <body> <div id="main"> <div id="content"> <img src="http://p2

極簡的選單欄收放實現

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選單收放</title> <scr

3種方法實現導航選單欄中的二級下拉選單

我們在淘寶、搜狐等大型網站上都可以看到使用的一些二級下拉選單，比如下面這張圖片。我們有至少三種方式來實現，附上程式碼供大家參考。   1.僅使用html和css <!DOCTYPE html><html lang="en"><head><meta

webview長按點選實現彈出選單欄

最近有一個需求，當長按點選webview，彈出選單欄，這是系統預設的有複製，全選，搜尋等功能，而不能滿足公司需求，同時公司需要將分享和搜尋功能去掉，新增自己的選單： 新增自己的功能,自定義webview，複寫下邊兩個方法： @Override public ActionMo

一步一步地實現選單欄(JMenuBar)工具欄(JPopupMenu)組合框(JComboBox)複選框(JCheckBox)單選按鈕(JRadioButton)文字域的綜合應用(三)

         此程式是在前面程式的基礎上增加響應事件的完整程式，為了不讓程式太長，我想將快捷鍵(右鍵彈出選單)的事件專門放在一個類裡面，但遇到了一個問題，發現不好將原來類EditorJFrame3裡的popupmenu和text成員變數引數傳遞到專門的事件類中，於是想出了

SWT工具欄選單的實現

彈出選單要定義為SWT.POP_UP 帶有下拉按鈕的工具欄按鈕要設定為SWT.DROP_DOWN 判斷是否是單擊下拉按鈕事件的方法程式碼： if(event.detail == SWT.ARROW) 顯示選單時，要先計算出選單所要出現的位置，然後通過setLocation(

首頁-底部&頂部Tab導航（選單欄）的實現：TabLayout+ViewPager+Fragment

前言 Android開發中使用頂部 & 底部Tab導航欄的頻次非常高，主要的實現手段有以下： TabWidget 隱藏TabWidget，使用RadioGroup和RadioButton FragmentTabHost 5.0以後的TabLayou

Qt實現選單欄，工具欄，狀態列

1.選單欄 1.設計模式 點選 在這裡輸入 輸入完畢後直接回車即可 同樣子選單也是同樣操作。 如果我們想給選單設定ICON，可以如下操作： 在File下新建一個Open子選單，現在想給Open子選單新增Icon圖示。選中子選單Open，在O

Android中使用NavigationView實現抽屜側滑效果中Menu選單欄設定

a、在value/styles.xml中定義樣式<!--設定Menu中item的字型大小-->     <style name="WindowTitle" parent="@android:style/TextAppearance">         <item name="a

多種方式實現底部選單欄（仿微信介面）

關於底部選單是什麼，我想沒必要介紹了，在市場上的APP裡太常見了，這裡提供兩種方式來實現。 記得之前寫過幾篇關於底部選單實現的方法，有興趣的朋友可以看看： 今天帶來種相對更通俗易懂的寫法，不再和過去一樣去沿用TabHost了，這次我們直接用LinearLayout佈

css動畫效果：實現滑鼠移入選單欄文字下出現下劃線

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w

【Android】側滑選單欄功能的實現（類似於QQ）

    通過NavigationView+DrawerLayout來實現側滑選單的功能（效果圖如上），可通過點選左上角圖示以及向右滑動實現側滑選單     首先在主頁佈局xml中使用DreawerLayout作為外包裝，將側滑選單包裝起來即可，而功能則使用navigat

MySQL 實現樹形的遍歷（關於多級選單欄以及多級上下部門的查詢問題）

前言： 關於多級別選單欄或者許可權系統中部門上下級的樹形遍歷，oracle中有connect by來實現，mysql沒有這樣的便捷途徑，所以MySQL遍歷資料表是我們經常會遇到的頭痛問題，下面通過儲存過程來實現。 1，建立測試表和資料：

Android開發-實現底部彈出選單欄

效果圖： activity_main: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/and