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中的这两行代码是为了去掉自定义标签布局后的左右空隙。

点击按钮可以联动ViewPager滑动，但是滑动ViewPager时TabLayout竟然不动了，我只能监听ViewPager自己写了一下，所以

tab_title.getTabAt(position).select();

是选中TabLayout中某一项的代码。

示例中省略了一些Drawable文件，可以参考上一篇，在这里不是重点。