快速说明

当我们点击一个按钮时，显示效果如下

Baseline的显示需要右键该控件，然后

约束类型

尺寸约束

实心方块，用来调整组件的大小

边界约束

空心圆圈，建立组件之间，组件和parent的约束关系。

基准线约束

是让两个带有文本属性的组件对齐的。

清除约束

点击清除所有控件的约束，

右键清除所选控件的约束

约束实例

点击打开自动约束

点击进行自动约束

ViewInspector

1.盒子四周的线，代表Margin的值

2.数字圆圈的两个bar，是控制相对位置的比例的。

 盒子的线 含义

Fixed

写具体的大小数值

Wrap Content

 Match Constraint

例子

效果如下

WrapContent，和parent左右对齐，距离parent的top为20dp

    <TextView

        android:id="@+id/textView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="20dp"

        android:text="X System 用户登录"

        android:textSize="20sp"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

同理，ImageView 和parent左右对齐，他的top距离上面textview的距离为52dp

    <ImageView

        android:id="@+id/imageView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="52dp"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_bias="0.498"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/textView"

        app:srcCompat="@drawable/ic_launcher_background" />

    <TextView

        android:id="@+id/textView3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="16dp"

        android:layout_marginTop="32dp"

        android:text="用户名"

        android:textSize="18sp"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <TextView

        android:id="@+id/textView4"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="16dp"

        android:layout_marginTop="16dp"

        android:text="密码"

        android:textSize="18sp"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/textView3" />

文本输入框，宽度设置为0，适应约束类型

左右和parent对齐，留有margin,

使用了Baseline和左侧的文本框对齐

    <EditText

        android:id="@+id/editText7"

        android:layout_width="0dp"

        android:layout_height="40dp"

        android:layout_marginStart="100dp"

        android:layout_marginEnd="16dp"

        android:ems="10"

        android:hint="输入用户名"

        android:inputType="textPersonName"

        android:textSize="14sp"

        app:layout_constraintBaseline_toBaselineOf="@+id/textView3"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent" />

    <EditText

        android:id="@+id/editText8"

        android:layout_width="0dp"

        android:layout_height="40dp"

        android:layout_marginStart="100dp"

        android:layout_marginEnd="16dp"

        android:ems="10"

        android:hint="输入密码"

        android:inputType="textPassword"

        android:textSize="14sp"

        app:layout_constraintBaseline_toBaselineOf="@+id/textView4"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent" />

先放置一个RadioGroup,为了放置radiobutton,可以先设置宽和高，然后拖入radiobutton,

注意RadioGroup默认是Vertic的这里改成Horizontal。第二个button设置下

layout_marginLeft以便分开
    <RadioGroup

        android:id="@+id/radioGroup"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="60dp"

        android:orientation="horizontal"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_bias="0.498"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/editText8">

        <RadioButton

            android:id="@+id/radioButton7"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:checked="true"

            android:text="登录域A" />

        <RadioButton

            android:id="@+id/radioButton8"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginLeft="16dp"

            android:layout_weight="1"

            android:text="登录域B" />

    </RadioGroup>

    <Button

        android:id="@+id/button"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_marginStart="16dp"

        android:layout_marginTop="36dp"

        android:layout_marginEnd="16dp"

        android:textSize="20dp"

        android:textColor="@color/pureWhite"

        android:text="登  录"

        android:theme="@style/GenericButtonStyle"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_bias="1.0"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/radioGroup" />

注意：为了有点击效果，不能简单的设置Button的背景色。

这里使用了theme,在values的style里面添加

    <style name="GenericButtonStyle" parent="ThemeOverlay.AppCompat">

        <item name="colorButtonNormal">@color/colorPrimary</item>

    </style>

全部代码

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.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">

    <TextView

        android:id="@+id/textView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="20dp"

        android:text="X System 用户登录"

        android:textSize="20sp"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

    <ImageView

        android:id="@+id/imageView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="52dp"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_bias="0.498"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/textView"

        app:srcCompat="@drawable/ic_launcher_background" />

    <TextView

        android:id="@+id/textView3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="16dp"

        android:layout_marginTop="32dp"

        android:text="用户名"

        android:textSize="18sp"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <TextView

        android:id="@+id/textView4"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="16dp"

        android:layout_marginTop="16dp"

        android:text="密码"

        android:textSize="18sp"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <EditText

        android:id="@+id/editText7"

        android:layout_width="0dp"

        android:layout_height="40dp"

        android:layout_marginStart="100dp"

        android:layout_marginEnd="16dp"

        android:ems="10"

        android:hint="输入用户名"

        android:inputType="textPersonName"

        android:textSize="14sp"

        app:layout_constraintBaseline_toBaselineOf="@+id/textView3"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent" />

    <EditText

        android:id="@+id/editText8"

        android:layout_width="0dp"

        android:layout_height="40dp"

        android:layout_marginStart="100dp"

        android:layout_marginEnd="16dp"

        android:ems="10"

        android:hint="输入密码"

        android:inputType="textPassword"

        android:textSize="14sp"

        app:layout_constraintBaseline_toBaselineOf="@+id/textView4"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent" />

    <RadioGroup

        android:id="@+id/radioGroup"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="60dp"

        android:orientation="horizontal"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_bias="0.498"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/editText8">

        <RadioButton

            android:id="@+id/radioButton7"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:checked="true"

            android:text="登录域A" />

        <RadioButton

            android:id="@+id/radioButton8"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginLeft="16dp"

            android:layout_weight="1"

            android:text="登录域B" />

    </RadioGroup>

    <Button

        android:id="@+id/button"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_marginStart="16dp"

        android:layout_marginTop="36dp"

        android:layout_marginEnd="16dp"

        android:textSize="20dp"

        android:textColor="@color/pureWhite"

        android:text="登  录"

        android:theme="@style/GenericButtonStyle"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_bias="1.0"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/radioGroup" />

</androidx.constraintlayout.widget.ConstraintLayout>

Android ConstraintLayout 说明和例子的更多相关文章

  1. android JNI处理图片的例子

    android JNI处理图片的例子 原地址:http://blog.csdn.net/xjwangliang/article/details/7065670 <pre class=" ...

  2. Android ConstraintLayout详解（from jianshu）

    Android ConstraintLayout详解 https://www.jianshu.com/p/a8b49ff64cd3 1. 概述     在本篇文章中,你会学习到有关Constraint ...

  3. Android ConstraintLayout约束控件链接整理

    Android新特性介绍,ConstraintLayout完全解析 探索Android ConstraintLayout布局 了解使用Android ConstraintLayout

  4. android ConstraintLayout布局

    解析ConstraintLayout的性能优势 Android新特性介绍,ConstraintLayout完全解析 1.子控件的位置约束属性: layout_constraintRight_toLef ...

  5. Android ConstraintLayout 构建自适应界面

    原文链接 使用 ConstraintLayout 构建自适应界面 ConstraintLayout 可让您使用扁平视图层次结构(无嵌套视图组)创建复杂的大型布局.它与 RelativeLayout 相 ...

  6. Base64编解码Android和ios的例子,补充JNI中的例子

    1.在Android中java层提供了工具类:android.util.Base64; 里面都是静态方法,方便直接使用: 使用方法如下: // Base64 编码: byte [] encode =  ...

  7. 将android中的sample例子到eclipse中

    SDK中带有很多的例子,那么我们怎么样导入到eclipse中呢?方法很简单,如下: 1. 新建android工程,选择Create project from existing sample, 2. 选 ...

  8. Android ViewFlow的一个例子

    完成这个例子的步骤: 1.下载ViewFlow的源码,然后将类ViewFlow放在自己的工程的src的某个包下. 2.下载的源码里有2个工程view flow,viewflow-example.将vi ...

  9. Android ConstraintLayout 布局警告

    使用 ConstraintLayout 布局出现警告: 此视图不受垂直约束.在运行时,除非添加垂直约束,否则它将跳转到左侧 解决办法: 从Android Studio v3及更高版本开始,从下拉列表中 ...

随机推荐

  1. 题解 [51nod1673] 树有几多愁

    题面 解析 这题思路挺秒啊. 本麻瓜终于找了道好题了(还成功把ztlztl大仙拖下水了) 看到叶子节点数<=20就应该是状压啊. 然而DP要怎么写啊? 首先,考虑到编号肯定是从下往上一次增大的, ...

  2. 使用yum命令出错：SyntaxError: invalid syntax 由于用户取消而退出

    详见: https://blog.csdn.net/qq_24880013/article/details/90731617 必须修改的两个yum配置文件: 因为yum使用python2,因此替换为p ...

  3. linux 安装go环境

    https://golang.google.cn/dl/ 进入这个地址选择一个版本下载 wget https://dl.google.com/go/go1.13.4.linux-amd64.tar.g ...

  4. locate/find

    locate 从数据库 (/var/lib/mlocate/mlocate.db) 查找命令,使用updatedb更新库. 类似于数据库的索引建立,在首次简历索引的时候,很耗费资源,在建立完成后,查询 ...

  5. HGOI 20191103am 题解

    Problem A number 使用一个$2^k$数集中每个元素的和表示数$n$,不同集合的数目有多少? 对于$100\%$的数据满足$1 \leq n \leq 10^6$ Solution : ...

  6. 「BZOJ 5161」最长上升子序列「状压DP」

    题意 求一个\(1\sim n\)的排列LIS的期望长度,\(n\leq 28\) 题解 考虑朴素的LIS:\(f[i] = min(f[j]) + 1\) 记\(mx[i]\)为\(f\)的前缀最大 ...

  7. 【线性代数】1-2:点乘和长度(Dot Products and Length)

    title: [线性代数]1-2:点乘和长度(Dot Products and Length) toc: true categories: Mathematic Linear Algebra date ...

  8. springboot 生产环境与开发环境配置

    通过修改yml文件里的active属性,prod(生产环境) 与 dev (开发环境)

  9. java 网络文件下载（并命中文名）

    public void download(HttpServletRequest request, HttpServletResponse response){ //获取服务器文件 String fil ...

  10. 使用vim编辑python智能提示

    一.vim python自动补全插件:pydiction 可以实现下面python代码的自动补全: 1.简单python关键词补全 2.python 函数补全带括号 3.python 模块补全 4.p ...