androidX 下的Tablayout+ViewPage2+Fragment使用踩坑记录

tips: 本文是记录自己一次开发中遇到的几个问题`

登录注册.png

思路:Tablayout+ViewPage2+Fragment

1. 基本使用

//控件都是通过butterknife绑定的,就不贴了
mViewPage.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
        mFragments.add(LoginFragment.newInstance());
        mFragments.add(RegisterContainerFragment.newInstance());
        mViewPage.setAdapter(new FragmentStateAdapter(this) {
            @NonNull
            @Override
            public Fragment createFragment(int position) {
                return mFragments.get(position);
            }

            @Override
            public int getItemCount() {
                return mFragments.size();
            }
        });

        new TabLayoutMediator(mTabLayout, mViewPage, true, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                TextView textView = new TextView(mActivity);
                textView.setText(titles[position]);
                textView.setTextSize(17);
                textView.setTextColor(Color.WHITE);
                if (position == 0) {
                    textView.setAlpha(1);
                } else {
                    textView.setAlpha(0.3f);
                }
                tab.setCustomView(textView);
            }
        }).attach();

XML布局如下:

LoginFragment的XML布局如下

遇到的问题1

LoginFragment的根布局设置layout_height为指定高度无效...如果设置wrapContent,则无法设置底部按钮重叠一半在登录框上,网上查阅,说是自定义ViewPage,结果发现,viewPage2是final类型的,无法被继承与重写

解决办法

根布局嵌套一层布局,设置为指定高度就好了

遇到的问题2

Tablayout中的标题无法设置字体大小.百度搜索都是自定义style,在androidX中的Tablayout中不管用

解决办法

TextView textView = new TextView(mActivity);
textView.setText(titles[position]);
textView.setTextSize(17);
textView.setTextColor(Color.WHITE);
if (position == 0) {
textView.setAlpha(1);
} else {
textView.setAlpha(0.3f);
}
tab.setCustomView(textView);

遇到的问题3

tabItem选中后变换文字的透明度...并非变换文字颜色...搜索半天没找到对应的api设置

解决办法

  mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                TextView textView = (TextView) tab.getCustomView();
                textView.setAlpha(1);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                TextView textView = (TextView) tab.getCustomView();
                textView.setAlpha(0.3f);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                TextView textView = (TextView) tab.getCustomView();
                textView.setAlpha(1);
            }
        });

至此,总算完成了UI设计图的样子...关于Tablayout+ViewPage2+Fragment的详细使用,后面在详细研究