Integrated application of Fragment + ViewPager + TabLayout

App navigation bar case

Show results

This is the effect of using a TabLayout + ViewPager slider switch and clicks the tab switching. TabLayout supports horizontal scrolling multi-label set, the indicator may also be supported, and support the linkage ViewPager.

Dependent jar package

AndroidX users need to import the following dependencies, if you do not deserve compileSdkVersion version, please try again change the version 28

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

There was a normal error, because the version does not match

android {
    compileSdkVersion 28//在这里更改为28
    buildToolsVersion "29.0.0"
    defaultConfig {
        applicationId "com.example.highday7_2_27"
        minSdkVersion 24
        targetSdkVersion 28//在这里也更改为28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

Create a layout

Creating the xml file MainActivity

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_id"
        android:layout_width="match_parent"
        android:layout_gravity="center"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:tabIndicatorColor="#2196F3"
        app:tabIndicatorHeight="5dp"
        app:tabMode="fixed"
        app:tabPadding="5dp"
        app:tabSelectedTextColor="#2196F3"
        app:tabTextColor="#000000">

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


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_id"
        android:layout_weight="10"
        android:layout_width="match_parent"
        android:layout_height="0dp">

    </androidx.viewpager.widget.ViewPager>

</LinearLayout>

About layout files, of which there are several common attributes worth a lot of TabLayout, as follows:

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

And then create another Fragment need, eliminating the need for Fragment fragment here before and can refer to the Advanced Fragment

java code required adapter and

Java code: MainActivity.java

public class MainActivity extends AppCompatActivity {
    private TabLayout tabId;
    private ViewPager vpId;
    private List<Fragment> lists = new ArrayList<>();//碎片集合
    private List<String> titles = new ArrayList<>();//标题内容
    private MyVpAdapter myVpAdapter;//适配器


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabId = (TabLayout) findViewById(R.id.tab_id);
        vpId = (ViewPager) findViewById(R.id.vp_id);

        initDatas();

        MyVpAdapter myVpAdapter = new MyVpAdapter(getSupportFragmentManager(),lists,titles);
        vpId.setAdapter(myVpAdapter);

        //把viewPager和tabLayout绑定在一起,正确显示效果
        tabId.setupWithViewPager(vpId);

    }

    private void initDatas() {
        //添加Fragment到集合中
        lists.add(new OneFragment());
        lists.add(new ThreeFragment());
        lists.add(new ThreeFragment());
        lists.add(new FourFragment());

        //添加标题
        titles.add("内容一");
        titles.add("内容二");
        titles.add("内容三");
        titles.add("内容四");

    }
}

adapter

public class MyVpAdapter extends FragmentStatePagerAdapter {

    private List<Fragment> lists;//碎片集合
    private List<String> titles;//标题集合

    public MyVpAdapter(@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();
    }

    //返回与Fragmen关联的标题
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}