自定义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在其中居中显示,这样他就不会有撑大的效果了,而且选中的按钮文本依旧可以有缩放效果
022020-04-09
相似问题