什么是TabLayout
TabLayout是Support Design Library库中的一个控件，它是用来进行分组的，同时也可以作为ViewPager的指示器
TabLayout的简单使用
●tab创建
◇xml布局创建1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
android:layout_width="match_parent"
android:id="@+id/tablayout"
android:layout_height="wrap_content">
android:layout_width="wrap_content"
android:text="tab1" //设置tab显示的文字
android:icon="@mipmap/ic_launcher" //设置tab的图片
android:layout_height="wrap_content" />
android:layout_width="wrap_content"
android:text="tab2"
android:icon="@mipmap/ic_launcher"
android:layout_height="wrap_content" />
android:layout_width="wrap_content"
android:text="tab3"
android:icon="@mipmap/ic_launcher"
android:layout_height="wrap_content" />
◇Java代码动态创建1
2
3
4tabLayout=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”1
2
3
4
5
6
7
android:layout_width="match_parent"
android:id="@+id/tablayout"
app:tabMode="fixed"
app:tabGravity="fill"
android:layout_height="wrap_content">
2)app:tabGravity=”center”1
2
3
4
5
6
7
android:layout_width="match_parent"
android:id="@+id/tablayout"
app:tabMode="fixed"
app:tabGravity="center"
android:layout_height="wrap_content">
◇设置app:tabMode=“scrollable”然后设置app:tabGravity分别为fill和center时的效果
1)app:tabGravity=”fill”1
2
3
4
5
6
7
android:layout_width="match_parent"
android:id="@+id/tablayout"
app:tabMode="scrollable"
app:tabGravity="fill"
android:layout_height="wrap_content">
2)app:tabGravity=”center”1
2
3
4
5
6
7
android:layout_width="match_parent"
android:id="@+id/tablayout"
app:tabMode="scrollable"
app:tabGravity="center"
android:layout_height="wrap_content">
●其他设置1
2
3
4
5
6
7
8
9
10
11
12
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">
●绑定ViewPager
这里tab的Text是通过PagerAdapter的getPageTitle方法获取的1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44public 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);
}
}
