AndroidでのナビゲーションバーのタブナビゲーションとTabLayoutの使用法

ツールバーシリーズの記事のナビゲーション

ナビゲーションバーのツールバーはカスタマイズできるので、ナビゲーションバーをタブバーに変えてタブページの効果を実現できますか？

1.ラベルの依存関係

ラベルページを追加するには、最初にラベルを作成するための3部構成のライブラリが必要です。依存関係は次のとおりです。

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

これは私たちのデザインライブラリだと言う人もいるので、紹介を繰り返す必要はありません。これは、実際に使用されるデザインライブラリのTabLayoutラベルレイアウトです。

2.TabLayoutのいくつかの主な属性

tabBackground：ラベルの背景を指定します。
tabIndicatorColor：下線の色を指定します。
tabIIndicatorHeight：下線の高さを指定します。
tabTextColor：ラベルテキストの色を指定します。
tabTextAppearance：ラベルテキストのスタイルを指定します。
tabSelectedTextColor：選択したテキストの色を指定します。

3.TabLayoutのいくつかの主要なJavaメソッド

newTab：新しいタブを作成します。
addTab：ラベルを追加します。
getTabAt：指定された位置のラベルを取得します。
setOnTabSelectedListener：ラベルの選択されたリスナーを設定します。リスナーは、OnTabSelectedListenerインターフェースの3つのメソッドを実装する必要があります。

onTabSelected：タブが選択されたときにトリガーされます。
onTabUnselected：ラベルが選択解除されたときにトリガーされます。
onTabReselected：タブが再選択されたときにトリガーされます。

4.コード例

activity_tab_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/tl_head"
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <!-- 注意TabLayout节点需要使用完整路径 -->
            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tab_title"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                app:tabIndicatorColor="#FF0000"
                app:tabIndicatorHeight="2dp"
                app:tabSelectedTextColor="#FF0000"
                app:tabTextColor="#666666" />
        </RelativeLayout>
    </androidx.appcompat.widget.Toolbar>

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

MainActivity.java

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {

    private TabLayout tab_title; // 定义一个标签布局对象
    private ArrayList<String> mTitleArray = new ArrayList<String>(); // 标题文字队列
    private ViewPager viewpager;
    private List<Fragment> fragmentList;
    private FragmentPagerAdapter viewPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        // 从布局文件中获取名叫tl_head的工具栏
        Toolbar tl_head = findViewById(R.id.tl_head);
        viewpager = findViewById(R.id.viewpager);
        // 使用tl_head替换系统自带的ActionBar
        setSupportActionBar(tl_head);
        mTitleArray.add("商品");
        mTitleArray.add("详情");
        initTabLayout(); // 初始化标签布局
        initTabViewPager(); // 初始化标签翻页
    }



    // 初始化标签布局
    private void initTabLayout() {
        // 从布局文件中获取名叫tab_title的标签布局
        tab_title = findViewById(R.id.tab_title);
        // 给tab_title添加一个指定文字的标签
        tab_title.addTab(tab_title.newTab().setText(mTitleArray.get(0)));
        // 给tab_title添加一个指定文字的标签
        tab_title.addTab(tab_title.newTab().setText(mTitleArray.get(1)));
        // 给tab_title添加标签选中监听器
        tab_title.addOnTabSelectedListener(this);
        tab_title.setupWithViewPager(viewpager);
    }

    // 初始化标签翻页
    private void initTabViewPager() {
        fragmentList = new ArrayList<>();
        fragmentList.add(new OneFragment());
        fragmentList.add(new MineFragment());
        viewPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragmentList.get(position);
            }

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

            @Override
            public CharSequence getPageTitle(int position) {
                return mTitleArray.get(position);
            }
        };
        viewpager.setAdapter(viewPagerAdapter);
    }

    // 在标签被重复选中时触发
    public void onTabReselected(TabLayout.Tab tab) {

    }

    // 在标签选中时触发
    public void onTabSelected(TabLayout.Tab tab) {

    }

    // 在标签取消选中时触发
    public void onTabUnselected(TabLayout.Tab tab) {

    }
}

ここで使用する環境はandroidx環境であるため、ここでの設計の依存関係は次のようになります。

implementation 'com.google.android.material:material:1.0.0-rc01'

同時に、ツールバーを使用する前に、デフォルトのアクションバーを削除する必要があります

ここではフラグメントのコードを省略しており、通常の使用法と変わりません。

FragmentPagerAdapterで書き直されたgetPageTitleメソッドに注意を払う必要があります。

AndroidでのナビゲーションバーのタブナビゲーションとTabLayoutの使用法

1.ラベルの依存関係

2.TabLayoutのいくつかの主な属性

3.TabLayoutのいくつかの主要なJavaメソッド

4.コード例

おすすめ