AndroidのTabLayoutを使用してタブバーを作成する

記事のナビゲーションを作成するタブバー

Androidのレイアウトでタブバーを作成する

AndroidのTabLayoutを使用してタブバーを作成する

コードを保存するかどうかはわかりませんが、それは確かに別の作成方法です。ここでは、参照用に完全なコードを投稿します。何かおかしいことがあれば、訂正していただければ幸いです。上記のページでスライドできない種類が必要な場合は、ネイティブのViewPagerのようにスライドできないViewPagerを使用できます。

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.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_title"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabIndicatorColor="#FF0000"
        app:tabIndicatorHeight="2dp"
        app:tabSelectedTextColor="#FF0000"
        app:tabTextColor="#666666"
        app:tabPaddingStart="0dp"
        app:tabPaddingEnd="0dp"/>
</LinearLayout>

item_bottom_icon.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textSize="12sp"
    android:id="@+id/tv1"
    android:text="我的"
    android:gravity="center_horizontal"
    android:drawablePadding="5dp"
    android:paddingTop="5dp"
    android:drawableTop="@drawable/text_pic"
    android:textColor="@drawable/text_color"
    android:background="@drawable/bg_text"/>

MainActivity.java

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener{

    private TabLayout tab_title; // 定义一个标签布局对象
    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);
        viewpager = findViewById(R.id.viewpager);
        initTabLayout(); // 初始化标签布局
        initTabViewPager(); // 初始化标签翻页
    }

    // 初始化标签布局
    private void initTabLayout() {
        tab_title = findViewById(R.id.tab_title);
        tab_title.addTab(tab_title.newTab().setCustomView(R.layout.item_bottom_icon));
        TextView tv1 = findViewById(R.id.tv1);
        tv1.setText("首页");
        tab_title.addTab(tab_title.newTab().setCustomView(R.layout.item_bottom_icon2));
        TextView tv2 = findViewById(R.id.tv2);
        tv2.setText("朋友");
        tab_title.addTab(tab_title.newTab().setCustomView(R.layout.item_bottom_icon3));
        TextView tv3 = findViewById(R.id.tv3);
        tv3.setText("商品");
        tab_title.addTab(tab_title.newTab().setCustomView(R.layout.item_bottom_icon4));
        TextView tv4 = findViewById(R.id.tv4);
        tv4.setText("我的");
        tab_title.addOnTabSelectedListener(this);
    }

    // 初始化标签翻页
    private void initTabViewPager() {
        fragmentList = new ArrayList<>();
        fragmentList.add(new OneFragment());
        fragmentList.add(new MineFragment());
        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();
            }
        };
        viewpager.setAdapter(viewPagerAdapter);
        viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                tab_title.getTabAt(position).select();
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        if (tab.getPosition() == 0){
            viewpager.setCurrentItem(0);
        }else if (tab.getPosition() == 1){
            viewpager.setCurrentItem(1);
        }else if (tab.getPosition() == 2){
            viewpager.setCurrentItem(2);
        }else if (tab.getPosition() == 3){
            viewpager.setCurrentItem(3);
        }
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
}

説明すべき点がいくつかあります。

app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"

TabLayoutの2行のコードは、カスタムタブレイアウトの後の左右のギャップを削除することです。

ボタンをクリックしてViewPagerをスライドにリンクしますが、ViewPagerをスライドしてもTabLayoutは移動しません。私は、ViewPager自身の書き込みしか聞くことができないので、

tab_title.getTabAt(position).select();

TabLayoutでアイテムを選択するためのコードです。

この例では、一部のDrawableファイルが省略されています。前のファイルを参照できますが、ここでは焦点を当てていません。