android学习-----使用TabLayout实现Tab选项卡以及遇到的一些问题（二）

TabLayout+ViewPager+Fragment的使用

1. Xml中添加一个ViewPager

<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="50dp"
            app:tabBackground="@android:color/white"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="1dp"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/colorPrimaryDark"
            app:tabTextColor="@android:color/black"
            >
        </android.support.design.widget.TabLayout>

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

这里可以用ViewPager包裹住TabLayout。没有影响。

2.添加ViewPager里面的Fragment

public class MainActivity extends AppCompatActivity {

    @InjectView(R.id.tabLayout)
    TabLayout mTabLayout;
    @InjectView(R.id.viewPager)
    ViewPager mViewPager;

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

        mTabLayout.addTab(mTabLayout.newTab().setText("tab01"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab02"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab03"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab04"));

        List<String> list = new ArrayList<>();
        list.add("tab Content 1");
        list.add("tab Content 2");
        list.add("tab Content 3");
        list.add("tab Content 4");

        SimpleFragmentAdapter simpleFragmentAdapter = new SimpleFragmentAdapter(getSupportFragmentManager(), list);
        mViewPager.setAdapter(simpleFragmentAdapter);
        mTabLayout.setupWithViewPager(mViewPager);


        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) { //点击第一次的tab选项回调
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {  //上一次的tab回调
                Log.i("MainActivity", "onTabUnselected: " + tab.getText());
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) { // 再次点击同一个tab的回调
                Log.i("MainActivity", "onTabReselected: " + tab.getText());

            }
        });
    }
}

还是昨天的代码 可以看见

List<String> list = new ArrayList<>();
        list.add("tab Content 1");
        list.add("tab Content 2");
        list.add("tab Content 3");
        list.add("tab Content 4");

        SimpleFragmentAdapter simpleFragmentAdapter = new SimpleFragmentAdapter(getSupportFragmentManager(), list);
        mViewPager.setAdapter(simpleFragmentAdapter);
        mTabLayout.setupWithViewPager(mViewPager);

我们在这里添加的一个ViewPager的Adapter ，很简单的一个Fragment和Adapter这里就不贴代码了，看效果吧。

这里可以看见TabLayout+ViewPager+Fragment基本上以及实现了。通过TabLayout的setupWithViewPager方法，讲TabLayout和ViewPager的切换事件关联起来。从源码可以看到这里setupWithViewPager 有2个重载方法,没试过autoRefresh=false时候的变化是什么。。。

  /**
     * The one-stop shop for setting up this {@link TabLayout} with a {@link ViewPager}.
     *
     * <p>This is the same as calling {@link #setupWithViewPager(ViewPager, boolean)} with
     * auto-refresh enabled.</p>
     *
     * @param viewPager the ViewPager to link to, or {@code null} to clear any previous link
     */
    public void setupWithViewPager(@Nullable ViewPager viewPager) {
        setupWithViewPager(viewPager, true);
    }

    /**
     * The one-stop shop for setting up this {@link TabLayout} with a {@link ViewPager}.
     *
     * <p>This method will link the given ViewPager and this TabLayout together so that
     * changes in one are automatically reflected in the other. This includes scroll state changes
     * and clicks. The tabs displayed in this layout will be populated
     * from the ViewPager adapter's page titles.</p>
     *
     * <p>If {@code autoRefresh} is {@code true}, any changes in the {@link PagerAdapter} will
     * trigger this layout to re-populate itself from the adapter's titles.</p>
     *
     * <p>If the given ViewPager is non-null, it needs to already have a
     * {@link PagerAdapter} set.</p>
     *
     * @param viewPager   the ViewPager to link to, or {@code null} to clear any previous link
     * @param autoRefresh whether this layout should refresh its contents if the given ViewPager's
     *                    content changes
     */
    public void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh) {
        setupWithViewPager(viewPager, autoRefresh, false);
    }

但是我们这里发现一个问题我们设置的TabItem去哪儿了？ 看上去是有TabItem的但是怎么文字内容没显示呢？不着急慢慢来  是不是应该吧addTab的代码加到下面呢？ 试试吧

这样写

 List<String> list = new ArrayList<>();
        list.add("tab Content 1");
        list.add("tab Content 2");
        list.add("tab Content 3");
        list.add("tab Content 4");

        SimpleFragmentAdapter simpleFragmentAdapter = new SimpleFragmentAdapter(getSupportFragmentManager(), list);
        mViewPager.setAdapter(simpleFragmentAdapter);
        mTabLayout.setupWithViewPager(mViewPager);

        mTabLayout.addTab(mTabLayout.newTab().setText("tab01"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab02"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab03"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab04"));

先设置Adapter，然后添加tab这样看看效果吧

问题一：TabLayout TabItem 显示不正常，空白问题

额，这是什么鬼，Tabitem看着是出现了，可是好像和想象中的不对，前面空白的地方是什么鬼？后面点击那几个又怎么没反应？

这个时候就需要百度下了吧。。。。。

好吧，结果发现呢，这是为啥呢，好像上面的空白部分的Item就是通过添加ViewPager里面Fragment数量产生的。然后我们有添加了几个item所以后面的item点击没反应？是个道理吗？

既然这样那么我们这样做

 List<String> list = new ArrayList<>();
        list.add("tab Content 1");
        list.add("tab Content 2");
        list.add("tab Content 3");
        list.add("tab Content 4");

        SimpleFragmentAdapter simpleFragmentAdapter = new SimpleFragmentAdapter(getSupportFragmentManager(), list);
        mViewPager.setAdapter(simpleFragmentAdapter);
        mTabLayout.setupWithViewPager(mViewPager);

//        mTabLayout.addTab(mTabLayout.newTab().setText("tab01"));
//        mTabLayout.addTab(mTabLayout.newTab().setText("tab02"));
//        mTabLayout.addTab(mTabLayout.newTab().setText("tab03"));
//        mTabLayout.addTab(mTabLayout.newTab().setText("tab04"));

        for (int i = 0; i < list.size(); i++) {
            mTabLayout.getTabAt(i).setText("Tab" + i);
        }

再看看效果呢？

诶，好像是这个道理也,这样写法mTabLayout.getTabAt(i).setText(""); 可以去设置item的文字.

问题二: TabLayout tab文字大写问题

我明明是小写的Tab+i 为什么Item上面却是大写的TAB+i 为他的文字信息，这还真是奇怪。本想通过样式的方式解决掉，发现不行，后来我网上找了一下，发现这是一个bug， https://code.google.com/p/android/issues/detail?id=202117，不过现在已经修复了，添加样式

<style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>
        <item name="android:textAllCaps">false</item>
    </style>

在TabLayout xml标签下，这样写

<android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            app:tabTextAppearance="@style/MyCustomTextAppearance"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:tabBackground="@android:color/white"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="1dp"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/colorPrimaryDark"
            app:tabTextColor="@android:color/black"
            >

注意标红部分，现在再看看效果

代码里面是这样设置的tab名

for (int i = 0; i < list.size(); i++) {
            mTabLayout.getTabAt(i).setText("Tab" + i);
        }

现在Tab名称已经正确显示了，真是棒棒哒。

先就到这里，比如设置ico图标，自定义View 等等、、、、更多功能等待发掘。