ConstraintLayout的使用

作者: tmyzh | 来源:发表于2018-07-31 20:32 被阅读10次

    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 的方向 ,引用的他控件出现在他的哪个位置

    相关文章

      网友评论

        本文标题:ConstraintLayout的使用

        本文链接:https://www.haomeiwen.com/subject/oqhkvftx.html