一步步走进Android MaterialDesign 之 TabLayout

我们继续对android.support.design.widget包下的控件进行一个粗略的认识。今天说的是TabLayout

android从发布初到现在,tab的实现方式经历过N多个阶段,先是TabHost,然后又有RadioButton+ActivityGroup,再后者有FragmentTabHost+ActionBar、ViewPager+ActionBar/RadioButton等等,现在又有了一个全新的方式—-TabLayout+ViewPager

看效果图
这里写图片描述

还是那句话,这玩意在一定程度上方便了开发,但与此同时,定制起来就显得没有那么方便了

继续上代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:background="@android:color/holo_red_dark"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

这边没什么好说的,就一个普通控件,接下来看怎么用

    ArrayList<ContentFragment> fragments=null;
    ArrayList<String> titles=null;
    ArrayList<View> views=null;

定义了3个list,目的分别是
1.viewPager中的fragment
2.tabLayout标题
3.tabLayout每一个item的自定义视图

tabs= (TabLayout) findViewById(R.id.tabs);
tabs.addTab(tabs.newTab().setCustomView(views.get(0)));
tabs.addTab(tabs.newTab().setCustomView(views.get(1)));
tabs.addTab(tabs.newTab().setCustomView(views.get(2)));
tabs.setupWithViewPager(viewpager);
tabs.setTabsFromPagerAdapter(adapter);

就把每一个item塞进去就行了,然后setupWithViewPager设置对应的viewPager,setTabsFromPagerAdapter设置viewPager的adapter,这边要注意,viewPager不要忘记设置adapter

注意一下adapter

public class MyViewPagerAdapter extends FragmentPagerAdapter {

        public MyViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

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

        @Override
        public CharSequence getPageTitle(int position) {
            return titles.get(position);
        }
    }

这边getPageTitle不要漏掉,不然标题是空的,这边跟viewPager本身的PagerTabStrip异曲同工

写在最后,在tab的使用上,如果定制比较深的话,我个人还是建议用ViewPager+RadioButton或者用第三方开源的一些框架比如PagerSlidingTabStrip

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页