ConstraintLayout
相了解拖动方式的可以学习郭霖大神的文章
https://blog.csdn.net/guolin_blog/article/details/53122387
代码如下
<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:layout_editor_absoluteY="81dp">
<TextView
android:id="@+id/tv1"
android:layout_width="140dp"
android:layout_height="86dp"
android:background="@color/colorAccent"
android:layout_marginTop="12dp"
android:layout_marginLeft="12dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="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="马云:一年交税170多亿马云:一年交税170多亿马云:一年交税170多亿"
android:textColor="#000000"
android:textSize="16dp"
app:layout_constraintLeft_toRightOf="@id/tv1"
app:layout_constraintRight_toRightOf="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_constraintLeft_toRightOf="@id/tv1"
app:layout_constraintBottom_toBottomOf="@id/tv1" />
</android.support.constraint.ConstraintLayout>
我们可以看到一些新的属性如下:作用就是左对齐,右对齐,上对齐,下对齐
app:layout_constraintLeft_toRightOf="@id/tv1"
app:layout_constraintBottom_toBottomOf="@id/tv1"
看到这里感觉还是跟RelativityLayout差不多的
新特性
app:layout_constraintDimensionRatio设置宽高比,适用于banner图,便捷了以前要在代码中动态配置的做法,效果如下
image代码如下
<TextView
android:id="@+id/banner"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#765"
android:gravity="center"
android:text="Banner"
app:layout_constraintDimensionRatio="H,16:6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
这里说明一下在constrainLayout布局中很多时候对match_parent不敏感,用的是0dp 便是match_constraint
app:layout_constraintDimensionRatio="H,16:6"这里有个H,还可以用W,H表示宽全屏,高计算;W表示高全屏,宽计算
展示一个平分效果
image代码如下
<TextView
android:id="@+id/tab1"
android:layout_width="0dp"
android:layout_height="30dp"
android:background="#f67"
android:gravity="center"
android:text="Tab1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/tab2"
/>
<TextView
android:id="@+id/tab2"
android:layout_width="0dp"
android:layout_height="30dp"
android:background="#A67"
android:gravity="center"
android:text="Tab2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/tab1"
app:layout_constraintRight_toLeftOf="@+id/tab3"
/>
<TextView
android:id="@+id/tab3"
android:layout_width="0dp"
android:layout_height="30dp"
android:background="#767"
android:gravity="center"
android:text="Tab3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/tab2"
app:layout_constraintRight_toRightOf="parent"
/>
app:layout_constraintHorizontal_weight使用这个属性之后可以将平分做比列分割 使用方法类似LinearLayout里面用weight
学到这里个人的感觉就是在约束布局中控件被上下左右拉扯
当上面三个tab的宽度非0时,有一个属性来控制展示效果,注意 该属性要设置在第一个tab中
layout_constraintHorizontal_chainStyle
spread 默认效果
image
spread_inside
image
packed
image右下角展示一个悬浮按钮的效果
没有约束布局之前可能想到加一个Releativitylayout 右对齐下对齐 再给一个间距
用到约束布局之后可以省略布局,并且间距可以用百分比计算,增加适配性
[站外图片上传中...(image-962ec9-1533040344714)]
代码如下
<TextView
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#612"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.9"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.9" />
上下左右都要对齐父布局,在不设置app:layout_constraintVertical_bias和
app:layout_constraintHorizontal_bias时,这个控件时居中的,这个给的0.9就是偏移的百分比,有没有感觉像一边加重了拉力
给控件设置设置辅助线,帮助控件在没有左对齐右对齐等控件时找到何时位置
<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.8" />
<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" />
<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:orientation:vertical 或 horizontal,表示此 Guideline 是水平的还是垂直的线
处理上面用百分比计算辅助线偏移的距离下面方式也可以
app:layout_constraintGuide_begin:表示 Guideline 的距离左边或上边的距离,根据方向决定是距离哪边的
app:layout_constraintGuide_end:表示 Guideline 的距离右边或下边的距离,根据方向
在ConstraintLayout控件尺寸的使用一般有三种
- 一个具体的属性值,比如:123dp 或者一个 Dimension 引用
- 使用 wrap_content,根据自身大小决定
- 0dp 即 match_constraint
黑科技属性
- layout_goneMarginStart
- layout_goneMarginEnd
- layout_goneMarginLeft
- layout_goneMarginTop
- layout_goneMarginRight
- layout_goneMarginBottom
这个几个属性与marginLeft,marginRight,marginTop,mariginBottom作用类似用来设置控件边距,但是是在依赖控件gone的情况下才显示效果,并且会覆盖marginLeft等的作用
app:layout_constraintBaseline_toBaselineOf="@+id/tab1"运用textView中文字的底部对齐
[站外图片上传中...(image-f8387f-1533040344714)]
被圈中的代码如下
<TextView
app:layout_constraintHorizontal_chainStyle="packed"
android:id="@+id/tab1"
android:layout_width="60dp"
android:layout_height="30dp"
android:background="#f67"
android:gravity="center"
android:text="Tab1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/tab2"
/>
<TextView
android:id="@+id/tab2"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#A67"
android:gravity="center"
app:layout_constraintBaseline_toBaselineOf="@+id/tab1"
android:text="Tab2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/tab1"
app:layout_constraintRight_toLeftOf="@+id/tab3"
/>
Barrier 用于把几个控件包裹起来做一个整体,本身在xml中不显示
image
例如被圈中的文字本身要求在第一个button下面正常显示,但是当第二个button突然变高时会遮住,我们需要把2个作为一个整体,文字统一显示在下方
image
代码如下
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:text="Button"
app:layout_constraintLeft_toRightOf="@id/button1"
/>
<android.support.constraint.Barrier
android:id="@+id/barrier1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="button1, button2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/button2"/>
<TextView
android:id="@+id/bottom_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="stone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/barrier1"
/>
</android.support.constraint.ConstraintLayout>
app:barrierDirection 属性决定 Barrier 的方向 ,引用的他控件出现在他的哪个位置
网友评论