android viewpager2+tablayout+ConstraintLayout的坑

viewpager2 出来有一段时间了，不过好像还没有正式版。决定尝试一下。

使用要先导入依赖：

implementation 'androidx.viewpager2:viewpager2:1.0.0-rc01'implementation 'com.google.android.material:material:1.2.0-alpha01' // 这个不是必要，但是要结合 tablayout 的使用需要

布局很简洁：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <com.google.android.material.tabs.TabLayout        android:id="@+id/register_tabs"        android:layout_width="match_parent"        android:layout_height="46dp"        app:layout_constraintTop_toTopOf="parent"        app:tabIndicatorColor="#FFD900"        app:tabIndicatorFullWidth="false"        app:tabIndicatorHeight="@dimen/view_dp_2"        app:tabMode="fixed"        app:tabSelectedTextColor="#0C1F34"        app:tabTextColor="#999999">    </com.google.android.material.tabs.TabLayout>    <androidx.viewpager2.widget.ViewPager2        android:id="@+id/register_viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="horizontal"        app:layout_constraintTop_toBottomOf="@id/register_tabs" /></androidx.constraintlayout.widget.ConstraintLayout>

看起来完全没毛病，运行之后，界面也没有错乱。
不过tablayout 的 item 不能点击，只能使用viewpager 滑动去带动 item 切换。

这个问题搞了几个小时，找不到原因。然后看到官方示例代码不是使用 ConstraintLayout，而是使用的LinearLayout。就投机替换试试看，结果就正常了，可以点击 item 切换了。

这个坑先放这里，记录一下，不过真正原因还没有找到，只是找到了解决方法。

找到解决方法之后的代码：

布局文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <com.google.android.material.tabs.TabLayout        android:id="@+id/register_tabs"        android:layout_width="match_parent"        android:layout_height="46dp"        app:layout_constraintTop_toTopOf="parent"        app:tabIndicatorColor="#FFD900"        app:tabIndicatorFullWidth="false"        app:tabIndicatorHeight="@dimen/view_dp_2"        app:tabMode="fixed"        app:tabSelectedTextColor="#0C1F34"        app:tabTextColor="#999999">    </com.google.android.material.tabs.TabLayout>    <androidx.viewpager2.widget.ViewPager2        android:id="@+id/register_viewpager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        android:orientation="horizontal"        app:layout_constraintTop_toBottomOf="@id/register_tabs" /></LinearLayout>

java代码

mViewPager2 = findViewById(R.id.register_viewpager);    mTabLayout = findViewById(R.id.register_tabs);mViewPager2.setAdapter(new FragmentStateAdapter(this) {            private int count = 3;            @NonNull            @Override            public Fragment createFragment(int position) {                Fragment fragment;                switch (position) {                    default:                    case 0:                        fragment = new VerifyFragment();                        break;                    case 1:                        fragment = new InfoPerfectionFragment();                        break;                    case 2:                        fragment = new SubmitFragment();                        break;                }                return fragment;            }            @Override            public int getItemCount() {                return count;            }        });        final String[] tabTexts = {"你好", "我是", "静静"};        TabLayoutMediator mediator = new TabLayoutMediator(mTabLayout, mViewPager2,                (tab, position) -> {                    Log.e("tab", "--attach , pos=" + position + " , " + mViewPager2.getCurrentItem());                    tab.setText(tabTexts[position]);                });        mediator.attach();  // 这个 mediator 就是 依赖库 material:material:1.2.0-alpha01 里面的  // 然后这个 attach() 就将 viewpager 和 tablaayout 关联起来了。

关于 tablayout 属性：https://www.jianshu.com/p/88679fed9ecb

补充一个，默认 tab 的下划线就是 tab 宽度，加上 app:tabIndicatorFullWidth="false"就能让下划线只是 tab 内容的宽度。

整体效果如下图：

更多相关文章

随机推荐