快速说明

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

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. linux系统编程--进程间通信

    IPC方法 Linux环境下,进程地址空间相互独立,每个进程各自有不同的用户地址空间.任何一个进程的全局变量在另一个进程中都看不到,所以进程和进程之间不能相互访问, 要交换数据必须通过内核,在内核中开 ...

  2. 蓝桥历年试题 DNA对比

    [编程题](满分27分) 脱氧核糖核酸即常说的DNA,是一类带有遗传信息的生物大分子.它由4种主要的脱氧核苷酸(dAMP.dGMP.dCMT和dTMP)通过磷酸二酯键连接而成.这4种核苷酸可以分别记为 ...

  3. 【集训队作业2018】count

    CSP后第一发Blog. 这道题没有一下子过掉,开始还推出了错的结论.在错误的生成函数里绕了好久-- 很显然的转笛卡尔树,一个笛卡尔树对应一种序列.只要考虑一个笛卡尔树是否合法. 贪心地填数发现,从根 ...

  4. 两个int值相乘超过int最大值

    System.out.println(100000000*1000 ); //输出结果是:1215752192 先将100000000*1000 的结果转化为二进制: 10111 01001000 0 ...

  5. python排序之冒泡排序

    def sort(list): for i in range(len(list)): for j in range(len(list) - i - 1): if list[j] < list[j ...

  6. 【Spark机器学习速成宝典】推荐引擎——协同过滤

    目录 推荐模型的分类 ALS交替最小二乘算法:显式矩阵分解 Spark Python代码:显式矩阵分解 ALS交替最小二乘算法:隐式矩阵分解 Spark Python代码:隐式矩阵分解 推荐模型的分类 ...

  7. python获得坐标系信息

    # -*- coding: cp936 -*- ############################################################# import arcpy i ...

  8. other备忘

    wps CONCATENATE 只是因为格式 设置成了文本,把这列 格式 设置成 常规,双击下 结果就出来了 https://zhidao.baidu.com/question/21208668961 ...

  9. DOS 获取硬盘序列号

    DOS命令行操作: 使用diskpart命令,Win+R键运行cmd,进入命令行界面:       1.diskpart       2.list disk 查看有几块硬盘       3.selec ...

  10. C++中重载、重定义、重写概念辨析

    重载:函数名相同,函数的参数个数.参数类型或参数顺序三者中必须至少有一种不同.函数返回值的类型可以相同,也可以不相同.发生在一个类内部. 重定义:也叫做隐藏.覆盖,子类重新定义父类中有相同名称的非虚函 ...