美文网首页
使用ConstraintLayout来构建UI

使用ConstraintLayout来构建UI

作者: 寒冬_腊月 | 来源:发表于2020-03-06 15:08 被阅读0次

    简单介绍

    ConstraintLayout(约束布局)可以使用一个扁平的试图层次结构来创建复杂的布局,和RelativeLayout类似,但它比RelativeLayout更灵活,并且更易于与Android Studio的布局编辑器一起使用。

    ConstraintLayout可在与Android 2.3(API级别9)及更高版本兼容的API库中提供,本页面提供了在Android Studio 3.0或更高版本中使用ConstraintLayout构建布局的指南

    Constraints(约束)介绍

    要在ConstraintLayout中定义视图的位置,您必须为视图添加至少一个水平和垂直约束。这个就会造成在设备上的看的效果不一样,每个约束表示与另一个视图,父布局或不可见guideline的连接或对齐,每个约束定义视图沿着垂直或水平轴的位置;所以每个视图对于每个轴必须至少有一个约束,但通常更多是必要的

    点击布局右上角的Show Warnings and Errors,可以查看一些警告信息

    ConstraintLayout添加到您的项目中

    1. 确保您的模块级build.gradle文件中声明了maven.google.com存储库
         maven {
         url 'https://maven.google.com'
         }
        }
    

    2.在相同的build.gradle文件中将该库作为依赖项添加

     compile 'com.android.support.constraint:constraint-layout:1.0.2'
    }
    

    设置margin

    两个配合使用

    app:layout_constraintTop_toTopOf="parent"
    

    设置长宽比

    app:layout_constraintDimensionRatio="W,1:1"
    app:layout_constraintDimensionRatio="H,1:1"
    

    设置水平或垂直间隔比例

    app:layout_constraintHorizontal_bias="0.5"
    

    weight 属性的使用

    官方的一个解释:

    When the chain is set to either spread or spread inside,
    you can fill the remaining space by setting one or more views to “match constraints” (0dp).
    By default, the space is evenly distributed between each view that’s set to “match constraints,”
    but you can assign a weight of importance to each view using the layout_constraintHorizontal_weight and layout_constraintVertical_weight attributes.
    If you’re familiar with layout_weight in a linear layout, this works the same way. So the view with the highest weight value gets the most amount of space;
    views that have the same weight get the same amount of space.

    三种chainStyle Spread/Spread inside/Packed

    • Spread: 视图均匀分布(在占边界之后)。这是默认设置。
    • Spread inside:第一个和最后一个视图固定在链条两端的约束上,其余均匀分布
    • Packed: 视图会贴在一起

    参考

    Developer Android

    相关文章

      网友评论

          本文标题:使用ConstraintLayout来构建UI

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