TabLayout

TabLayout使用#

最近在做一个项目,用到了TabLayout这个新型控件,所以写此文章记录下学习成果。###

先来看一下效果图###

TabLayout_第1张图片

实现这个效果其实很简单###

  • 第一步:在Android Studio中,按ctrl+alt+shift+s,然后在Dependencies中添加design依赖。如图


    TabLayout_第2张图片
  • 第二步:声明控件:

TabLayout_第3张图片
  • 第三步:使用TabLayout
  • `package com.yutianwang.test;

public class MainActivity extends Activity {

private TabLayout tabLayout;
private ViewPager vp_out;
private ViewPager vp_in;
private String[] tab = new String[]{"Tab1","Tab2","Tab3","Tab4","Tab5","Tab6","Tab7","Tab8","Tab9","Tab10"};
private ArrayList mList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    tabLayout = (TabLayout) findViewById(R.id.tl);
    vp_out = (ViewPager) findViewById(R.id.vp_out);

    initData();
    vp_out.setAdapter(new MyOutPagerAdapter());
    tabLayout.setupWithViewPager(vp_out);
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

}

private void initData() {
    for (int i = 0; i < tab.length; i++) {
        mList.add(tab[i]);
    }
}

public class MyOutPagerAdapter extends PagerAdapter{
    @Override
    public CharSequence getPageTitle(int position) {
        return mList.get(position);
    }

    @Override
    public int getCount() {
        return mList.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        TextView mText = new TextView(MainActivity.this);
        mText.setText(mList.get(position));
        mText.setGravity(Gravity.CENTER);
        mText.setTextSize(28);
        container.addView(mText);
        return mText;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
      container.removeView((View) object);
    }
}

}
`

拿到相应的控件之后,写一个正常的ViewPager的PagerAdapter类,然后setAdapter.要想实现上图效果,还需在PagerAdapter中多覆写一个getPageTitle(),返回标签文字。最后需要将TabLayout和ViewPager建立连接,还有就是可以设置TabLayout的TabMode.这里用的是SCROLLERABLE。其实他还有另一个TabMode,MODEFIXED,那么它们到底有什么区别呢???####

如果你用的是FIXED的话,那么当你的getTabTitle返回数字比较小的话,他会自动调整大小

TabLayout_第4张图片
FIXED

如果你用的是SCROLLERABLE,那么它会缩在一块了。


TabLayout_第5张图片

补充##

TabLayout还有一些常用的属性:

        app:tabIndicatorColor="#F00" 标签下划线的颜色
        app:tabSelectedTextColor="#f00"  标签文字选中的颜色
        app:tabTextColor="#797070"    标签正常的颜色

注意##

使用TabLayout绑定ViewPager之前一定要先调用ViewPager的setAdapter()

总结##

TabMode.SCROLLERABLE适用于Tab数量多的场景,TabMode.FIXED适用于Tab数量少的场景。 最后祝大家生活愉快!
最后祝大家生活愉快!

你可能感兴趣的:(TabLayout)