TabLayout 的幾種用法

時間 2020-11-30

標籤 java android git github app ide 佈局 spa code 欄目 Java 简体版

原文原文鏈接

1.結合ViewPager使用

這是最多見的用法了，實現也比較簡單。java

佈局文件：android

<android.support.design.widget.TabLayout
            android:id="@+id/tab_book"
            android:layout_width="match_parent"
            android:layout_height="38dp"
            app:tabBackground="@drawable/ripple_tab_bg"
            app:tabIndicatorColor="@color/colorTheme"
            app:tabSelectedTextColor="@color/colorTheme"
            app:tabTextColor="@color/colorTabText" />

        <android.support.v4.view.ViewPager
            android:id="@+id/vp_book"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </android.support.v4.view.ViewPager>

對應的Activity頁面：git

public class WanFragment extends BaseFragment<NoViewModel,FragmentBookBinding> {

    private ArrayList<String> mTitleList = new ArrayList<>(3);
    private ArrayList<Fragment> mFragments = new ArrayList<>(3);

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        showLoading();
        initFragmentList();
        MyFragmentPagerAdapter myAdapter = new MyFragmentPagerAdapter(getChildFragmentManager(), mFragments, mTitleList);
        bindingView.vpBook.setAdapter(myAdapter);
        // 左右預加載頁面的個數
        bindingView.vpBook.setOffscreenPageLimit(2);
        myAdapter.notifyDataSetChanged();
        bindingView.tabBook.setTabMode(TabLayout.MODE_FIXED);
        bindingView.tabBook.setupWithViewPager(bindingView.vpBook);
        showContentView();
    }

    @Override
    public int setContent() {
        return R.layout.fragment_book;
    }

    private void initFragmentList() {
        mTitleList.clear();
        mTitleList.add("玩安卓");
        mTitleList.add("知識體系");
        mTitleList.add("導航數據");
        mFragments.add(BannerFragment.newInstance());
        mFragments.add(TreeFragment.newInstance());
        mFragments.add(NaviFragment.newInstance());
    }
}

設置後就能夠達到切換滑動的效果。github

2.點擊滑動選中，相似`RadioGroup`的效果

不過它與RadioGroup不一樣在於它有下劃線能夠滑動，更動感...，若是產品經理要求這樣實現，就能夠派上用場了。app

佈局文件：ide

<android.support.design.widget.TabLayout
            android:id="@+id/tl_search"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:background="@color/colorTheme"
            app:tabGravity="center"
            app:tabIndicatorColor="@color/colorWhite"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/colorWhite"
            app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
            app:tabTextColor="@color/colorWhiteHalf">

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="玩安卓"
                android:textColor="@color/colorWhite"
                android:textSize="12sp" />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="乾貨 | 安卓"
                android:textColor="@color/colorWhite"
                android:textSize="12sp" />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="乾貨 | 所有"
                android:textColor="@color/colorWhite"
                android:textSize="12sp" />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="網頁"
                android:textColor="@color/colorWhite"
                android:textSize="12sp" />
        </android.support.design.widget.TabLayout>

固然也能夠在Activit動態添加，其中的一些顏色設置等就不細說了~：佈局

for (String bean : list) {
            MyTabLayout.Tab tab = binding.tlSearch.newTab();
            tab.setText(bean.getName());
            binding.tlSearch.addTab(tab);
        }

而後再監聽點擊的時候作處理：ui

binding.tlSearch.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        // 選中 邏輯操做 (再次點擊不會觸發)
    }

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

    }

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

    }
});

3.點擊滑動到屏幕中央，並再次點擊可取消

這樣的效果很實用，不少App都會有這樣的效果，之前我都是用HorizontalScrollView來實現的，設置點擊的item滑動到屏幕中央。spa

後來想一想TabLayout繼承自HorizontalScrollView，選中也會自動滾動並居中，因而就選用了它來實現，相對於直接使用HorizontalScrollView代碼量更少。code

佈局文件：

<android.support.design.widget.TabLayout
                android:id="@+id/tl_tag"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                app:tabIndicatorHeight="0dp"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/color_theme" />

Activity裏控制：

// 添加自定義Tab
            for (int i = 0; i < result.size(); i++) {
                TabLayout.Tab tab = bindingView.tlTag.newTab();
                bindingView.tlTag.addTab(tab.setCustomView(getTabView(result.get(i).getName())));
            }
            // 默認 手動設置 position=0的Tab不選中
            if (bindingView.tlTag.getTabAt(0) != null
                    && bindingView.tlTag.getTabAt(0).getCustomView() != null) {
                bindingView.tlTag.getTabAt(0).getCustomView().setSelected(false);
            }
            // 添加監聽
            addTagListener();

// 哪一個tag被選擇過
private int tagSelectPosition = 0;
// 是否被選中
private boolean tagSelect = false;

// 主要處理取消選中的狀態
private void addTagListener() {
    bindingView.tlTag.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            // // 切換到此tab，則設置已選中position和選中的狀態
            tagSelectPosition = tab.getPosition();
            tagSelect = true;
            // do something..
        }

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

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            // // Tab再次被點擊會走這裏
            // 以前手動 [取消] 的tab角標 初始值爲0
            if (tagSelectPosition == tab.getPosition()) {
                if (tagSelect) {
                    // tab以前被選中，則手動取消
                    if (bindingView.tlTag.getTabAt(tab.getPosition()) != null
                            && bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView() != null) {
                        tagSelectPosition = tab.getPosition();
                        tagSelect = false;
                        bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView().setSelected(false);
                        // do something..
                    }

                } else {
                    // tab以前被取消，則手動將其選中
                    if (bindingView.tlTag.getTabAt(tab.getPosition()) != null
                            && bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView() != null) {
                        tagSelectPosition = tab.getPosition();
                        tagSelect = true;
                         // do something..
                    }
                }
            } else {
                // 通常不會觸發，以防萬一
                if (bindingView.tlTag.getTabAt(tab.getPosition()) != null
                        && bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView() != null) {
                    tagSelectPosition = tab.getPosition();
                    tagSelect = true;
                     // do something..
                }
            }
        }
    });
}

TabLayout 的幾種用法

1.結合ViewPager使用

2.點擊滑動選中，相似RadioGroup的效果

3.點擊滑動到屏幕中央，並再次點擊可取消

相關代碼

2.點擊滑動選中，相似`RadioGroup`的效果