android组件贴近边缘,Android 新布局:弹性布局ConstraintLayout

ConstrainLayout是一个允许你用灵活的方法去设置你控件的位置和大小的ViewGroup。

优点

使用根据灵活,可以一个布局就完成界面。不需要像以前那样,layout嵌套layout。

很好的拖拉控件的支持。但是本文还是介绍代码的方式。

配置

只要android api超过9,添加依赖,就可以使用ConstrainLayout了。

compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'

一个简单的ConstrainLayout布局

我们来看一个简单的ConstrainLayout布局。

7bba439af7c9?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

一个简单的ConstraintLayout布局

我们可以看到,现在textview是水平垂直居中的。那都是下面这几句话的功劳。

app:layout_constraintLeft_toLeftOf="@+id/activity_main"

app:layout_constraintRight_toRightOf="@+id/activity_main"

app:layout_constraintTop_toTopOf="@+id/activity_main"

app:layout_constraintBottom_toBottomOf="@+id/activity_main"

哇,这几个属性看起来很复杂很麻烦的感觉。实际上,都是一样的套路。

我们可以解析一下。其实每一句属性都可以表达为layout_constraint本控件某一边缘_to目标控件某一边缘of。

举个例子:

app:layout_constraintLeft_toRightOf : 表示的是,本控件的左边缘紧紧贴着目标控件的右边缘。

relative-positioning.png

控件的左边缘贴着目标控件的右边缘

那其他的都是同理了。

app:layout_constraintRight_toRightOf :本控件右边缘贴着目标控件的右边缘。

app:layout_constraintTop_toTopOf : 本控件的上边缘贴着目标控件的上边缘。

等等等等。

这是所有可以贴近的边缘

relative-positioning-constraints.png

所有可以贴近的边缘

这是所有的贴近属性

layout_constraintLeft_toLeftOf

layout_constraintLeft_toRightOf

layout_constraintRight_toLeftOf

layout_constraintRight_toRightOf

layout_constraintTop_toTopOf

layout_constraintTop_toBottomOf

layout_constraintBottom_toTopOf

layout_constraintBottom_toBottomOf

layout_constraintBaseline_toBaselineOf

layout_constraintStart_toEndOf

layout_constraintStart_toStartOf

layout_constraintEnd_toStartOf

layout_constraintEnd_toEndOf

而在例子中,我们的textview即贴近了父布局的左边,又贴近了父布局的右边,而且,它还是wrap_content的!不可能被拉长到父布局的宽度啊,于是,在两边的拉力平衡下,textview就水平居中了。在preview中的这个图可以很形象地表达出左右两边的拉力的平衡了。

7bba439af7c9?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

preview展示图

拉力偏重

在上面的例子中,我们可以看到,textview两边的拉力偏重是相等的,都是50%。如果我们想要textview向左偏一点,那就可以调节一下水平的拉力偏重了。

app:layout_constraintHorizontal_bias="0.3"

这时候,左侧的拉力就占了0.3的偏重了。

7bba439af7c9?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

preview展示图

连接到一个GONE的控件

有请两位演员,testview tv1和tv2,我们可以看到,tv2的左边缘是贴着tv1的右边缘的。

7bba439af7c9?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

tv1和tv2

这时候我们让tv1退场,把tv1设成gone,tv2就只能贴着父布局的边缘了。

为了应对这种情况,android提供了goneMargin属性。我们可以给tv2设置一下。

app:layout_goneMarginLeft="20dp"

tv2就会和父布局的左边缘隔20dp了。

7bba439af7c9?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

Paste_Image.png

constraintL还有很多知识我没有学习到,以后开发中遇到再来填坑。

参考:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值