Android 用TabLayout實作檔案路徑標題“面包屑”效果

再三思考后深海決定用TabLayout來實作面包屑的效果，如下圖：

改造TabLayout使它變成面包屑有三點改變：

1.動態添加Tab到尾部 2.自動選中尾部并滑動到尾部 3.假如選擇中間的Tab洗掉后方Tab

XML代碼：

    <com.google.android.material.tabs.TabLayout
                android:id="@+id/common_search_tablelayout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:tabIndicatorHeight="0dp"
                app:tabSelectedTextColor="@color/TextBlack_272727"
                app:tabTextColor="@color/gray_4D272727"
                app:tabPadding="10dp"
                app:tabMode="scrollable"
                app:tabTextAppearance="@style/TabText"
                />

    <style name="TabText">
        <item name="android:textSize">16sp</item>
    </style>

注意點有二：

1.寬度 wrap_content 如果設撐滿的話第一個Tab會居中，所以自適應寬度

2.模式 app:tabMode = scrollable 因為默認的模式會使得新添加的Tab平分當前TabLayout的寬度

TabLayout選擇監聽

//面包屑資料源 與 為控制元件的映射資料，方便串列切換
ArrayList<Bean> mTabList = new ArrayList<>();
//面包屑對應串列資料源  - 切換變更
ArrayList<Bean> mTabDataList = new ArrayList<>();
mTabList.add(mTabDataList.get(0)); //根目錄
mTabLayout.addTab(mTabLayout.newTab().setText(mTabDataList.get(0).obj_name));
mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                try {
                    for (int i = mTabList.size() - 1; i > tab.getPosition(); i--) {
                        //1 當用戶點擊任意tab  洗掉該tab本身除外的所有同類和同類資料
                        mTabLayout.removeTabAt(i);
                    }
                       //2 給當前點擊的上一個Tab加“>”符號， 假如有上一個的話
                    if (mTabList.size() > 1) {
                        int pos = tab.getPosition() - 1;
                        mTabLayout.getTabAt(pos).setText(mTabDataList.get(pos).obj_name + " >");
                    }
                       //2 清楚當前選擇的Tab后面的“>”符號， 假如有的話
mTabLayout.getTabAt(tab.getPosition()).setText(mTabDataList.get(tab.getPosition()).obj_name);
                    // 3 todo: 這里修改為切換后的資料 然后重繪mAdapter
                    mAdapter.setTabData(mTabDataList);
                } catch (Exception e) {
                    e.printStackTrace();
                }

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

1、無論點擊第幾個Tab都洗掉后面的Tab（假如后面有的話）

2、這一步為：Title選擇后的尾部與前方的區別展示，沒有需求的朋友可以越過這一步

3、資料源重繪

串列View的點擊事件：

mAdapter.自定義點擊回呼(new 某某Adapter.自定義回呼方法() {
            @Override
            public void 回呼方法名(Bean bean) {
                if (bean.tag!= -1) {//判斷是否可展開
                    //子目錄點擊回呼   處理頭部選中
                    mTabList.add(bean);
                    mTabLayout.addTab(mTabLayout.newTab().setText(bean.obj_name == null ? "- -" + " >" : bean.obj_name + " >"));
                    mTabLayout.postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            mTabLayout.getTabAt(mTabList.size() - 1).select();
                        }
                    }, 100);

                }

            }
        });

串列點擊事件做了兩件事：

1.點擊某檔案夾后 給TabLayout添加新Tab

2.用代碼選擇TabLayout使其選中并滑動到對應位置

結語

以上就是深海寫的仿面包屑的最簡單實作，利用了原生控制元件TabLayout與面包屑的相似之處與改造不同之處去實作，

如果有任何問題都可以留言哦，深海每天都會上CSDN的，

如果感覺本文章對您有幫助的話歡迎點贊或收藏哦，感謝支持，