Tablayout自定义+viewpage2

一、需要实现的效果

四个类似按钮的tab，点击可切换viewPage，也可滑动viewpage，联动，点击按钮背景颜色和字体颜色都需要改变

二、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.TabLayoutandroid: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.ViewPager2android: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) {@Overridepublic Fragment createFragment(int position) {PlayerRhythmFragment playerRhythmFragment = new PlayerRhythmFragment(position);playerRhythmFragment.setCurMusicState(musicState);tabFragmentsCreators.put(position, playerRhythmFragment);return playerRhythmFragment;}@Overridepublic int getItemCount() {return tabs.length;}});binding.viewPager2.setUserInputEnabled(musicState == 1);//设置是否禁止用户滑动binding.viewPager2.setCurrentItem(musicStyle, false);binding.tabLayout.setSelectedTabIndicator(0);//去掉tab自带的背景线//自定义Tabmediator = new TabLayoutMediator(binding.tabLayout, binding.viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {@Overridepublic 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() {@Overridepublic 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() {@Overridepublic 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="/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid: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="/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="/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="/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() {@Overridepublic void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {.....int[] colors = new int[]{activeColor, normalColor};ColorStateList colorStateList = new ColorStateList(states, colors);tv.setTextColor(colorStateList);.....}}