ConstraintLayout使用小技巧

在开发中可能需要实现如下效果:

ConstraintLayout使用小技巧_第1张图片
短文本
ConstraintLayout使用小技巧_第2张图片
长文本

首先尝试在原先LinearLayoutRelativeLayout等布局中的方式:




  


结果如下:

ConstraintLayout使用小技巧_第3张图片
image.png

发现默认效果为居中,此时尝试添加如下代码:
app:layout_constraintHorizontal_bias="0"
效果如下:
image.png

然后尝试长文案,效果如下:

image.png

这下过并不是我们想要的。此时我们抛弃wrap_content,转而使用match_constraint(xml中对应0dp)来试一下:
image.png

超长文案时没问题。但是在切换为短文案时,又出现了问题:
image.png

显然这也不是我们需要的效果。然后尝试增加如下代码:
app:layout_constraintWidth_max="wrap"
效果如下:
ConstraintLayout使用小技巧_第4张图片
image.png

image.png

OK,这次没问题了。

最终代码如下:




  


你可能感兴趣的:(ConstraintLayout使用小技巧)