Android TabLayout系列之简单使用

作者: joker_fu | 来源:发表于2017-09-18 10:53 被阅读1333次

1 前言

在上一篇 Android TabLayout系列之属性中我们介绍了TabLayout的属性，同时也给出了一些简单的效果图。但是没有具体到它的使用，今天就来看看TabLayout的简单使用。不知道大家留意到我们仿网易的效果布局中，我们明明是写的小写字母，字母就变成大写了，还有字体大小能改变否？我们一步一步来解决这些问题......

2 使用

介绍一种在实际开发中TabLayout较为常用的方式，那就是和ViewPager配合使用，实现联动。首先看看xml布局：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@android:color/white"
        app:tabIndicatorColor="@android:color/holo_red_light"
        app:tabIndicatorHeight="2dp"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@android:color/holo_red_light"
        app:tabTextColor="@android:color/darker_gray"/>

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

是不是很简单的布局，就只有一个TabLayout和ViewPager垂直排列，其实这个还不是官方的布局样式，官方的是这样的：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@android:color/white"
            app:tabIndicatorColor="@android:color/holo_red_light"
            app:tabIndicatorHeight="2dp"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@android:color/holo_red_light"
            app:tabTextColor="@android:color/darker_gray"/>

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

第一种是我们常见到的，第二种是官方的，两种的区别是官方这种写法不用调用setupWithViewPager方法。接下来我们看看Activity的代码怎么实现的：

public class MainActivity extends BaseActivity {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private MainPagerAdapter mAdapter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        AppStatusTracker.init(getApplication());
        super.onCreate(savedInstanceState);
    }

    @Override
    protected void initContentView() {
        setContentView(R.layout.activity_main);
    }

    @Override
    protected void initView() {
        mTabLayout = findView(tabLayout);
        mViewPager = findView(R.id.viewPager);
        for (int i = 0; i < 11; i++) {
            //为TabLayout添加10个tab并设置上文本
            mTabLayout.addTab(mTabLayout.newTab().setText("Tab " + i));
        }

        mAdapter = new MainPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mAdapter);
        //官方推荐的绑定ViewPager方式
        mTabLayout.setupWithViewPager(mViewPager);
    }

    @Override
    protected void initData(@Nullable Bundle savedInstanceState) {

    }

    //ViewPager适配器  10个Fragment
    private class MainPagerAdapter extends FragmentPagerAdapter {
        public MainPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return BlankFragment.newInstance(position);
        }

        @Override
        public int getCount() {
            return 10;
        }
    }
}

接下来是BlankFragment的实现：

public class BlankFragment extends Fragment {
    private int index;

    public BlankFragment() {
        // Required empty public constructor
    }

    public static Fragment newInstance(int position) {
        BlankFragment fragment = new BlankFragment();
        fragment.index = position;
        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_blank, container, false);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        ((TextView) view.findViewById(R.id.textView)).setText("this Tab " + index);
    }
}

这里需要先解释newTab，这个newTab是使用TabLayout中默认的Tab实现。从它的实现可以看到它支持设置图标，标题和内容描述（图标描述）。

    public static final class Tab {

        /**
         * An invalid position for a tab.
         *
         * @see #getPosition()
         */
        public static final int INVALID_POSITION = -1;

        private Object mTag;
        private Drawable mIcon;
        private CharSequence mText;
        private CharSequence mContentDesc;
        private int mPosition = INVALID_POSITION;
        private View mCustomView;

        TabLayout mParent;
        TabView mView;
  .....
    }

Tab默认图标在标题的上方，还有xml里面设置TabItem的话，最终也是设置到Tab上。关于Tab就说明这些，具体的大家可以自行测试。
可以看到关于TabLayout的实现也很简单，就是给布局里面的TextView设置了文本显示当前是第几个Tab。布局就更简单了，FrameLayout中嵌套了一个TextView，就不单独给出了。接下来我们就可以来瞅一瞅实际的使用效果了。

3 “填坑”与源码解析

源码解析
看到上面的效果图是不是觉得很怪异？没错，我们所设置的Tab上的文字没了，只有下面的指示条。相信大家一通搜索后，相信大家都知道了，最常见的就是分析源码后得出结论，被remove了！！！接下来我们也来装下文化人，看看怎么回事？
首先是TabLayout的setupWithViewPager方法，一顿单击后会到达如下源码位置：

private void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh,
            boolean implicitSetup) {
        if (mViewPager != null) {
            // If we've already been setup with a ViewPager, remove us from it
            if (mPageChangeListener != null) {
                mViewPager.removeOnPageChangeListener(mPageChangeListener);
            }
            if (mAdapterChangeListener != null) {
                mViewPager.removeOnAdapterChangeListener(mAdapterChangeListener);
            }
        }
......
......
            if (adapter != null) {
                // Now we'll populate ourselves from the pager adapter, adding an observer if
                // autoRefresh is enabled
                setPagerAdapter(adapter, autoRefresh);
            }
......
......

            // Now update the scroll position to match the ViewPager's current item
            setScrollPosition(viewPager.getCurrentItem(), 0f, true);
        } else {
            // We've been given a null ViewPager so we need to clear out the internal state,
            // listeners and observers
            mViewPager = null;
            setPagerAdapter(null, false);
        }

        mSetupViewPagerImplicitly = implicitSetup;
    }

这里没什么说的就是设置判断移除、设置监听等操作，我们最主要去找到网上最多叙述问题所在的源码位置，接下来我们看setPagerAdapter：

    void setPagerAdapter(@Nullable final PagerAdapter adapter, final boolean addObserver) {
        if (mPagerAdapter != null && mPagerAdapterObserver != null) {
            // If we already have a PagerAdapter, unregister our observer
            mPagerAdapter.unregisterDataSetObserver(mPagerAdapterObserver);
        }

        mPagerAdapter = adapter;

        if (addObserver && adapter != null) {
            // Register our observer on the new adapter
            if (mPagerAdapterObserver == null) {
                mPagerAdapterObserver = new PagerAdapterObserver();
            }
            adapter.registerDataSetObserver(mPagerAdapterObserver);
        }

        // Finally make sure we reflect the new adapter
        populateFromPagerAdapter();
    }

这段代码主要是判断之前的mPagerAdapter是否为空，不为空就移除DataSetObserver监听，将新的adapter设置进来并注册上DataSetObserver监听。这里我们捕获方法populateFromPagerAdapter一枚，我们再看看它的实现：

    void populateFromPagerAdapter() {
        removeAllTabs();

        if (mPagerAdapter != null) {
            final int adapterCount = mPagerAdapter.getCount();
            for (int i = 0; i < adapterCount; i++) {
                addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
            }

            // Make sure we reflect the currently set ViewPager item
            ......
        }
    }

哇塞！removeAllTabs，大家说得最多的一个方法，观看方法名就很吓人了，remove all tabs....看看它到底干了什么：

    public void removeAllTabs() {
        // Remove all the views
        for (int i = mTabStrip.getChildCount() - 1; i >= 0; i--) {
            removeTabViewAt(i);
        }

        for (final Iterator<Tab> i = mTabs.iterator(); i.hasNext();) {
            final Tab tab = i.next();
            i.remove();
            tab.reset();
            sTabPool.release(tab);
        }

        mSelectedTab = null;
    }

它果真和它的命名一样，遍历remove了所有的tab，并且将当前选中也置为null。怎么办？难道Google故意留下这么个坑？我们继续看上面的populateFromPagerAdapter，会发现removeAllTabs后，它会判断adapter是否为空，不为空就调用了addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false)添加上了新的tab。

"填坑"思路

从上面的分析，我们发现如果要有tab还得去重写adapter的getPageTitle方法。再看一段官方文档中的说明：

If you're using a ViewPager together with this layout, you can call setupWithViewPager(ViewPager)
to link the two together. This layout will be automatically populated from the PagerAdapter
's page titles.

就是说官方推荐我们使用setupWithViewPager(ViewPager)来关联Tablayout和Viewpager，且TabLayout会自动填充PagerAdapter的Title。也就是说它会自动创建tab，并绑定为adapter的page
title。这下我们来改造下Activity：

public class MainActivity extends BaseActivity {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private MainPagerAdapter mAdapter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        AppStatusTracker.init(getApplication());
        super.onCreate(savedInstanceState);
    }

    @Override
    protected void initContentView() {
        setContentView(R.layout.activity_main);
    }

    @Override
    protected void initView() {
        mTabLayout = findView(tabLayout);
        mViewPager = findView(R.id.viewPager);
        mAdapter = new MainPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mAdapter);
        //官方推荐的绑定ViewPager方式
        mTabLayout.setupWithViewPager(mViewPager);
    }

    @Override
    protected void initData(@Nullable Bundle savedInstanceState) {

    }

    //ViewPager适配器  10个Fragment
    private class MainPagerAdapter extends FragmentPagerAdapter {
        public MainPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return BlankFragment.newInstance(position);
        }

        //TabLayout会根据当前page的title自动绑定tab
        @Override
        public CharSequence getPageTitle(int position) {
            return "Tab " + position;
        }

        @Override
        public int getCount() {
            return 10;
        }
    }
}

这就是新的Activity实现，改动很小。我们首先删除了initView中关于tab的初始化操作，然后重写了FragmentPagerAdapter的getPageTitle方法。

我们既然知道他会自动为我们绑定tab，那么我们可以利用它自动帮我绑定tab，而不去重写getPageTitle方法，在绑定后去设置关于tab的显示。

public class MainActivity extends BaseActivity {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private MainPagerAdapter mAdapter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        AppStatusTracker.init(getApplication());
        super.onCreate(savedInstanceState);
    }

    @Override
    protected void initContentView() {
        setContentView(R.layout.activity_main);
    }

    @Override
    protected void initView() {
        mTabLayout = findView(tabLayout);
        mViewPager = findView(R.id.viewPager);
        mAdapter = new MainPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mAdapter);
        //官方推荐的绑定ViewPager方式
        mTabLayout.setupWithViewPager(mViewPager);
        int tabCount = mTabLayout.getTabCount();
        for (int i = 0; i < tabCount; i++) {
            //这里tab可能为null 根据实际情况处理吧
            mTabLayout.getTabAt(i).setText("Tab" + i);
        }
    }

    @Override
    protected void initData(@Nullable Bundle savedInstanceState) {

    }

    //ViewPager适配器  10个Fragment
    private class MainPagerAdapter extends FragmentPagerAdapter {
        public MainPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return BlankFragment.newInstance(position);
        }

        @Override
        public int getCount() {
            return 10;
        }
    }
}

可以看到只是将initView中初始化Tab的位置调整到setupWithViewPager的后面，设置上我们需要的标题。这里效果和上面一样就不给出来占篇幅了。

上面我们依旧利用了setupWithViewPager自动为我们绑定tab的实现，在分析源码的时候发现它会调用ViewPager的addOnPageChangeListener和TabLayout的addOnTabSelectedListener，实现TabLayout与ViewPager的关联。那么我们就自己来实现关联，不去使用官方推荐的setupWithViewPager方法绑定。

public class MainActivity extends BaseActivity {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private MainPagerAdapter mAdapter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        AppStatusTracker.init(getApplication());
        super.onCreate(savedInstanceState);
    }

    @Override
    protected void initContentView() {
        setContentView(R.layout.activity_main);
    }

    @Override
    protected void initView() {
        mTabLayout = findView(tabLayout);
        mViewPager = findView(viewPager);
        mAdapter = new MainPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mAdapter);
        //初始化tab
        for (int i = 0; i < 10; i++) {
            mTabLayout.addTab(mTabLayout.newTab().setText("item" + i));
        }
        //自己实现关联
        mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
        mTabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));
    }

    @Override
    protected void initData(@Nullable Bundle savedInstanceState) {

    }

    //ViewPager适配器  10个Fragment
    private class MainPagerAdapter extends FragmentPagerAdapter {
        public MainPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return BlankFragment.newInstance(position);
        }

        @Override
        public int getCount() {
            return 10;
        }
    }
}

这段代码，在initView中移除了官方推荐的设置相关代码，自己初始化了tab并实现了关联。注意这里我们改变了Tab的标题作为区分。效果也和上面一样，只是改变了Tab的标题。

4 其他问题

这样TabLayout的简单使用就介绍完了，这里还有两个问题一个是TabLayout的标题怎么就是大写了，还有它的文字大小怎么改呢？还记得我怎么在上一篇Android TabLayout系列之属性中介绍的tabTextAppearance属性么？我们就利用它来改变标题字母大小写和文字大小问题。先开看看TabLayout源码中的默认使用：

      mTabTextAppearance = a.getResourceId(R.styleable.TabLayout_tabTextAppearance,
      R.style.TextAppearance_Design_Tab);


      <style name="TextAppearance.Design.Tab" parent="TextAppearance.AppCompat.Button">
          <item name="android:textSize">@dimen/design_tab_text_size</item>
          <item name="android:textColor">?android:textColorSecondary</item>
          <item name="textAllCaps">true</item>
      </style>

我们为Tablayout添加上tabTextAppearance属性：

      app:tabTextAppearance="@style/TabLayoutStyle"

这里需要把具体的属性定义到stytle中，这里有两种方式：

    <style name="TabLayoutStyle" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">16sp</item>
        <item name="textAllCaps">false</item>
    </style>

      <style name="TabLayoutStyle">
          <item name="android:textSize">16sp</item>
         //<item name="textAllCaps">false</item>
          <item name="android:textAllCaps">false</item>
      </style>

需要注意 parent="TextAppearance.Design.Tab"时，textAllCaps没有android，当不继承的时候有没有都可以。其实这里的字母大小写，不能算个坑。我们可以看material设计中所有tab的字母都是大写，估计歪果仁标题都习惯大写吧，或者是为了符合material设计，所以默认的Tab被设置成了大写。最后运行效果如下：

这里附上我的build.gradle，有可能不同版本会有不一样的效果，所以大家实际使用的时候需要注意一下：

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.1"

    defaultConfig {
        applicationId "com.joker.demo"
        minSdkVersion 19
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

TabLayou的简单使用就介绍这么多，其实真的是简单使用，主要是中间插入了一段源码分析，所以看起来多了点。
附：

Android TabLayout系列之简单使用

1 前言

2 使用

3 “填坑”与源码解析

4 其他问题

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

android