Android开发之TabLayout组件的使用_tablayout 添加项目-CSDN博客

本文链接：https://blog.csdn.net/z_x_Qiang/article/details/75155859

本文详细介绍了Android 5.0引入的新组件TabLayout，它与ViewPager结合使用，为应用提供灵活的标签页切换功能。通过实例解析TabLayout的配置和使用方法，帮助开发者实现高效、美观的界面设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

5.0新组件TabLayout

TabLayout提供了一个水平布局来显示选项卡。

要显示的选项卡的人口数是通过TabLayout.Tab实例完成的。您可以通过newTab（）创建选项卡。从那里可以分别通过setText（int）和setIcon（int）来更改选项卡的标签或图标。要显示该选项卡，您需要通过其中一个addTab（Tab）方法将其添加到布局。例如：

 TabLayout tabLayout = ...;
 tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

您应该通过setOnTabSelectedListener（OnTabSelectedListener）设置侦听器，以便在任何选项卡的选择状态已更改时通知。
您还可以通过使用TabItem在布局中向TabLayout添加项目。示例使用如下所示：

 <android.support.design.widget.TabLayout
         android:layout_height="wrap_content"
         android:layout_width="match_parent">

     <android.support.design.widget.TabItem
             android:text="@string/tab_text"/>

     <android.support.design.widget.TabItem
             android:icon="@drawable/ic_android"/>

 </android.support.design.widget.TabLayout>

如果您正在使用ViewPager与此布局，可以调用setupWithViewPager（ViewPager）将两者连接在一起。该布局将从PagerAdapter的页面标题自动填充

该视图还支持用作ViewPager的装饰的一部分，并且可以直接添加到布局资源文件中的ViewPager中：

<android.support.v4.view.ViewPager
     android:layout_width="match_parent"
     android:layout_height="match_parent">

     <android.support.design.widget.TabLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="top" />

 </android.support.v4.view.ViewPager>

xml属性（常用的）

android.support.design:tabBackground		tab的背景颜色
android.support.design:tabContentStart		从起始边缘到Y轴的位置，选项卡应该位于。
android.support.design:tabIndicatorColor	用于显示当前所选标签的指示器的颜色。
android.support.design:tabIndicatorHeight	用于显示当前选定标签的指示灯高度。 
android.support.design:tabMaxWidth		标签的最大宽度。
android.support.design:tabMinWidth		标签的最小宽度。 
android.support.design:tabMode			此布局中Tabs的行为模式必须是以下常量值之一。 例如滑动设置
android.support.design:tabSelectedTextColor	选中tab的文本标签的字体颜色 
android.support.design:tabTextColor		要应用于选项卡的默认文本颜色。

了解了以上的基本知识点，下面看看案例：

1.设置xml文件及属性

<android.support.design.widget.TabLayout
       android:id="@+id/tablayout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:tabMode="scrollable"
       app:tabIndicatorHeight="10dp"
       app:tabIndicatorColor="#000000"
       app:tabGravity="fill"
       app:tabBackground="@color/tabbackground"
       app:tabSelectedTextColor="@color/colorAccent"
       app:tabTextColor="@color/colorPrimaryDark"
       >
   </android.support.design.widget.TabLayout>
   <android.support.v4.view.ViewPager
       android:id="@+id/viewpager"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       >
   </android.support.v4.view.ViewPager>

2.编写代码：

package th.zxq.com.demo;

import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private int counts=10;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initUI();
        initData();

    }
    private void initUI() {
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
    }
    private void initData() {
        for (int i = 0; i < counts; i++) {
            tabLayout.addTab(tabLayout.newTab().setText("TAB" + i));
        }
        viewPager.setAdapter(new MyPagerAdapter());
        tabLayout.setupWithViewPager(viewPager);
    }
    public class MyPagerAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return counts;
        }
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            TextView tv=new TextView(MainActivity.this);
            tv.setText("TAB"+position);
            container.addView(tv);
            return tv;
        }
        @Override
        public CharSequence getPageTitle(int position) {
            return "标签"+position;
        }
    }
}

3.实现效果：