TabLayout的简单修改

设计稿上的tab布局我用了design库的tablayout,根据设计上的图来看,选中的tab要是粗体,下方横线等宽于字体。

### 问题1:TabLayout无法控制当前选中的行的字体

解决方案:setCustomView()

首先写一个方法,用来返回每个tab的view:

    public View getTabView(int position, String title) {
        View view = LayoutInflater.from(getContext()).inflate(R.layout.tab_item, null);
        TextView txt_title = (TextView) view.findViewById(R.id.textView);
        txt_title.setText(title);
        return view;
    }

然后把view设置到tablayout中:

tabLayout.getTabAt(0).setCustomView(getTabView(0, "全部"));

然后去选择控制tablayout的标签的样式,我是新建了一个OnTabSelectedListener,然后再里面进行设置的

OnTabSelectedListener onTabSelectedListener = new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                // 选中的tab设置为粗体
                TextView textView = tabLayout.getTabAt(tab.getPosition()).getCustomView().findViewById(R.id.textView);
                textView.setTypeface(null, Typeface.BOLD);
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                // 未选中的tab设置为正常
                TextView textView = tabLayout.getTabAt(tab.getPosition()).getCustomView().findViewById(R.id.textView);
                textView.setTypeface(null, Typeface.NORMAL);

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        };

但是,设置好之后出现了新的问题:

问题2:下面Indicator宽度始终为最宽的宽度

即使你设置了app:tabIndicatorFullWidth="true",因为tabIndicatorFullWidth是根据默认布局的文字宽度来设置的,我们自定义布局之后,系统无法获取到文字大小和长度,所以就会设置成最宽的宽度。

我的解决方法:

public void reflex(final TabLayout tabLayout) {
        tabLayout.post(new Runnable() {
            @Override
            public void run() {
                try {
                    LinearLayout mTabStrip = (LinearLayout) tabLayout.getChildAt(0);
                    for (int i = 0; i < mTabStrip.getChildCount(); i++) {
                        View tabView = mTabStrip.getChildAt(i);

                        Field mTextViewField = tabView.getClass().getDeclaredField("textView");
                        mTextViewField.setAccessible(true);

                        TextView mTextView = (TextView) mTextViewField.get(tabView);

                        tabView.setPadding(0, 0, 0, 0);

                        int width = 0;
                        width = mTextView.getWidth();
                        if (width == 0) {
                            mTextView.measure(0, 0);
                            width = mTextView.getMeasuredWidth();
                        }

                        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
                        params.width = width;

                        WindowManager wm1 = ((Activity) getContext()).getWindowManager();
                        int width1 = wm1.getDefaultDisplay().getWidth();
                        LogUtils.d("" + width1 / tabLayout.getTabCount() + "=============" + mTextView.getText().length() * dip2px(tabLayout.getContext(), 15));

                        params.leftMargin = (width1 / tabLayout.getTabCount() - mTextView.getText().length() * dip2px(tabLayout.getContext(), 15)) / 2;
                        params.rightMargin = (width1 / tabLayout.getTabCount() - mTextView.getText().length() * dip2px(tabLayout.getContext(), 15)) / 2;
                        tabView.setLayoutParams(params);

                        tabView.invalidate();
                    }

                } catch (NoSuchFieldException e) {
                    e.printStackTrace();
                } catch (IllegalAccessException e) {
                    e.printStackTrace();
                }
            }
        });

    }

    public static int dip2px(Context context, float dpValue) {
        float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

reflex(tabLayout);调用在所有getTabAt方法之后即可解决这个,但是还有点小问题,tab大小被设置成了文字宽度…这个问题暂时保留,下次解决。另外有几个小问题

  1. 去掉tab的水波纹效果,无论是support还是AdnroidX,都用app:tabRippleColor="@android:color/transparent"app:tabBackground="@android:color/transparent"即使在support下也无效
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
最近接到一个任务,就是要修改原来用的官方support包TabLayout中的指示器线宽,改成固定值,当然网上有什么反射加padding什么的,可是治标不治本,切Tab过渡动画也加不了,什么?你告诉我github又xxx类似控件,可是为什么我要放弃google大神的源码呢,改改就能增加新功能了呢,为了达到目的,我就开始了下面一系列骚操作。0. 老规矩,先放效果图1. 骚操作之一:copy support包TabLayout 一份当做自己的自定义view本次骚操作是基于support '27.1.0'版本,从support '27.1.0'拷出文件到我的项目目录如下图,蓝色部分,四个文件,当然不是一帆风顺的,需要改点包名,取消掉一下注解警告,总之后面会放出源码 不同的版本可能需要拷贝出来的文件不一样哟,于support '27.1.0'版本需要拷出上图蓝色的4个文件2. 骚操作之二: fuck源代码,读懂之后开始改造首先指示器的线是画出来的,关键代码如下 (以下改动代码均为tabLayout类)   canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,                             mIndicatorRight, getHeight(), mSelectedIndicatorPaint);OK, mIndicatorLeft是滚动或者点击切tab时候通过偏移量计算出来的,总之不重要,完成第一个目标。修改指示器线宽,思路呢,就是给mIndicatorLeft和mIndicatorRight做一个偏移量就行了, 看看我怎么改的吧其中2个成员变量是我在SlidingTabStrip类中新增的 private int mSelectedIndicatorWidth =  dpToPx(27);;         private int mMinTabWidth = Integer.MAX_VALUE;我这里偷懒一下就不做方法暴露了,直接写死了线宽为27dp了好了,已经完成修改线宽目标了。(扩展一下:这里你也可以修改draw方法,画个图,或者画个小圆圈什么的)接下来增加指示线滑动切tab的过渡动画很简单我就放代码吧,关键就是在onPageScrolled方法里面做点手脚总共改动就50来行吧,就达成效果了。是不是很简单。(简单才怪,总之做出来之后觉得确实蛮简单的) 这样改好处多多,为什么呢?xml基本不需要改变,tablayout名字改一下,代码也是导包改一下,替换官方tablayout的时候代码几乎不需要变化,是不是很爽?3. github下载,喜欢就给个star吧,如果对你有帮助的话https://github.com/zjw-swun/AppOrder4. 总结官方support包就是可以这么任性的拷贝出来,有时候一个拷出一个类根本没涉及到别的类,善假于物也。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值