ConstraintLayout初次了解
>作者:燕歆波
>导读:ConstraintLayout初次使用!
ConstraintLayout出来有一段时间了,今天花了一点时间写了一个很简单的demo,目的只是想了解一下基本的使用;
在我们创建activity的时候,默认的xml的跟布局都会是ConstraintLayout布局,一般情况下,大家都会直接删掉然后使用RelativeLayout或者LinearLayout,还可能是其他的布局吧?
今天的目的就是要认识认识这个角色,所以就留下它吧!
先看一下这个so easy的例子吧:
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="xiao.com.vim.activity.ConstraintLayoutActivity"> <LinearLayout android:id="@+id/ll" android:orientation="vertical" android:background="@color/colorAccent" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintDimensionRatio="16:6" app:layout_constraintTop_toTopOf="parent"> </LinearLayout> <TextView android:id="@+id/tv1" android:layout_width="140dp" android:layout_height="86dp" android:layout_marginRight="12dp" android:layout_marginTop="12dp" android:background="#fd3" app:layout_constraintTop_toBottomOf="@+id/ll" app:layout_constraintRight_toRightOf="parent" /> <TextView android:id="@+id/tv2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginRight="12dp" android:text="的设计费垃圾哦哦手机建立评价法" android:textColor="#000000" android:textSize="16sp" app:layout_constraintRight_toLeftOf="@id/tv1" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="@id/tv1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginTop="12dp" android:text="8分钟前" android:textColor="#333" android:textSize="12dp" app:layout_constraintRight_toLeftOf="@id/tv1" app:layout_constraintBottom_toBottomOf="@id/tv1" /> <TextView android:layout_width="60dp" android:layout_height="60dp" android:background="@color/colorPrimary" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintHorizontal_bias="0.1" app:layout_constraintVertical_bias="0.1" /> <android.support.constraint.Guideline android:id="@+id/guideline_w" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.8" /> <android.support.constraint.Guideline android:id="@+id/guideline_h" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.2" /> <TextView android:layout_width="60dp" android:layout_height="60dp" android:background="#612" app:layout_constraintLeft_toRightOf="@id/guideline_w" app:layout_constraintTop_toBottomOf="@id/guideline_h" /> </android.support.constraint.ConstraintLayout>
英语不错的童鞋,肯定知道这个控件的含义"约束布局",当然,我是百度翻译得到的意思,虽然我是一个开发者,可是不得不说,我英语just so so;
这个布局的效果如下:
既然是约束布局,那它有那些约束性的属性呢?通过上面的xml页面,应该可以看得更清楚吧。
app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintDimensionRatio="16:6" app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"这个属性的含义就是:这个控件的左边是在它父容器的左边,
app:layout_constraintRight_toRightOf="parent"这个属性的含义就是:这个控件的右边是在它父容器的右边,
类似的属性就不做过多的阐述了,意思是一样的;
app:layout_constraintDimensionRatio="16:6"对于这个属性,它的含义是:约束此控件的宽高比例是:16:6;
app:layout_constraintHorizontal_bias="0.1" app:layout_constraintVertical_bias="0.1"对于这两个属性是对控件在屏幕的位置比例进行约束:水平方向10%的位置.垂直方向10%的位置;也就是说,此控件会在屏幕的左上角距离顶部10%的距离,距离左边也是10%的距离。
<LinearLayout android:id="@+id/ll" android:orientation="vertical" android:background="@color/colorAccent" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintDimensionRatio="16:6" app:layout_constraintTop_toTopOf="parent"> </LinearLayout>对于这个布局,看到一些博客上是这么解释的:在约束布局里面,MATCH_PARENT是没有作用的;
官网解释如下:MATCH_PARENT
is not supported for widgets contained in a ConstraintLayout, though similar behavior can be defined by using
MATCH_CONSTRAINT
with the corresponding left/right or top/bottom constraints being set to “parent”.`
取而代之的是MATCH_CONSTRAINT
;0在ConstraintLayout中代表着MATCH_CONSTRAINT
;
然后使用:
app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"这两属性让这个布局撑满,接着设置宽高比例,最后就是让此布局位于父容器的顶部;
至于顶部的蓝色方块,主要说的是下面两个属性
app:layout_constraintHorizontal_bias="0.1" app:layout_constraintVertical_bias="0.1"我的理解bias主要是控制方块在屏幕中的位置:0.1代表屏幕10%的地方;
这两句话就代表着方块在屏幕的左上角,x轴方向10%,y轴方向10%;
练习的一些基本的属性就是这样:还得靠自己在项目中使用才能得心应手!