精华内容
下载资源
问答
  • 约束布局使用详解

    千次阅读 2020-07-13 16:01:19
    约束布局使用详解 一、前言 在一般的安卓开发中,编写界面需要很多嵌套,这会有一定的性能影响,这个时候就可以使用 ConstraintLayout 或 RelativeLayout来减少嵌套,简化布局深度。ConstraintLayot 类似 ...

    约束布局使用详解

    一、前言

    在一般的安卓开发中,编写界面需要很多嵌套,这会有一定的性能影响,这个时候就可以使用 ConstraintLayout 或 RelativeLayout来减少嵌套,简化布局深度。ConstraintLayot 类似 RelativeLayout,但是更灵活更强大。

      1. 具有更强的性能优势,简化嵌套深度。
      1. 更好的屏幕适配,可以使用比例来适配,效果更好。
      1. 可视化编辑,操作起来不是很完美。

    二、使用

      1. 引入
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    
      1. 基本的相对定位
    • 下面是一些常用的基本属性,看到名字基本上就知道怎么用了,具体使用看下面示例。
    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
    

    image.png
    这个图的实现方法如下:主要是子控件和父控件之间的相对定位。

     <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="在左上角"
            android:background="@color/red_F7E6ED"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="在右上角"
            android:background="@color/red_F7E6ED"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="居中显示"
            android:background="@color/red_F7E6ED"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    
    • 子控件和子控件之间的定位:

    image.png

     <TextView
            android:id="@+id/tv_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="居中显示"
            android:background="@color/red_F7E6ED"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    
        <TextView
            android:id="@+id/tv_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="子控件一"
            android:background="@color/yellow_FF9B52"
            app:layout_constraintTop_toBottomOf="@+id/tv_center"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    
        <TextView
            android:id="@+id/tv_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="子控件二"
            android:background="@color/green_07C0C2"
            app:layout_constraintTop_toBottomOf="@+id/tv_center"
            app:layout_constraintEnd_toStartOf="@+id/tv_one"/>
    
    • 子控件之间高度不一样时的定位:

    image.png
    实现居中对齐,顶部和底部对齐,实现如下:

     <TextView
            android:id="@+id/tv_four"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="子控件四"
            android:gravity="center"
            android:background="@color/red_F7E6ED"
            android:layout_marginTop="50dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    
        <TextView
            android:id="@+id/tv_five"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:text="左边顶部对齐"
            android:gravity="center"
            android:background="@color/black_999999"
            android:layout_marginTop="50dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/tv_four"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:text="底部对齐"
            android:gravity="center"
            android:background="@color/green_07C0C2"
            app:layout_constraintBottom_toBottomOf="@+id/tv_five"
           app:layout_constraintEnd_toStartOf="@+id/tv_five"/>
        <TextView
            android:id="@+id/tv_six"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:text="右边居中对齐"
            android:gravity="center"
            android:background="@color/yellow_FF9B52"
            android:layout_marginTop="50dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_four"
            app:layout_constraintBaseline_toBaselineOf="@+id/tv_four"/>
    
    

    居中对齐用到了一个属性:layout_constraintBaseline_toBaselineOf

    这个属性是帮助基准线对齐,如果文字不居中无法实现控件整体居中对齐,示例如下:

    image.png

    <TextView
            android:id="@+id/tv_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="正中心"
            android:background="@color/blue_74D3FF"
            android:padding="8dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    
    
        <TextView
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:text="BaseLine 对齐"
            android:background="@color/red_FF8EB7"
            app:layout_constraintBaseline_toBaselineOf="@+id/tv_center"
            app:layout_constraintEnd_toStartOf="@+id/tv_center"/>
    
    
        <TextView
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:text="BaseLine 对齐"
            android:gravity="center"
            android:background="@color/green_07C0C2"
            app:layout_constraintBaseline_toBaselineOf="@+id/tv_center"
            app:layout_constraintStart_toEndOf="@+id/tv_center"/>
    
        
    

    如果想实现左侧控件和中心控件居中对齐,可以使用如下方法:image.png

    <TextView
            android:id="@+id/tv_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="正中心"
            android:background="@color/blue_74D3FF"
            android:padding="8dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    
    
        <TextView
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:text="BaseLine 对齐"
            android:background="@color/red_FF8EB7"
            app:layout_constraintEnd_toStartOf="@+id/tv_center"
            app:layout_constraintTop_toTopOf="@+id/tv_center"
            app:layout_constraintBottom_toBottomOf="@+id/tv_center"/>
    
    
        <TextView
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:text="BaseLine 对齐"
            android:gravity="center"
            android:background="@color/green_07C0C2"
            app:layout_constraintBaseline_toBaselineOf="@+id/tv_center"
            app:layout_constraintStart_toEndOf="@+id/tv_center"/>
    
    
    • 角度定位,效果如下图,角度和距离都是两个控件的中心作为参考。

    image.pngimage.png

        <TextView
            android:id="@+id/tv_nine"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginTop="120dp"
            android:background="@color/red_F7E6ED"
            android:gravity="center"
            android:text="子控件九"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:background="@color/green_07C0C2"
            android:gravity="center"
            android:text="在子控件九120度方向 180dp 的距离"
            app:layout_constraintBaseline_toBaselineOf="@+id/tv_nine"
            app:layout_constraintCircle="@id/tv_nine"
            app:layout_constraintCircleAngle="110"
            app:layout_constraintCircleRadius="180dp"
            app:layout_constraintStart_toStartOf="parent"
        />
    
    • margin
    ConstraintLayout的边距常用属性如下:
    android:layout_marginStart
    android:layout_marginEnd
    android:layout_marginLeft
    android:layout_marginTop
    android:layout_marginRight
    android:layout_marginBottom
    

    和以前的用法基本一样,不过要先约束好子控件的位置才会生效。

    • goneMargin
    goneMargin主要用于约束的控件可见性被设置为gone的时候使用的margin值,属性如下:
    layout_goneMarginStart
    layout_goneMarginEnd
    layout_goneMarginLeft
    layout_goneMarginTop
    layout_goneMarginRight
    layout_goneMarginBottom
    

    约束的控件可见时:
    image.png
    约束的控件不可见时:
    image.png

      1. 尺寸约束
    • 使用wrap_content,让控件自己计算大小,用法和以前的用法基本一样,不过可以使用下列属性来控制最大,最小值。
    android:minWidth 最小的宽度
    android:minHeight 最小的高度
    android:maxWidth 最大的宽度
    android:maxHeight 最大的高度
    
    • match_parent,不推荐使用,用 0dp 和约束来实现,示例如下:

    image.png

    <TextView
            android:id="@+id/tv_eleven"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:background="@color/blue_74D3FF"
            android:gravity="center"
            android:text="子控件十一"
            app:layout_constraintTop_toBottomOf="@id/tv_ten2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    
    • 一个控件宽度固定,另一个占据余下空间

    image.png

        <TextView
            android:id="@+id/tv_twelve"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_marginTop="20dp"
            android:background="@color/blue_74D3FF"
            android:gravity="center"
            android:text="子控件十二"
            app:layout_constraintTop_toBottomOf="@id/tv_eleven"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/tv_thirteen"/>
        <TextView
            android:id="@+id/tv_thirteen"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:background="@color/green_07C0C2"
            android:gravity="center"
            android:text="子控件十三"
            app:layout_constraintTop_toBottomOf="@id/tv_eleven"
            app:layout_constraintEnd_toEndOf="parent"
            />
    
    • 宽高比

    通过属性layout_constraintDimensionRatio设置宽高比,示例如下:
    image.png
    属性layout_constraintDimensionRatio = “1:2”,默认是宽高比,可以指定变成高宽比,
    app:layout_constraintDimensionRatio="H,1:2"指的是 高:宽=1:2
    app:layout_constraintDimensionRatio="W,1:2"指的是 宽:高=1:2

     <TextView
            android:id="@+id/tv_fourteen"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintDimensionRatio="1:2"
            android:layout_marginTop="20dp"
            android:background="@color/green_07C0C2"
            android:gravity="center"
            android:text="子控件十四,宽高比 1:2"
            app:layout_constraintTop_toBottomOf="@id/tv_twelve"
            app:layout_constraintStart_toStartOf="parent"
            />
        <TextView
            android:id="@+id/tv_fourteen2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintDimensionRatio="W,1:2"
            android:layout_marginTop="20dp"
            android:background="@color/red_FF6D84"
            android:gravity="center"
            android:text="子控件十四,宽高比 W,1:2"
            app:layout_constraintTop_toBottomOf="@id/tv_twelve"
            app:layout_constraintStart_toEndOf="@+id/tv_fourteen"/>
        <TextView
            android:id="@+id/tv_fourteen3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintDimensionRatio="H,1:2"
            android:layout_marginTop="20dp"
            android:background="@color/red_FF6D84"
            android:gravity="center"
            android:text="子控件十四,高宽比H, 1:2"
            app:layout_constraintTop_toBottomOf="@id/tv_twelve"
            app:layout_constraintStart_toEndOf="@+id/tv_fourteen2"/>
    
    
    • 实现权重
      1. 三等分

    image.png

     <TextView
            android:id="@+id/tv_left"
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:text="控件左"
            app:layout_constraintTop_toBottomOf="@+id/tv_thirteen"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:background="@color/red_FF8EB7"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/tv_middle"/>
    
        <TextView
            android:id="@+id/tv_right"
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:text="控件右"
            app:layout_constraintTop_toBottomOf="@+id/tv_thirteen"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:background="@color/green_07C0C2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_middle"/>
    
        <TextView
            android:id="@+id/tv_middle"
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:text="控件中"
            app:layout_constraintTop_toBottomOf="@+id/tv_thirteen"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:background="@color/yellow_FF9B52"
            app:layout_constraintStart_toEndOf="@+id/tv_left"
            app:layout_constraintEnd_toStartOf="@+id/tv_right"/>
    
    
    
      1. 设置比例 2:1:1

    只需要给每个控件设置layout_constraintHorizontal_weight就可以了
    image.png

      1. 配合layout_constraintHorizontal_chainStyle实现更多效果,如下:

    image.png

    • 3.1 spread + 宽度非0,不设置默认的就是这种效果

    image.png

     <TextView
            android:id="@+id/tv_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="左侧"
            android:background="@color/red_FF6D84"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/tv_center"/>
    
    
        <TextView
            android:id="@+id/tv_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="中间"
            android:background="@color/yellow_FF9B52"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_left"
            app:layout_constraintEnd_toStartOf="@+id/tv_right"/>
    
        <TextView
            android:id="@+id/tv_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="右侧"
            android:background="@color/green_07C0C2"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_center"/>
    
    
    • 3.2 spread_inside + 宽度非0,只要在第一个控件设置就可以了。

    image.png

    
        <TextView
            android:id="@+id/tv_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="左侧"
            android:background="@color/red_FF6D84"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/tv_center"
            app:layout_constraintHorizontal_chainStyle="spread_inside"/>
    
    
        <TextView
            android:id="@+id/tv_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="中间"
            android:background="@color/yellow_FF9B52"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_left"
            app:layout_constraintEnd_toStartOf="@+id/tv_right"/>
    
        <TextView
            android:id="@+id/tv_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="右侧"
            android:background="@color/green_07C0C2"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_center"/>
    
    • 3.3 packed + 宽度非 0

    image.png

     <TextView
            android:id="@+id/tv_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="左侧"
            android:background="@color/red_FF6D84"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/tv_center"
            app:layout_constraintHorizontal_chainStyle="packed"/>
    
    
        <TextView
            android:id="@+id/tv_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="中间"
            android:background="@color/yellow_FF9B52"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_left"
            app:layout_constraintEnd_toStartOf="@+id/tv_right"/>
    
        <TextView
            android:id="@+id/tv_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="右侧"
            android:background="@color/green_07C0C2"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_center"/>
    
    • 3.4 spread + 宽度为0,spread_inside + 宽度为0,packed + 宽度为0且可以通过weight控制分配比例,显示效果以设置的比例为准

    image.png

     <TextView
            android:id="@+id/tv_left"
            android:layout_width="0dp"
            android:layout_height="30dp"
            app:layout_constraintHorizontal_weight="1"
            android:text="控件左"
            app:layout_constraintTop_toBottomOf="@+id/tv_thirteen"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:background="@color/red_FF8EB7"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/tv_middle"
            app:layout_constraintVertical_chainStyle="spread"/>
    
        <TextView
            android:id="@+id/tv_right"
            android:layout_width="0dp"
            android:layout_height="30dp"
            app:layout_constraintHorizontal_weight="1"
            android:text="控件右"
            app:layout_constraintTop_toBottomOf="@+id/tv_thirteen"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:background="@color/green_07C0C2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_middle"
            app:layout_constraintVertical_chainStyle="spread"/>
    
        <TextView
            android:id="@+id/tv_middle"
            android:layout_width="0dp"
            app:layout_constraintHorizontal_weight="1"
            android:layout_height="30dp"
            android:text="控件中"
            app:layout_constraintTop_toBottomOf="@+id/tv_thirteen"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:background="@color/yellow_FF9B52"
            app:layout_constraintStart_toEndOf="@+id/tv_left"
            app:layout_constraintEnd_toStartOf="@+id/tv_right"
            app:layout_constraintVertical_chainStyle="spread"/>
    
    
      1. 5 layout_constraintHorizontal_bias + packed 实现最后一种效果

    image.png
    如上,3.3中布局总体居中,这时可以通过设置layout_constraintHorizontal_bias 和layout_constraintVertical_bias来控制位置

     <TextView
            android:id="@+id/tv_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="左侧"
            android:background="@color/red_FF6D84"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/tv_center"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintHorizontal_bias="0.1"/>
    
    
        <TextView
            android:id="@+id/tv_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="中间"
            android:background="@color/yellow_FF9B52"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_left"
            app:layout_constraintEnd_toStartOf="@+id/tv_right"/>
    
        <TextView
            android:id="@+id/tv_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="右侧"
            android:background="@color/green_07C0C2"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_center"/>
    
    

    两个属性一起使用,实现左下角或是右下角有一定间距,通过 margin 也可以实现,

    • margin 实现如下:

    image.png

     <TextView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:text="右下角"
            android:textColor="@color/white"
            android:gravity="center"
            android:background="@color/red"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_margin="10dp"/>
    
    • layout_constraintHorizontal_bias 实现如下:

    image.png

     <TextView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:text="左下角"
            android:textColor="@color/white"
            android:gravity="center"
            android:background="@color/red"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintHorizontal_bias="0.08"
            app:layout_constraintVertical_bias="0.98"
            />
    
    • 4. 其他相关控件
    • 4.1 GuideLine

    辅助线,帮助定位控件,并不会显示在界面上
    Guildline的主要属性:
    android:orientation 垂直vertical,水平horizontal
    layout_constraintGuide_begin 开始位置(水平方向,距离顶部。垂直距离左侧)
    layout_constraintGuide_end 结束位置(水平方向,距离顶部。垂直距离左侧)
    ayout_constraintGuide_percent 距离的百分比(水平方向,距离顶部。垂直距离左侧)

    • 距离顶部 100dp 设置一条辅助线:

    image.png
    <androidx.constraintlayout.widget.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin=“100dp”
    />

    • 距顶部 80%的位置设置一条辅助线
    • image.png

    <androidx.constraintlayout.widget.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=“0.8”
    />
    可以自由拖动控制辅助线的位置。

    • 4.2 Group 可以方便控制子控件显示或隐藏

    比如有多个子控件,需要控制多个个隐藏,比一个一个控件控制更方便,示例如下:
    隐藏前的控件:
    image.png
    设置隐藏后:
    image.png
    完整布局:

     <TextView
            android:id="@+id/tv_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="左侧"
            android:background="@color/red_FF6D84"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/tv_center"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintHorizontal_bias="0.1"/>
    
    
        <TextView
            android:id="@+id/tv_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="中间"
            android:background="@color/yellow_FF9B52"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_left"
            app:layout_constraintEnd_toStartOf="@+id/tv_right"/>
    
        <TextView
            android:id="@+id/tv_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="右侧"
            android:background="@color/green_07C0C2"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/tv_center"/>
    
    
        <androidx.constraintlayout.widget.Guideline
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.7" />
    
    
        <androidx.constraintlayout.widget.Group
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:constraint_referenced_ids="tv_left,tv_center"
            android:visibility="gone"/>
    

    主要是通过 constraint_referenced_ids 这个属性来实现,然后控制 Group 显示或隐藏就能同时控制加入进去的子控件。Group 使用注意事项:

    • Group优先于View,下层Group优先于上层。
    • Group只可以引用当前ConstraintLayout下的View,子Layout 下的View不可以。
    • app:constraint_referenced_ids里直接写的是id的字符串,初始化后会通过getIdentifier来反射查找叫该名字的id。所以如果你的项目用了类似AndResGuard的混淆id名字的功能,切记不要混淆app:constraint_referenced_ids里的id,否则在release版本就会因找不到该id而失效。或者也可以通过代码setReferencedIds来设置id。
    • 4.3 Placeholder

    占位布局,自己本身不绘制内容,但是可以通过属性 app: content = “id” 控制对应的控 件绘制到自己的位置上,而对应的控件就像 gone 了一样。示例如下,右上角的控件跑到了左上角:
    image.png

     <TextView
            android:id="@+id/tv_right3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="右侧"
            android:background="@color/green_07C0C2"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            />
    
        <androidx.constraintlayout.widget.Placeholder
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:content="@+id/tv_right3"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>
    
    
    • 4.4 Optimizer

    当我们使用 MATCH_CONSTRAINT 时,ConstraintLayout 将对控件进行 2 次测量,ConstraintLayout在1.1中可以通过设置 layout_optimizationLevel 进行优化,可设置的值有:
    none:无优化
    standard:仅优化直接约束和屏障约束(默认)
    direct:优化直接约束
    barrier:优化屏障约束
    chain:优化链约束
    dimensions:优化尺寸测量

    • 4.5 Barrier

    假如有如下三个控件, a b 的宽度都是不确定的,如果设置 c 在 b 的右侧,c 就会遮挡 a,如果设置 c 在 a 的右侧,b 的长度比 a 长,还是会有遮挡问题。这时用 Barrier 就可以解决问题。
    image.png
    通过设置属性:
    app:barrierDirection 设置屏障位置
    constraint_referenced_ids 加入的控件

    image.png

        <TextView
            android:id="@+id/tv_a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="aaaaaaa"
            android:background="@color/red_FF8EB7"
            android:padding="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            />
    
        <TextView
            android:id="@+id/tv_b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="bbbb"
            android:background="@color/blue_74D3FF"
            android:padding="10dp"
            app:layout_constraintTop_toBottomOf="@+id/tv_a"
            app:layout_constraintStart_toStartOf="parent"
            />
    
        <TextView
            android:id="@+id/tv_c"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ccccccccccc"
            android:background="@color/green_07C0C2"
            android:padding="25dp"
            app:layout_constraintTop_toTopOf="parent"
           app:layout_constraintStart_toEndOf="@id/barrie" />
    
    
        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrie"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="end"
            app:constraint_referenced_ids="tv_a,tv_b"/>
    

    参考

    约束布局ConstraintLayout看这一篇就够了
    ConstraintLayout 用法全解析
    Android ConstraintLayout的使用
    ConstraintLayout 完全解析 快来优化你的布局吧

    展开全文
  • 如果父View是ConstraintLayout约束布局,当修改某个view时候,直接创建ConstraintLayout.LayoutParams会有问题,没办法直接满足需求。 具体使用步骤 ... //mConstraintLayout 是你的当前使用约束布局 s...

    如果父View是ConstraintLayout约束布局,当修改某个view时候,直接创建ConstraintLayout.LayoutParams会有问题,没办法直接满足需求。

    所有使用ConstraintSet绝对没错
    在这里插入图片描述

    具体使用步骤

     ConstraintSet set= new ConstraintSet(); 
     //获取一新的ConstraintLayout
     //mConstraintLayout 是你的当前使用的约束布局
    set.clone(mConstraintLayout);
    //这里是重新设置边距,当然也可以重新设置这个view的任何约束,  参数2的类型,可以点进入方法内部,看源码。
    set.setMargin(R.id.id, 1,Utils.dip2px(20)); 
    set.setMargin(R.id.id, 3,imageTopMare+Utils.dip2px(20));
    //最后一步就是设置新的ConstraintLayout约束 这个必须设置;
    set.applyTo(mConstraintLayout);
    
    

    需要注意的是,当使用ConstraintSet 的时候,你的约束布局里面的所有子view,都必须有个id,不然就会报错 All children of ConstraintLayout must have ids to use ConstraintSet

    展开全文
  • ConstraintLayout 相信大家都不陌生,目前最新版的Android Studio 默认的布局方式就是ConstraintLayout 一些复杂的界面可以使用ConstraintLayout实现而不需要再像以前一样嵌套很多布局,这样能提升性能。所以啊,别...

    ConstraintLayout 相信大家都不陌生,目前最新版的Android Studio 默认的布局方式就是ConstraintLayout

    一些复杂的界面可以使用ConstraintLayout实现而不需要再像以前一样嵌套很多布局,这样能提升性能。

    所以啊,别说了,学习吧…

    一、说明

    这里介绍一些比较难理解的内容,所以如果是初学者有些我这里没有介绍的大家可以先阅读官方文档和一些大神写的帖子:
    然后有些小伙伴就激动了, 官方文档,是英文啊 .,额…..其实吧我觉得那些英文不会太难啦,再说了现在不是有很多xx翻译嘛。
    还有一些同学啊,看完了官方文档,回来就说。我看完就懂了…..出门右转,再见,哼。。
    现在Android Studio 提供可视化操作(拖拖拽拽),郭霖大神写的 ConstraintLayout完全解析 ,写的很明白。
    好了,开始介绍了

    二、相对定位 (Relative positioning)

    属性列表:

    • 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

    看一张官方的图,很好理解
    这里写图片描述

    这里就不一一解释了,拿 layout_constraintLeft_toRightOf来简单介绍一下:
    假如有一个控件 button1 使用 layout_constraintLeft_toRightOf = “@+id/button2” 意思就是button1左边约束于button2的右边(在控件上可以看到button1左边有一条约束线连到button2右边),也可以理解成相对布局的toRightof。

    三、边距(Margins)

    有以下属性:

    • android:layout_marginStart
    • android:layout_marginEnd
    • android:layout_marginLeft
    • android:layout_marginTop
    • android:layout_marginRight
    • android:layout_marginBottom

    使用方法就不多介绍了,注意一点,Margins的值必须是非负的 Dimension( 尺寸值 )

    这里主要介绍 (Margins when connected to a GONE widget),当你对一个 visibility 是View.GONE的控件使用Margin的时候。首先属性有:

    • layout_goneMarginStart
    • layout_goneMarginEnd
    • layout_goneMarginLeft
    • layout_goneMarginTop
    • layout_goneMarginRight
    • layout_goneMarginBottom

    一般这些属性是与上面的Margin正常属性一起使用的,或者说这些属性就是为了防止当你Margin连接的那个控件GONE的时候出现预料之外的事情。
    比如说如下图两个button ,宽度设置为100dp 。

    这里写图片描述

    可以看到B有属性android:layout_marginStart=”32dp” ,A有属性android:layout_marginStart=”16dp” ,如果A此时GONE了,会发生什么呢,现在我为A添加属性 android:visibility=”gone” 。结果如下图

    这里写图片描述
    会发现B移动了,只有MarginStart只有32dp了,这是我们不想看到的。
    其实这种情况主要发生在Java代码编写的时候,而不是直接给个GONE属性(没必要)。
    我们不希望控件A的消失与否影响控件B,这个时候就可以用到 layout_goneMarginStart 了,我们在B属性里加上app:layout_goneMarginStart=”132dp” ,就可以看到B纹丝不动了。( 额 ..这里还是显示32 dp,没有显示成132dp)

    这里写图片描述

    总结一下:其实这些属性就是配合正常的Margin设置属性一起使用,防止某个控件GONE之后影响布局。单独用的话没有意义。
    还有一点,一个控件GONE之后,并不是直接从布局完全消失。从上面的设计图中其实可以看出,GONE之后该控件只是(类似)缩成一个点了,当然margin也是会消失的。
    看下官方的图

    这里写图片描述

    四、偏向(Bias)

    Bias有以下两个属性:

    • layout_constraintHorizontal_bias
    • layout_constraintVertical_bias

    先看张很厉害的图

    这里写图片描述
    惊不惊喜,意不意外,哈哈。。
    这个TextView有下面几条属性:

    • app:layout_constraintBottom_toBottomOf=”parent”
    • app:layout_constraintEnd_toEndOf=”parent”
    • app:layout_constraintStart_toStartOf=”parent”
    • app:layout_constraintTop_toTopOf=”parent”

    这其实是矛盾的,控件左边约束于parent,右边也是约束于parent,那到底是靠左边还是右边呢,上面已经有答案了。我哪也不靠。
    这种情况默认会变成bias,而且默认不写bias的两个属性意味着都等于0.5 即不偏向任何一边,居中。

    现在我给它加上bias属性
    - app:layout_constraintHorizontal_bias=”0.1”
    - app:layout_constraintVertical_bias=”0.05”

    就变成下图所示了

    这里写图片描述

    总结: Bias当控件两边(上下或者左右)都有约束的时候,默认为bias约束,可以使用bias的两个属性来控制偏向哪边。

    五、尺寸限制(Dimensions constraints)

    ConstraintLayout的尺寸限制

    ConstraintLayout自身有以下最大最小尺寸限制:
    - android:minWidth
    - android:minHeight
    - android:maxWidth
    - android:maxHeight

    很好理解就不多解释了,只是注意这是ConstraintLayout的属性。

    控件的尺寸限制

    控件的尺寸可以通过设置属性android:layout_width 和 android:layout_height 来控制,一般有以下三种值:

    • 具体尺寸(如100dp)
    • WRAP_CONTENT 控件的自身大小
    • 0dp ,就是等于”MATCH_CONSTRAINT”

    第一种,第二种就不说了
    说下“0dp”。也就是 MATCH_CONSTRAINT ,它的功能有点像 MATCH_PARENT,但是官方建议使用 MATCH_CONSTRAINT而不要使用 MATCH_PARENT。
    要注意的是控件会和约束控件一样宽(高),并不只是和ConstraintLayout一样宽(高),比如以下情况

    <TextView
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="@+id/textView"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView"/>
    

    这里写图片描述

    可以看到,textView并没有撑满整个屏幕,只是和“hello world !”一样宽而已,因为 “hello world !”控件是它的约束控件。

    六、比例(Ratio)

    可以用比例去定义View的宽高。

    为了做到这一点,需要以下条件

    1. 至少一个约束尺寸设置为0dp(即MATCH_CONSTRAINT)
    2. 为属性layout_constraintDimentionRatio设置比例

    例如:

    <TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="2:1"
    android:text="Hello World !"
    android:textSize="16sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>
    

    比例可以用以下两种方式表示:

    • 浮点数,代表宽高比的比值(如2, 1.5)
    • 宽:高,这种形式(如以上例子)

    上面讲的是宽高 只有一个被设置为0dp , 当然两个都为0dp也是可以的。

    <TextView
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="H,1:1"
    android:text="Hello World !"
    android:textSize="16sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>
    

    宽高都设置为0dp,如果没有设置比例属性,那么应该是撑满整个布局的。可以看到,这里比例设置成了”H,1:1”,控件的宽高比为1:1 。

    理解一下,当只有一个值为0dp的时候,设置比例就是为了控制设置为0dp的高(宽),所以宽高比是以有固定值得为参考。

    如第一个例子,高设置为0dp,宽为自身宽度,所以宽高比(注意,这里的Ratio比例都是 宽:高)比例2:1 意思就可以理解成把高设置为宽的1/2。

    那么问题来了,我宽和高都是0dp,怎么搞。不要捉急,Google就提供了在比例前面加一个字母来说明你要设置 哪个属性,‘W’或者‘H’ 。使用的时候用逗号‘,’与比例之间隔开,如”W,1:1”。

    再看下第二个例子,其实意思就是我要设置高,那自然以宽为基准设置宽高比为1:1,也就是设置高和宽一样的尺寸。

    那假如该例子中,我设置成 “W,1:1”,会发生什么?来看下

    这里写图片描述

    恩?我,我刀呢,。欺负我不懂1:1么 。 好好好,先把刀放下,听我慢慢道来。
    这里呢,设置成 “W,1:1”,意思就是我要设置宽,宽高比为1:1 ,所以自然是以高为基准,然后宽显然不能和高一样的尺寸啊。
    所以就显示成这个样子,因为整个屏幕宽也不可能有和高一样的尺寸。

    换个比例验证一下就很好理解了,把比例改为“W,1:2”,看效果

    这里写图片描述

    总结一下:

    • 首先最重要的 比例都是宽:高 。
    • 如果只有一项为0dp,那么就是以另一项为基准,设置该项的尺寸;
    • 如果两项都为0dp,那么在比例前加‘W’,或者‘H’,来表示设置该项,以另一项为基准。

    七、链条(Chains)

    什么是链条

    通俗的来理解就是把控件和控件之间用链条连接在一起,组成一个类似控件组,一起控制。

    创建链条

    这里我先说下我一开始想创建一个链条的时候是怎么操作的。
    当时我就在可视化上拖拽,想直接把链条拉出来,然后就发现怎么拉都拉不出来链条,当时我郁闷死了。然后我发现链条原理其实就是类似“ 你连我,我连你 ”,然后我又开始拉(有方向了嘛),“ 你连我 ”嗯,可以拉出一条约束,到“我连你”的时候死活拉不上去,因为那个点发出了一条约束,拉不上了。额..好吧。。

    说这个其实就是想说,一些复杂一点的约束,拖拖拽拽很难搞定,还是写xml吧。

    好了,接下来创建链条,其实原理就是我上面说的“你连我,我连你”,所以就很简单了

    <TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="244dp"
    android:text="Hello World !"
    android:textSize="16sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/textView2"
    app:layout_constraintTop_toTopOf="parent" />
    
    <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="244dp"
    android:text="TextView"
    android:textSize="16sp"
    app:layout_constraintEnd_toStartOf="@id/textView"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
    

    这里写图片描述

    两个TextView之间就拉出了一条链条,创建该链条的关键语句

    app:layout_constraintStart_toEndOf=”@+id/textView2”
    app:layout_constraintEnd_toStartOf=”@id/textView”

    链条头

    左右排列的链条链条头就是左边第一个连接链条的控件,如上面例子“TextView”和“Hello World !”, “TextView”就是链条头,同理上下排列就是上面第一个。

    介绍链条头是因为链条的所有属性都应该在链条头设置才有效(特别注意)

    链条样式

    总共有以下5种样式:

    这里写图片描述

    通过设置layout_constraintHorizontal_chainStyle 或 layout_constraintVertical_chainStyle 这两个属性来控制样式
    其实可以设置的值只有3种:

    • spread:对应上图第一种样式Spread Chain
    • spread_inside: 对应上图第二种样式Spread Inside Chain
    • packed: 对应上图第四种样式Packed Chain

    那么怎么设置另外两种样式呢?

    先说下第五种样式Packed Chain with Bias , 首先样式属性设置为packed ,然后把它看成一个控件,添加Bias属性即可,参考上面讲Bias部分

    另外一种,第三种样式,有点熟悉,这不是那个, 那个…

    好吧,其实第三种样式 Weighted Chain ,权重链条,就是跟LinearLayout 的Weight一样的效果。

    首先需要把样式设置为spread或者 spread_inside,也可以不设置,因为默认就是 spread样式。
    然后把控件的宽(高)设置为MATCH_CONSTRAINT(也就是0dp)
    最后就跟LinearLayout一样的设置了,用属性layout_constraintHorizontal_weight 或 layout_constraintVertical_weight 为链条上的每个控件设置权重。

    例子:
    主要属性app:layout_constraintHorizontal_weight=”2” app:layout_constraintHorizontal_weight=”1”

    <TextView
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="244dp"
    android:text="Hello World !"
    android:textSize="16sp"
    app:layout_constraintHorizontal_weight="2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/textView2"
    app:layout_constraintTop_toTopOf="parent" />
    
    <TextView
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="244dp"
    android:text="TextView"
    android:textSize="16sp"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintEnd_toStartOf="@id/textView"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
    

    效果
    这里写图片描述

    中间没设置margin 中间不太好看,但是效果很直观。

    八、辅助线(Guideline)

    Guideline只能用于ConstraintLayout中,是一个工具类,不会被显示,仅仅用于辅助布局。

    它可以是horizontal或者 vertical的。(例如:android:orientation=”vertical”)

    • vertical的Guideline宽度为零,高度为ConstraintLayout的高度
    • horizontal的Guideline高度为零,宽度为ConstraintLayout的高度

    定位Guideline有三种方式:

    • 指定距离左侧或顶部的固定距离(layout_constraintGuide_begin)
    • 指定距离右侧或底部的固定距离(layout_constraintGuide_end)
    • 指定在父控件中的宽度或高度的百分比(layout_constraintGuide_percent)

    还是看例子吧,很简单

    这里写图片描述

    <TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="100dp"
    android:layout_marginStart="50dp"
    android:text="Hello World !"
    android:textSize="16sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline"/>
    
    <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="200dp"
    android:layout_marginEnd="32dp"
    android:text="TextView"
    android:textSize="16sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/guideline" />
    
    <android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_end="200dp" />
    

    最后

    好吧,到这里就结束了。。但是由于版本一直都在更新,所以多去看看官方文档

    展开全文
  • 第一次使用约束布局,很不习惯。对照教程学习一下使用,在这里记录自己的笔记。 显示所有约束 删除选中的约束 水平的约束只能建立在左右,不能建立在上下 清除所有约束 为什么布局会跑到左上角?因为不存在任何...

    第一次使用约束布局,很不习惯。对照教程学习一下使用,在这里记录自己的笔记。
    在这里插入图片描述
    显示所有约束
    在这里插入图片描述
    删除选中的约束
    在这里插入图片描述
    水平的约束只能建立在左右,不能建立在上下
    在这里插入图片描述
    清除所有约束
    在这里插入图片描述
    为什么布局会跑到左上角?因为不存在任何约束时,布局默认在左上角。所以每个布局至少需要一个水平和一个垂直约束。
    在这里插入图片描述
    可以通过layout_marginTop、layout_marginBottom、layout_marginLeft、layout_marginRight调节距离上下左右的距离
    在这里插入图片描述
    自动在四周建立约束
    在这里插入图片描述
    调节位置的比例
    在这里插入图片描述
    垂直方向同样可以这样调节
    在这里插入图片描述
    这里可以调节布局的长度、高度
    在这里插入图片描述
    这里可以调节距离边界的距离
    在这里插入图片描述
    接下来创建的布局距离边界的距离,但并不会改变当前已经创建的约束
    在这里插入图片描述
    在这里插入图片描述
    新建布局时保证整齐
    在这里插入图片描述
    与布局和四周建立约束
    在这里插入图片描述
    与四周建立约束
    在这里插入图片描述
    在所有布局之间建立约束
    在这里插入图片描述
    在布局之间建立约束
    下接Android Studio ConstraintLayout约束布局使用学习笔记(二)参数使用

    展开全文
  • 当水平上不受约束布局,选择wrap_constraint宽度自适应大小,则会扩大到与屏幕同宽 使用代码也可以起到同样的效果,wrap自适应大小 spread在约束条件下尽可能大 app:layout_constraintWidth_max根据约束限制...
  • Android ConstraintLayout 约束布局详解

    万次阅读 多人点赞 2017-03-17 19:53:38
    本文出自【赵彦军的博客】 前言在2016年的Google I/O大会上 , Google 发布了Android Studio 2.2预览版,同时也发布了Android 新的布局方案 ConstraintLayout , 但是最近的一年也没有大规模的使用。2017年
  • android 约束 布局In this tutorial, we’ll be implementing Constraint Layout ... 在本教程中,我们将在Android应用程序中实现约束布局动画。 约束布局动画 (Constraint Layout Animation) We can create beaut...
  • Android约束布局ConstraintLayout使用完全解析 Android约束布局ConstraintLayout使用完全解析
  • android约束布局

    千次阅读 2018-09-03 20:09:48
    为什么要使用约束布局: ConstraintLayout还有一个优点,它可以有效地解决布局嵌套过多的问题。 实现的布局效果类似于相对布局但比相对布局性能更高。 盗个别人对比的图: 从图中我们可以看出性能上约束布局比...
  • ConstraintLayout约束布局简单使用

    千次阅读 2019-07-04 09:35:27
    文章目录布局介绍开始使用androidx...9的Android机器上使用,更主要的是约束布局可以尽情地让你发挥拖拽的本领,在界面上添加约束,抛开繁琐的xml布局,当然它也可以xml进行布局 开始使用 androidx配置 在Android ...
  • 约束布局ConstraintLayout

    2020-04-24 11:11:01
    这篇文章写的很详细: https://www.jianshu.com/p/17ec9bd6ca8a 推荐大家以后少线性布局和相对布局,多用约束布局
  • 约束布局(ContraintLayout)是相对布局的升级版,配合最新的布局编辑器1Android Studio从2.3版本开始在布局编辑器中支持约束布局,写作本书时Android Studio 2.3已经发布,创建界面的默认布局管理器已经变为约束布局...
  • Android 约束布局

    2017-08-17 10:16:06
    闲来无事,干点啥好,突然想起了约束布局,学习一下吧 1.学习约束布局之前 所有布局靠xml手撸… 包含自定义控件,复杂布局处理 优点: 1. 直观,方便 2. 多年习惯 缺点: 1. 有些蛋疼布局会导致嵌套严重(存在过度绘制)...
  • 约束布局简单使用

    2019-04-03 14:07:20
    要在项目中使用 ConstraintLayout,我们需要在 build.gradle 中添加依赖(新版 AndroidStudio 会默认添加): implementation '... 创建布局 =其实都知道 约束布局 根布局就 ConstraintLayout: <androi...
  • Android约束布局

    2019-07-09 15:53:54
    Android约束布局问世已经有一段时间了,对于最初的一些开发者来说,早已习惯了相对布局或线性布局的使用,基本上可以满足日常开发的需求。但是这样一来,约束布局不就没有它存在的意义了吗。 从谷歌官方数据来看,...
  • Android约束布局ConstraintLayout的使用

    万次阅读 2018-12-21 16:31:12
    Android约束布局ConstraintLayout的基本使用 约束布局ConstraintLayout面世已有很长一段时间了,但我一直没有关注这个Android 中继五大布局后的新布局的使用。近日在网友的讨论的强烈推荐下,尝试了ConstraintLayout...
  • ConstraintLayout约束布局
  • android 约束 布局Creating a responsive UI in Native Android with nested view groups has always been a challenge for the native android apps developer community. 在本机Android中使用嵌套视图组创建响应式...
  • 布局优化是性能优化的一个方向点,包括了根据需求应该选用哪种布局容器、ViewStub懒加载,如何减少布局层级等,今天我们要探讨的就是如何使用ConstraintLayout来优化我们的布局层级。概述.png提出问题为什么要这个...
  • AndroidStudio3.0之前默认的根布局是RelativeLayout,但是3.0之后默认的根布局是ConstraintLayout(约束布局),它作为一款强大的调整View位置和大小的ViewGroup被Google所推荐,ConstraintLayout能够以支持库的形式...
  • 其中线性布局、相对布局平时更常用,这里学习另外一种常用布局——约束布局(constraintlayout) 约束布局特点 1.前面介绍的布局,虽然在AS中可以拖拽控件实现,但写代码更加方便,但是约束布局更加倾向通过拖拽...
  • android ConstraintLayout约束布局使用

    千次阅读 2018-06-28 12:15:04
    Google I/O 2016上,Android团队为开发者带来了ConstraintLayout,一种构建于弹性Constraints(约束)系统的新型Android Layout,约束布局允许你在相同视图层级中(不是相互层叠的视图组合)制作大而复杂的布局。...
  • 约束布局ConstraintLayout  这种布局方式出现已经有一段时间了,刚出现的时候一直以为这种布局只是针对拖拽使用的布局,最近在新项目里看到了这种布局,又重新学习了这种布局,才发现以前真的是图样图森破啊,这种...
  • Google其实很早就推出了约束布局,主要是为了减少布局嵌套,优化布局性能和渲染时间,同时又有一些丰富的属性,如角度定位,那么我们很有必要了解并去使用它。 约束布局ConstraintLayout 是一个View...
  • 约束布局ConstraintLayout加快布局速度

    千次阅读 2016-12-16 10:43:48
    Android Studio2.2更新布局设计器,同时,引人了约束布局ConstraintLayout。简单来说,可以把它看做是相对布局的升级版本,但是区别与相对布局更加强调约束。何为约束,即控件之间的关系。它能让你的布局更加扁平化...
  • 使用constraintlayout约束布局的注意事项 约束布局作为Google官方力推的新型布局方式 , 通过简单的拖拉拽便能实现相对复杂的页面布局。但在国内,似乎大部分人都不愿意使用这种看起来简便的一种新型布局方式。笔者...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,530
精华内容 19,412
关键字:

约束布局怎么用