フラグメント+ ViewPager + TabLayoutの統合アプリケーション

アプリのナビゲーションバーの場合

結果は

これは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'
        }
    }
}

レイアウトを作成します。

xmlファイルの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>

次のようにいくつかの一般的には、TabLayoutの価値がAロットの属性がありますそのレイアウトファイル、について：

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

そして、ここで前にフラグメントフラグメントの必要性を排除し、別のフラグメントの必要性を作成して、高度なフラグメントを参照することができます

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