TabLayout

来源：互联网发布：机器人焊接软件编辑：程序博客网时间：2024/06/08 12:26

Tabs选项卡，效果类似网易新闻客户端的Tab。其实实现Tabs选项卡的效果有很多中方法，Github上也有很多好用的开源控件，只是这次谷歌把它官方化了，使得开发者无需引用第三方库，就能方便的使用。

ps以下效果是TabLayout结合ViewPager、Fragment实现的！

效果图：

这里写图片描述

先来看一些TabLayout常用的属性：
- app:tabSelectedTextColor：Tab被选中字体的颜色
- app:tabTextColor：Tab未被选中字体的颜色
- app:tabIndicatorColor：Tab指示器下标的颜色

TabLayout常用的方法:

addTab(TabLayout.Tab tab, int position, boolean setSelected) 增加选项卡到 layout 中
addTab(TabLayout.Tab tab, boolean setSelected) 同上
addTab(TabLayout.Tab tab) 同上
getTabAt(int index) 得到选项卡
getTabCount() 得到选项卡的总个数
getTabGravity() 得到 tab 的 Gravity
getTabMode() 得到 tab 的模式
getTabTextColors() 得到 tab 中文本的颜色
newTab() 新建个 tab
removeAllTabs() 移除所有的 tab
removeTab(TabLayout.Tab tab) 移除指定的 tab
removeTabAt(int position) 移除指定位置的 tab
setOnTabSelectedListener(TabLayout.OnTabSelectedListener onTabSelectedListener) 为每个 tab 增加选择监听器
setScrollPosition(int position, float positionOffset, boolean updateSelectedText) 设置滚动位置
setTabGravity(int gravity) 设置 Gravity
setTabMode(int mode) 设置 Mode,有两种值：TabLayout.MODE_SCROLLABLE和TabLayout.MODE_FIXED分别表示当tab的内容超过屏幕宽度是否支持横向水平滑动，第一种支持滑动，第二种不支持，默认不支持水平滑动。
setTabTextColors(ColorStateList textColor) 设置 tab 中文本的颜色
setTabTextColors(int normalColor, int selectedColor) 设置 tab 中文本的颜色默认选中
setTabsFromPagerAdapter(PagerAdapter adapter) 设置 PagerAdapter
setupWithViewPager(ViewPager viewPager) 和 ViewPager 联动

一般TabLayout都是和ViewPager共同使用才发挥它的优势，现在我们通过代码来看看以上效果的使用。

一、首先：
引入依赖包：

    compile 'com.android.support:design:22.2.0'1

二、布局文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto">    <!--TabLayout-->    <android.support.design.widget.TabLayout        android:id="@+id/tab_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:tabSelectedTextColor="#FF6AFF8D"        app:tabTextColor="#FF2A101F"        app:tabIndicatorColor="#FFFF2F3C"        />    <!--viewPager-->    <android.support.v4.view.ViewPager        android:id="@+id/pager"        android:layout_width="match_parent"        android:layout_height="match_parent">        <FrameLayout            android:id="@+id/content"            android:layout_width="match_parent"            android:layout_height="match_parent">        </FrameLayout>    </android.support.v4.view.ViewPager></LinearLayout>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

可以看到，我们是TabLayout结合ViewPager使用的，布局很简单！

三、Fragment 这里我们用到3个Fragment，但因为每个Fragment的效果都相同，就贴出一个

public class TabFragment1 extends Fragment{    private TextView mTextView;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view=inflater.inflate(R.layout.fragment,container,false);        mTextView= (TextView) view.findViewById(R.id.f_tv);        mTextView.setText("This is Tab0");        return view;    }}1
2
3
4
5
6
7
8
9
10
11

布局文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center">    <TextView        android:id="@+id/f_tv"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="今天是好日子"        android:textColor="#FFFF131A"/></LinearLayout>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

依然很简单。

四、Activity
关键就是我们Activity中的逻辑处理了，其实代码也很简单。这里注释非常清楚：

public class OtherActivity extends AppCompatActivity{    /**     * TabLayout控件     */    private TabLayout mTabLayout;    /**     * ViewPager控件     */    private ViewPager viewPager;    /**     * 标题List     */    private List<String> titleList;    /**     * 显示的3个Fragment     */    private TabFragment1 fragment1;    private TabFragment2 fragment2;    private TabFragment3 fragment3;    /**     * 自定义ViewPager适配器     */    private TabFragmentAdapter mAdapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_other);        //初始化两个控件        mTabLayout= (TabLayout) findViewById(R.id.tab_layout);        viewPager= (ViewPager) findViewById(R.id.pager);        //初始化标题栏数据        titleList=new ArrayList<>();        titleList.add("Tab 1");        titleList.add("Tab 2");        titleList.add("Tab 3");        //设置tab模式，当前为系统默认模式        mTabLayout.setTabMode(TabLayout.MODE_FIXED);        //绑定tab标题数据        mTabLayout.addTab(mTabLayout.newTab().setText(titleList.get(0)));        mTabLayout.addTab(mTabLayout.newTab().setText(titleList.get(1)));        mTabLayout.addTab(mTabLayout.newTab().setText(titleList.get(2)));        //实例化适配器        mAdapter=new TabFragmentAdapter(getSupportFragmentManager(),mTabLayout.getTabCount(),titleList);        //viewPager绑定适配器        viewPager.setAdapter(mAdapter);        //TabLayout绑定ViewPager滑动        mTabLayout.setupWithViewPager(viewPager);        //TabLayout绑定标题栏点击适配器        mTabLayout.setTabsFromPagerAdapter(mAdapter);    }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

为了不让代码显得太长，这里分开展示。上面就是初始化控件和数据，剩下一个Adapter的代码：

/**     * 自定义ViewPager适配器     */    public class TabFragmentAdapter extends FragmentPagerAdapter{        private int tabNum;        private FragmentManager manager;        private List<String> titles;        //构造函数，Fragment管理工具manger，标题栏个数nNumTab，标题栏文本List        public TabFragmentAdapter(FragmentManager manager ,int nNumTab,List<String> list) {            super(manager);            this.tabNum=nNumTab;            this.manager=manager;            this.titles= list;        }        @Override        public Fragment getItem(int position) {            //隐藏所有fragment            hideFragments(manager.beginTransaction());            switch (position){                case 0:                    if(fragment1==null){                        fragment1=new TabFragment1();                    }                    return fragment1;                case 1:                    if(fragment2==null){                        fragment2=new TabFragment2();                    }                    return fragment2;                case 2:                    if(fragment3==null){                        fragment3=new TabFragment3();                    }                    return fragment3;            }            return null;        }        @Override        public int getCount() {            return tabNum;        }        /**         * 设置标题栏文本，必须复写         * @param position         * @return         */        @Override        public CharSequence getPageTitle(int position) {            return titles.get(position);        }    }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

这里我们调用了一个hideFragment方法，hideFragment方法的作用是增强我们Fragment的复用。每次用replace方法添加Fragment的做法这里不推荐使用，我们一般都使用add方法添加Fragment

 /**     * 隐藏所有fragment，提高复用率     * @param transaction     */    public void hideFragments(FragmentTransaction transaction) {        if(fragment1!=null){            transaction.hide(fragment1);        }        if(fragment2!=null){            transaction.hide(fragment1);        }        if(fragment3!=null){            transaction.hide(fragment1);        }    }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Ok，其实将上面3段代码放到一个Activity中就可以了。。。

阅读全文

0 0