TabLayout的简单使用

什么是TabLayout

TabLayout是Support Design Library库中的一个控件，它是用来进行分组的，同时也可以作为ViewPager的指示器

TabLayout的简单使用

●tab创建

◇xml布局创建

<android.support.design.widget.TabLayout android:layout_width="match_parent" android:id="@+id/tablayout" android:layout_height="wrap_content"> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:text="tab1" //设置tab显示的文字 android:icon="@mipmap/ic_launcher" //设置tab的图片 android:layout_height="wrap_content" /> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:text="tab2" android:icon="@mipmap/ic_launcher" android:layout_height="wrap_content" /> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:text="tab3" android:icon="@mipmap/ic_launcher" android:layout_height="wrap_content" /> </android.support.design.widget.TabLayout> 

◇Java代码动态创建

tabLayout=findViewById(R.id.tablayout); tabLayout.addTab(tabLayout.newTab().setText("标签1").setIcon(R.mipmap.ic_launcher)); tabLayout.addTab(tabLayout.newTab().setText("标签2").setIcon(R.mipmap.ic_launcher)); tabLayout.addTab(tabLayout.newTab().setText("标签3").setIcon(R.mipmap.ic_launcher)); 

●tab的布局排版

tab的布局排版受两个属性限制app:tabMode【fixed（固定）、scrollable（滚动））】和app:tabGravity（fill（填充）、center（居中））

◇设置app:tabMode=“fixed”然后设置app:tabGravity分别为fill和center时的效果

1)app:tabGravity="fill"

<android.support.design.widget.TabLayout android:layout_width="match_parent" android:id="@+id/tablayout" app:tabMode="fixed" app:tabGravity="fill" android:layout_height="wrap_content"> </android.support.design.widget.TabLayout> 

2)app:tabGravity="center"

<android.support.design.widget.TabLayout android:layout_width="match_parent" android:id="@+id/tablayout" app:tabMode="fixed" app:tabGravity="center" android:layout_height="wrap_content"> </android.support.design.widget.TabLayout> 

◇设置app:tabMode=“scrollable”然后设置app:tabGravity分别为fill和center时的效果

1)app:tabGravity="fill"

<android.support.design.widget.TabLayout android:layout_width="match_parent" android:id="@+id/tablayout" app:tabMode="scrollable" app:tabGravity="fill" android:layout_height="wrap_content"> </android.support.design.widget.TabLayout> 

2)app:tabGravity="center"

<android.support.design.widget.TabLayout android:layout_width="match_parent" android:id="@+id/tablayout" app:tabMode="scrollable" app:tabGravity="center" android:layout_height="wrap_content"> </android.support.design.widget.TabLayout> 

●其他设置

<android.support.design.widget.TabLayout android:layout_width="match_parent" android:id="@+id/tablayout" app:tabMode="scrollable" app:tabGravity="center" app:tabIndicatorHeight="5dp" //设置指示线高度，如果想要隐藏指示线可以通过将该属性设置为0dp实现 app:tabIndicatorColor="@color/colorPrimary" //设置指示线颜色 app:tabTextColor="@color/colorPrimary" //设置未选中文字颜色 app:tabSelectedTextColor="@color/colorRed" //设置选中文字颜色 android:layout_height="wrap_content"> </android.support.design.widget.TabLayout> 

●绑定ViewPager

这里tab的Text是通过PagerAdapter的getPageTitle方法获取的

public class TabLayoutSimpleActivity2 extends AppCompatActivity { ViewPager viewPager; TabLayout tabLayout; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.tablayout_activitysimple); viewPager=findViewById(R.id.vp); tabLayout=findViewById(R.id.tablayout); viewPager.setAdapter(new PagerAdapter() { @Override public int getCount() { return 5; } @Override public boolean isViewFromObject(@NonNull View view, @NonNull Object object) { return view==object; } @NonNull @Override public Object instantiateItem(@NonNull ViewGroup container, int position) { TextView textView=new TextView(TabLayoutSimpleActivity2.this); textView.setTextSize(50); textView.setText(position+""); container.addView(textView); return textView; } @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { container.removeView((View) object); } @Nullable @Override public CharSequence getPageTitle(int position) { return "标签"+position; } }); tabLayout.setupWithViewPager(viewPager); } } 

个人博客：https://myml666.github.io