Tablayout自定义+viewpage2_tablayout+viewpager2

一、需要实现的效果

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

二.先来看看TabLayout的各个属性：

⒈app:tabIndicatorColor：下划线的颜色。

⒉app:tabSelectedTextColor：选中菜单项后字体的颜色。

⒊app:tabTextColor：未选中是的字体颜色

⒋app:tabMode：取值有两个属性，TabLayout.MODE_FIXED与TabLayout.MODE_SCROLLABLE

TabLayout.MODE_FIXED：固定的选项卡，在选项卡较少的情况下使用（选项卡的总宽度和不会大于屏幕宽,不然就是被挤压）

            TabLayout.MODE_SCROLLABLE:在未确定选项卡数量的情况下使用，不会被挤压，同时屏幕外的选项卡需要滑动才能显示。
1

⒌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"
1
2

效果如下：

如果没有设置，会是这样的：

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'
}
1
2
3
4

          <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" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

完整代码如下：

		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
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
44
45
46
47

四、重点代码单伶说一下

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;
       }
});
}
1
2
3
4
5
6
7
8
9

2、去掉tab自带的背景线

binding.tabLayout.setSelectedTabIndicator(0);//去掉tab自带的背景线
1

3、禁止用户滑动

binding.viewPager2.setUserInputEnabled();
1

五、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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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>
1
2
3
4
5
6

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>
1
2
3
4
5

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>
1
2
3
4
5

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);
                .....
                }
 	}
1
2
3
4
5
6
7
8
9
10
11
12
13