什么是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);
}
}
