自定义TabLayout 的 Tab 出现布局变形

来源:7-1 ViewPager2搭建沙发tab页面结构

慕容2059036

2020-04-07

自定义TabView

public class TabView extends LinearLayout {
    private TabModel tabModel;
    private AppCompatImageView imageView;

    private final int imgSizeNormal = ConvertUtils.dp2px(24);
    private final float textSizeNormal = ConvertUtils.sp2px(6);

    private final int imgSizeBig = ConvertUtils.dp2px(26);
    private final float textSizeBig = ConvertUtils.sp2px(8);

    private TextView textView;

    public TabView(Context context, TabModel tabModel) {
        super(context);
        this.tabModel = tabModel;
        setOrientation(LinearLayout.VERTICAL);
        setGravity(Gravity.CENTER);
        //摆放布局
        layoutView();
    }

    private void layoutView() {
        imageView = new AppCompatImageView(getContext());
        imageView.setLayoutParams(new LinearLayout.LayoutParams(imgSizeNormal, imgSizeNormal));
        imageView.setImageDrawable(ResourceUtils.getDrawable(tabModel.getIcon()));
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);

        textView = new TextView(getContext());
        LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        textView.setLayoutParams(params);
        textView.setText(tabModel.getTitle());
        textView.setTextSize(textSizeNormal);
        textView.setTextColor(ColorUtils.getColor(R.color.text_color_light));

        addView(imageView);
        addView(textView);
    }

    public void setBig() {
        ViewGroup.LayoutParams layoutParams = imageView.getLayoutParams();
        layoutParams.width = imgSizeBig;
        layoutParams.height = imgSizeBig;
        textView.setTextSize(textSizeBig);
        imageView.setLayoutParams(layoutParams);
    }

    public void setNormal() {
        ViewGroup.LayoutParams layoutParams = imageView.getLayoutParams();
        layoutParams.width = imgSizeNormal;
        layoutParams.height = imgSizeNormal;
        textView.setTextSize(textSizeNormal);
        imageView.setLayoutParams(layoutParams);
    }
}

fragment监听选中状态

tab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                TabView tabView = (TabView) tab.getCustomView();
                tabView.setBig();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                TabView tabView = (TabView) tab.getCustomView();
                tabView.setNormal();
            }

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

            }
        });

问题在于效果有,但是布局会出现变形。底部的tab会被顶高。
正常状态:
图片描述
点击后:
图片描述
可以看到布局出现了问题,请老师指点一下问题所在。谢谢

写回答

1回答

LovelyChubby

2020-04-08

这个效果是正常的,因为选中的tab你执行了setBig,该方法中把textview 的文本放大了,自然会撑大"店铺"按钮所在的viewgroup

你可以给每个按钮所在的viewgroup设置一个最大值比如高为48dp  宽度均分即可。子view在其中居中显示,这样他就不会有撑大的效果了,而且选中的按钮文本依旧可以有缩放效果

0
2
LovelyChubby
回复
慕容2059036
屏幕分辨率问题了~
2020-04-09
共2条回复

开发商业级热门短视频App 掌握Jetpack组件库

Jetpack架构大揭秘,全组件实战主流且功能完整的短视频App

1364 学习 · 607 问题

查看课程