Android——TabLayout简单使用

最新推荐文章于 2024-07-23 11:29:08 发布

404-not-found

最新推荐文章于 2024-07-23 11:29:08 发布

阅读量425

点赞数 1

implementation 'com.android.support:design:26.1.0'

一、首先实现布局文件

<?xml version="1.0" encoding="utf-8"?>
<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="@color/white_FFFFFF"
        app:tabIndicatorColor="@color/select_color_000000"
        app:tabIndicatorHeight="@dimen/indicator_height_2dp"
        app:tabMode="fixed"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabSelectedTextColor="@color/select_color_000000"
        app:tabTextColor="@color/color_999999">
 
    </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>

tabBackground : 标签栏的颜色

tabIndicatorColor : 指示条的颜色

tabIndicatorHeight : 指示条的高度

tabMode : 选项卡的行为模式两种模式。一种是 scrollable 适用于当标签栏的数量多的时候，标签栏可以滑动，经个人测试，一般是标签栏5个以上适用于这个模式第二种是 fixed 默认的设置，标签栏是固定的，不能滑动，很多的时候会发生挤压，当标签栏的个数小于等于5个的时候选择这个模式就很不错。

tabSelectedTextColor : tab 被选中的时候的字体颜色

tabTextColor : tab 未被选中的时候的字体的颜色

tabTextAppearance : 设置字体的外观。比如说设置字体的大小

<style name="TabLayoutTextStyle">
        <item name="android:textSize">@dimen/text_16_sp</item>
        <item name="android:textAllCaps">false</item>
    </style>

二、下面开始通过代码实现

    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private List<String> titles = new ArrayList<String>();
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tablayout);
        intData();
        initView();
        initEvent();
    }
 
    private void intData() {
        titles.add("电影");
        titles.add("电视剧");
        titles.add("综艺");
    }
 
    private void initView() {
        mTabLayout = (TabLayout) findViewById(R.id.tablayout);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
    }
 
    private void initEvent() {
        for (int i = 0; i < titles.size(); i++) {
            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));
        }
        List<Fragment> fragments = new ArrayList<Fragment>();
        for (int i = 0; i < titles.size(); i++) {
            fragments.add(new MyFragment());
        }
        MyFragmentPager fragmentPager = new MyFragmentPager(getSupportFragmentManager(), fragments, titles);
        // 给ViewPager 设置适配器
        mViewPager.setAdapter(fragmentPager);
        //  将TabLayout 和 ViewPager 关联起来
        mTabLayout.setupWithViewPager(mViewPager);
    }

因为要使用ViewPager，首先要自定义一个Fragment，我自定义了一个Fragment ,代码如下：


public class MyFragment extends Fragment {
    View view;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_tablayout, container, false);
        return view;
    }
}

其中fragment_tablayout.xml 里面只是有一个TextView。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="总有一个人让你拼了命的努力变好！"
        android:textSize="20dp" />
</LinearLayout>

然后我们在主界面也自定义定义了一个MyFragmentPager,用于配合ViewPager 管理Fragment,代码如下：

public class MyFragmentPager extends FragmentStatePagerAdapter {
 
    List<Fragment> mFragments;
    List<String> mTitles;
 
    public MyFragmentPager(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
        super(fm);
        mFragments = fragments;
        mTitles = titles;
    }
 
    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }
 
    @Override
    public int getCount() {
        return mFragments.size();
    }
 
    /**
     * 设置标签栏的标题
     *
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles.get(position);
    }
}

这个特别要注意一下getPagerTitle 方法,这里返回position 位置的PagerTab 的标题。