記事ディレクトリ
簡単な実装
依存関係を追加する
build.gradle（Module：app）ファイルに依存関係を追加します
implementation 'com.android.support:design:28.0.0'
レイアウトファイルを定義する
非常にシンプルなTabLayoutとViewPager、
注：TabLayoutに付属のTabLayoutを選択しないでください
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<androidx.viewpager.widget.ViewPager
android:id="@+id/pager"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"/>
<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.TabLayout>
</LinearLayout>
フラグメントを作成する
2つを直接作成し、XMLレイアウトファイルに接続するだけです
public class FragmentOne extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.frag_1, container, false);
return view;
}
}
FragmentPagerAdapterをインスタンス化します
ここでは、FragmentPagerAdapterを直接インスタンス化しました。また、FragmentPagerAdapterを継承するクラスを記述して、独自のアダプターを記述することもできます。
List<Fragment> fragments = new ArrayList<>();
fragments.add(new FragmentOne());
fragments.add(new FragmentTwo());
FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@NonNull
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
};
ViewPagerを実装する
ここでは、FragmentPagerAdapterをインスタンス化したため、ほぼViewPagerに設定されています。
この時点で、ページを左右にスライドする機能を実現しました。
viewPager.setAdapter(adapter);
TabLayoutを関連付け、ラベルを設定します
また、非常にシンプルで、1行のコードでViewPagerをTabLayoutに関連付けることができます。
tabLayout.setupWithViewPager(viewPager);
ViewPagerとTabLayoutが関連付けられた後、付箋がないため、ここでラベルを設定する必要があり
ます。ラベルが多数ある場合は、forループと配列に追加することを検討できますが、境界を越えないようにTabAtに注意する必要があります。エラーを報告する
tabLayout.getTabAt(0).setText("第一页");
tabLayout.getTabAt(1).setText("第二页");
これまでのところ、左右にスライドでき、ラベルが付いたシンプルな（醜い）ものが実現しています！
TabLayoutの美化
絶妙なプログラマーとして、物事を悪く見せるためにどのように耐えることができますか？ディスクしてください！
ローリングノート
app：tabMode =“ fixed”はデフォルトではスクロールできません（スクロールする必要がない場合は、書き込むことなく省略してください）
app：tabMode =“ scrollable”はスクロール可能なXMLレイアウトファイルで設定でき
ます
app:tabMode="scrollable"
Javaバックグラウンドでの設定
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
小さなアイコンを追加
これはラベルの設定と同じですが、.setText（）をsetIcon（）に置き換えるだけです。
tabLayout.getTabAt(0).setIcon(R.mipmap.baoma);
tabLayout.getTabAt(1).setIcon(R.mipmap.benchi);
小さなアイコンとラベルの相対位置
tabInlineLabe：小さなアイコンと付箋が同じ行にあるかどうか
デフォルトの条件（falseに
設定）はtrueに設定されています
XMLレイアウト設定
app:tabInlineLabel="true"
Javaの背景設定
tabLayout.setInlineLabel(true);
TabLayoutのフォントの美化
tabTextColor：
フォントのデフォルトの色tabSelectedTextColor：フォントが選択されたときの色の
XMLレイアウト設定
app:tabTextColor="@color/colorAccent"
app:tabSelectedTextColor="@color/colorPrimary"
Javaの背景設定
//第一个是默认颜色，第二个是选中时的颜色
tabLayout.setTabTextColors(Color.RED,Color.YELLOW);
TabLayoutの下線美化
tabIndicatorHeight：下線の幅
tabIndicatorFullWidth：下線がタブの幅でいっぱいかどうか（ここでfalseに設定すると、下線の長さはメモの長さと同じになります）
tabIndicatorColor：下線の色
tabIndicatorGravity：下線のXMLレイアウト設定の位置
app:tabIndicatorHeight="10dp"
app:tabIndicatorFullWidth="false"
app:tabIndicatorColor="@color/colorPrimaryDark"
app:tabIndicatorGravity="top"
Javaの背景設定
tabLayout.setSelectedTabIndicatorHeight(10);
tabLayout.setTabIndicatorFullWidth(false);
tabLayout.setSelectedTabIndicatorColor(Color.GREEN);
tabLayout.setSelectedTabIndicatorGravity(TabLayout.GRAVITY_CENTER);