快速说明

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

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. 题解 [SDOI2010] 大陆争霸

    题面 解析 这题似乎不是那么难啊 首先,显而易见, 如果要摧毁一个城市,必须要满足两个条件: 机器人摧毁了保护它的城市. 机器人到达了这个城市. 而这两个条件可以同时进行(毕竟有无数机器人) 那么显然 ...

  2. hdu 6141 I am your Father!

    题 OvO http://acm.hdu.edu.cn/showproblem.php?pid=6141 (2017 Multi-University Training Contest - Team ...

  3. Python序列构成的数组

    1.内置序列类型 容器序列:list,tuple,collections.deque (能存放不同类型) 扁平序列:str,bytes,bytearray,memoryview,array.array ...

  4. PHP mysqli_fetch_field_direct() 函数

    返回结果集中某个单一字段(列)的 meta-data,并输出字段名称.表格和最大长度: mysqli_fetch_field_direct(result,fieldnr); 参数 描述 result ...

  5. .net上传整个文件夹

    ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...

  6. php+文件分块上传

    PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...

  7. java new一个对象的过程中发生了什么

    java在new一个对象的时候,会先查看对象所属的类有没有被加载到内存,如果没有的话,就会先通过类的全限定名来加载.加载并初始化类完成后,再进行对象的创建工作. 我们先假设是第一次使用该类,这样的话n ...

  8. mac使用brew安装mysql报RROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

    使用mac安装mysql安装完后运行 mysql -uroot -p 报了 ERROR 2002 (HY000): Can't connect to local MySQL server throug ...

  9. 调用七牛云存储文件，返回url

    文档地址:https://developer.qiniu.com/kodo/sdk/1283/javascript#2 npm引入 npm install qiniu-js 例子: var obser ...

  10. jQuery属性操作之html属性操作

    jQuery的属性操作, 是对html文档中的属性进行读取.设置和移除操作.比如,attr(). removeAttr(). 1. attr() attr()可以设置属性值或者返回被选元素的属性值 1 ...