Kevin Learn Android：TabLayout

19.jpg

前言

官网：TabLayout 提供一个水平方向的布局来显示 Tabs，继承的是HorizontalScrollView 这个类。

1625020955(1).png

引入 material 包：

implementation 'com.google.android.material:material:1.2.1'

基础

1. 创建 Tabs (代码中)
   效果图

   
   1625021816(1).png

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

Activity 中添加 Tab：

public class MainActivity extends BaseActivity {
    @BindView(R.id.tab_layout)
    TabLayout mTabLayout;

    @Override
    public int getLayoutId() {
        return R.layout.activity_main;
    }

    @Override
    public void initView() {
        mTabLayout.addTab(mTabLayout.newTab().setText("全部"));
        mTabLayout.addTab(mTabLayout.newTab().setText("完赛"));
        mTabLayout.addTab(mTabLayout.newTab().setText("专家"));
        mTabLayout.addTab(mTabLayout.newTab().setText("装备"));
        mTabLayout.addTab(mTabLayout.newTab().setText("NBA"));
    }
}

2，创建 Tabs （xml 布局文件中）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="全部"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="完赛"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="专家"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="装备"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="NBA"/>

    </com.google.android.material.tabs.TabLayout>

</LinearLayout>

3. 给 Tab 设置图标
   布局

<com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@mipmap/ic_favorite_end"
            android:text="完赛"/>

or 代码

mTabLayout.addTab(mTabLayout.newTab().setText("完赛").setIcon(R.mipmap.ic_favorite_end));

4. Tab 选中监听

mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

进阶

1. 属性

属性	含义
tabBackground	设置Tabs的背景
tabGravity	为Tabs设置Gravity
tabIndicatorColor	设置指示器的颜色
tabIndicatorHeight	设置指示器的高度，规范建议是2dp
tabMaxWidth	设置 Tab 的最大宽度
tabMinWidth	设置 Tab 的最小宽度
tabMode	设置Tabs的显示模式
tabSelectedTextColor	设置Tab选中后，文字显示的颜色
tabTextColor	设置Tab未选中，文字显示的颜色

2. 可滚动的 Tab
   效果

   
   02.gif

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        app:tabIndicatorColor="@color/blue_color"
        app:tabIndicatorHeight="2dp"
        app:tabSelectedTextColor="@color/blue_color">
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="全部"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="完赛"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="专家"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="装备"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="NBA"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="西甲"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="德甲"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="意甲"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="欧冠"/>

    </com.google.android.material.tabs.TabLayout>

</LinearLayout>

TabLayout + ViewPager + Fragment

TabLayout .jpg

1. 布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:fillViewport="false"
        app:tabMode="fixed"
        app:tabIndicatorColor="@color/purple_500"
        app:tabIndicatorHeight="2dp"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabIndicatorFullWidth="false"
        app:tabTextColor="@color/text_E3"
        app:tabSelectedTextColor="@color/text_color"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

    <style name="TabLayoutTextStyle">
        <item name="android:textSize">18sp</item>
        <item name="android:textStyle">bold</item>
    </style>

2. MainActivity.java

public class MainActivity extends BaseActivity {
    @BindView(R.id.tab_layout)
    TabLayout mTabLayout;

    @BindView(R.id.viewPager)
    ViewPager mViewPager;

    private List<String> mTitles = new ArrayList<>();

    private List<Fragment> mFragments = new ArrayList<>();

    private HomeFragment mHomeFragment = HomeFragmentFactory.getInstance().getHomeFragment();
    private OrderFragment mOrderFragment = HomeFragmentFactory.getInstance().getOrderFragment();
    private NoticeFragment mNoticeFragment = HomeFragmentFactory.getInstance().getNoticeFragment();
    private MineFragment mMineFragment = HomeFragmentFactory.getInstance().getMineFragment();

    private HomeAdapter mAdapter;

    @Override
    public int getLayoutId() {
        return R.layout.activity_main;
    }

    @Override
    public void initView() {
        mTitles.add("首页");
        mTitles.add("工单");
        mTitles.add("通知");
        mTitles.add("我的");

        mFragments.add(mHomeFragment);
        mFragments.add(mOrderFragment);
        mFragments.add(mNoticeFragment);
        mFragments.add(mMineFragment);

        mAdapter = new HomeAdapter(getSupportFragmentManager(),mTitles,mFragments);

        mViewPager.setAdapter(mAdapter);

        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.setTabsFromPagerAdapter(mAdapter);
    }
}

3. BaseFragment.java

public abstract class BaseFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(layoutId(),container,false);
        ButterKnife.bind(this,view);
        initData();
        initView(view);
        return view;

    }

    /**
     * 初始化布局
     * @return 布局id
     */
    protected abstract int layoutId();

    /**
     * 初始化控件
     * @param view 布局view
     */
    protected abstract void initView(View view);

    /**
     * 初始化，绑定数据
     */
    protected abstract void initData();

    /**
     * 不带参数的跳转
     *
     * @param clazz 跳转到的目标类
     */
    protected void readyGo(final Class<?> clazz) {
        Intent intent = new Intent(getActivity(), clazz);
        startActivity(intent);
    }

    /**
     * 带参数的跳转
     *
     * @param clazz  跳转到的目标类
     * @param bundle 参数
     */
    protected void readyGo(final Class<?> clazz, final Bundle bundle) {
        Intent intent = new Intent(getActivity(), clazz);
        if (bundle != null) {
            intent.putExtras(bundle);
        }
        startActivity(intent);
    }

    /**
     * 跳转且返回结果
     *
     * @param clazz       跳转到的目标类
     * @param requestCode 请求码
     */
    protected void readyGoForResult(final Class<?> clazz, final int requestCode) {
        Intent intent = new Intent(getActivity(), clazz);
        startActivityForResult(intent, requestCode);
    }

    /**
     * 带参数跳转且返回结果
     *
     * @param clazz       跳转到的目标类
     * @param requestCode 请求码
     * @param bundle      参数
     */
    protected void readyGoForResult(final Class<?> clazz, final int requestCode, final Bundle bundle) {
        Intent intent = new Intent(getActivity(), clazz);
        if (bundle != null) {
            intent.putExtras(bundle);
        }
        startActivityForResult(intent, requestCode);
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
    }
}

4. HomeFragment.java

public class HomeFragment extends BaseFragment {

    @Override
    protected int layoutId() {
        return R.layout.fragment_home;
    }

    @Override
    protected void initView(View view) {

    }

    @Override
    protected void initData() {

    }
}

5. HomeFragmentFactory.java

public class HomeFragmentFactory {
    static HomeFragmentFactory mInstance;
    private HomeFragment mHomeFragment;
    private OrderFragment mOrderFragment;
    private NoticeFragment mNoticeFragment;
    private MineFragment mMineFragment;


    public HomeFragmentFactory() {
    }

    public static HomeFragmentFactory getInstance() {
        if (mInstance == null) {
            synchronized (HomeFragmentFactory.class) {
                if (mInstance == null) {
                    mInstance = new HomeFragmentFactory();
                }
            }
        }
        return mInstance;
    }

    /**
     * 首页
     *
     * @return
     */
    public HomeFragment getHomeFragment() {
        if (mHomeFragment == null) {
            synchronized (HomeFragment.class) {
                if (mHomeFragment == null) {
                    mHomeFragment = new HomeFragment();
                }
            }
        }
        return mHomeFragment;
    }

    /**
     * 工单
     *
     * @return
     */
    public OrderFragment getOrderFragment() {
        if (mOrderFragment == null) {
            synchronized (OrderFragment.class) {
                if (mOrderFragment == null) {
                    mOrderFragment = new OrderFragment();
                }
            }
        }
        return mOrderFragment;
    }

    /**
     * 通知
     *
     * @return
     */
    public NoticeFragment getNoticeFragment() {
        if (mNoticeFragment == null) {
            synchronized (NoticeFragment.class) {
                if (mNoticeFragment == null) {
                    mNoticeFragment = new NoticeFragment();
                }
            }
        }
        return mNoticeFragment;
    }

    /**
     * 我的
     *
     * @return
     */
    public MineFragment getMineFragment() {
        if (mMineFragment == null) {
            synchronized (MineFragment.class) {
                if (mMineFragment == null) {
                    mMineFragment = new MineFragment();
                }
            }
        }
        return mMineFragment;
    }

}

6. HomeAdapter.java

public class HomeAdapter extends FragmentPagerAdapter {
    private List<String> titleList;
    private List<Fragment> fragmentList;
    public HomeAdapter(@NonNull FragmentManager fm, List<String> titleList,
                       List<Fragment> fragmentList) {
        super(fm);
        this.titleList = titleList;
        this.fragmentList = fragmentList;
    }

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

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

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

修改选中字体大小

TabLayout 修改选中字体大小