Day07 Fragment+ViewPage+TabLayout

TabLayout介绍

TabLayout 是一个横向标签显示的布局，效果就是现在很多新闻客户端的那种顶部标签展示效果，并支持指示器、 ViewPager 联动

注意事项

1、Android最新版本 也就是AndoirdX是引用不到TabLayout的，必须加上

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

这个依赖，同时要把build.gradle文件里

android {
    compileSdkVersion 28
    buildToolsVersion "29.0.2"


    defaultConfig {
        applicationId "com.example.a2_27_tablayout"
        minSdkVersion 24
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

    }

所对应的SDK版本改成28，也就是如上代码28的位置，不然不会出来。

代码展示（案列）

需要三个Fragment。
acticity的代码

public class MainActivity extends AppCompatActivity {
    private TabLayout tab;
    private ViewPager vp;

    private List<Fragment> list = new ArrayList<>();
    private List<String > titles = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化控件
        tab = (TabLayout) findViewById(R.id.tab);
        vp = (ViewPager) findViewById(R.id.vp);

        //添加数据
        titles.add("标题1");
        titles.add("标题2");
        titles.add("标题3");

        list.add(new FragmentOne());
        list.add(new FragmentTwo());
        list.add(new FragmentThree());

        //创建设配器
        MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager(),list,titles);
        //设置适配器
        vp.setAdapter(myAdapter);
        //绑定显示效果
        tab.setupWithViewPager(vp);
    }
}

xml文件的布局代码

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/tab"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorPrimary"
        android:layout_weight="1">
    </com.google.android.material.tabs.TabLayout>
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="9"></androidx.viewpager.widget.ViewPager>

</LinearLayout>

适配器的代码

public class MyAdapter extends FragmentPagerAdapter {
    private List<Fragment> lists;
    private List<String> titles;

    public MyAdapter(@NonNull FragmentManager fm, List<Fragment> lists, List<String> titles) {
        super(fm);
        this.lists = lists;
        this.titles = titles;
    }

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

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

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        //把标题跟fragment的数据绑定起来
        return titles.get(position);
    }
}

效果展示

TabLayout的几个常用属性值

app:tabBackground 标签布局的背景色
app:tabIndicatorColor 指示器的颜色
app:tabIndicatorHeight 指示器的高度（如果不需要指示器可以设置为0dp）
app:tabMode 显示模式：默认 fixed（固定），scrollable（可横向滚动）
app:tabPadding 标签内边距
app:tabSelectedTextColor 标签选中的文本颜色
app:tabTextAppearance 标签文本样式
app:tabTextColor 标签未选中的文本颜色