一、需要实现的效果
四个类似按钮的tab，点击可切换viewPage，也可滑动viewpage，联动，点击按钮背景颜色和字体颜色都需要改变
二.先来看看TabLayout的各个属性：
⒈app:tabIndicatorColor：下划线的颜色。
⒉app:tabSelectedTextColor：选中菜单项后字体的颜色。
⒊app:tabTextColor：未选中是的字体颜色
⒋app:tabMode：取值有两个属性，TabLayout.MODE_FIXED与TabLayout.MODE_SCROLLABLE
TabLayout.MODE_FIXED：固定的选项卡，在选项卡较少的情况下使用（选项卡的总宽度和不会大于屏幕宽,不然就是被挤压）
TabLayout.MODE_SCROLLABLE:在未确定选项卡数量的情况下使用，不会被挤压，同时屏幕外的选项卡需要滑动才能显示。
⒌app:tabGravity：两个值，fill与center。
center：在选项卡较少的情况下使用，居中。
fill ：选项卡较多情况下使用，填充。
⒍app:tabContentStart：控件对于左边的距离，可看成marginLeft;
⒎app:tabBackground：选项卡的背景色，不设置的情况其颜色与标题栏一样。
⒏app:tabIndicatorHeight：下划线的高度
⒐app:tabMaxWidth：选项卡的最大宽度
⒑app:tabMinWidth：选项卡的最小宽度
⒒app:tabTextAppearance：使用该属性设置样式可以为标签的头部设置图片。当你在viewpager适配器中getPagerTitle中设置了图片，如果不设置TextAppearance.Design.Tab中textAllCaps设置为false。图片是不会显示的。
⒓app:tabPadding：于padding一样。
设置了这两行：
app:tabPaddingEnd="0dp"
app:tabPaddingStart="0dp"
效果如下：
如果没有设置，会是这样的：
13.app:tabRippleColor="@null"去掉点击时背景色
三、tab+viewpage实现
tab需要在build.gradle中加入,否则会报错误: 程序包com.google.android.material.tabs不存在
import com.google.android.material.tabs.TabLayout;
dependencies {
...
implementation 'com.google.android.material:material:1.2.0-alpha06'
}
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
app:tabGravity="center"
app:tabIndicatorGravity="center"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabRippleColor="@null" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/view_pager2"
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="14dp" />
完整代码如下：
final String[] tabs = new String[]{
"条", "烈", "薄", "波"};
binding.viewPager2.setAdapter(new FragmentStateAdapter(this) {
@Override
public Fragment createFragment(int position) {
PlayerRhythmFragment playerRhythmFragment = new PlayerRhythmFragment(position);
playerRhythmFragment.setCurMusicState(musicState);
tabFragmentsCreators.put(position, playerRhythmFragment);
return playerRhythmFragment;
}
@Override
public int getItemCount() {
return tabs.length;
}
});
binding.viewPager2.setUserInputEnabled(musicState == 1);//设置是否禁止用户滑动
binding.viewPager2.setCurrentItem(musicStyle, false);
binding.tabLayout.setSelectedTabIndicator(0);//去掉tab自带的背景线
//自定义Tab
mediator = new TabLayoutMediator(binding.tabLayout, binding.viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
@Override
public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
View view = LayoutInflater.from(getContext()).inflate(R.layout.widget_choose_icon_tag_bg, null);
TextView tv = (TextView) view.findViewById(R.id.choose_icon_tab_tv);
tv.setText(tabs[position]);
int[][] states = new int[2][];
states[0] = new int[]{
android.R.attr.state_selected};
states[1] = new int[]{
};
int[] colors = new int[]{
activeColor, normalColor};
ColorStateList colorStateList = new ColorStateList(states, colors);
tv.setTextColor(colorStateList);
tab.setCustomView(view);
LinearLayout tabStrip = ((LinearLayout) binding.tabLayout.getChildAt(0));
for (int i = 0; i < tabStrip.getChildCount(); i++) {
tabStrip.getChildAt(i).setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return isEnabledClick;
}
});
}
}
});
四、重点代码单伶说一下
1、禁止tab的点击
LinearLayout tabStrip = ((LinearLayout) binding.tabLayout.getChildAt(0));
for (int i = 0; i < tabStrip.getChildCount(); i++) {
tabStrip.getChildAt(i).setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return isEnabledClick;
}
});
}
2、去掉tab自带的背景线
binding.tabLayout.setSelectedTabIndicator(0);//去掉tab自带的背景线
3、禁止用户滑动
binding.viewPager2.setUserInputEnabled();
五、UI代码
1、自定义tab:
widget_choose_icon_tag_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/choose_icon_tab_tv"
android:layout_width="56dp"
android:layout_height="24dp"
android:background="@drawable/selector_icon_choose_txt_bg"
android:gravity="center"
android:textSize="12sp" />
</LinearLayout>
2、点击按钮背景切换
selector_icon_choose_txt_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/shape_icon_choose_select" android:state_checked="true" />
<item android:drawable="@drawable/shape_icon_choose_select" android:state_selected="true" />
<item android:drawable="@drawable/shape_icon_choose_no_select" />
</selector>
shape_icon_choose_select.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp"/>
<solid android:color=" #D4D8E1"/>
</shape>
shape_icon_choose_no_select.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp"/>
<solid android:color="#1E232D"/>
</shape>
3、点击字体颜色变化
private int activeColor = Color.parseColor("#0F1117");
private int normalColor = Color.parseColor("#8F9399");
...
mediator = new TabLayoutMediator(binding.tabLayout, binding.viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
@Override
public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
.....
int[] colors = new int[]{
activeColor, normalColor};
ColorStateList colorStateList = new ColorStateList(states, colors);
tv.setTextColor(colorStateList);
.....
}
}