Fragment+ViewPager+TabLayout的綜合應用

App導航欄案例

效果展示

這是採用 TabLayout + ViewPager 滑動切換和點擊標籤切換的一個效果。TabLayout 支持橫向滾動多標籤設置，還可以支持指示器，支持與 ViewPager 進行聯動。

依賴jar包

AndroidX用戶需要先導入下面的依賴，如果您的compileSdkVersion版本不配，請先更改版本爲28後再嘗試

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

出現了報錯了很正常，因爲版本不匹配

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'
        }
    }
}

創建佈局

MainActivity的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"
    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>

關於佈局文件，其中還有很多TabLayout 的幾個常用屬性值，如下：

app:tabBackground 標籤佈局的背景色
app:tabIndicatorColor 指示器的顏色
app:tabIndicatorHeight 指示器的高度（如果不需要指示器可以設置爲0dp）
app:tabMode 顯示模式：默認 fixed（固定），scrollable（可橫向滾動）
app:tabPadding 標籤內邊距
app:tabSelectedTextColor 標籤選中的文本顏色
app:tabTextAppearance 標籤文本樣式
app:tabTextColor 標籤未選中的文本顏色

再創建其它所需要的Fragment，這裏省去可以參考之前的Fragment碎片和Fragment高級

java代碼以及所需適配器

Java代碼：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("內容四");

    }
}

適配器

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);
    }
}