快速说明

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

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 说明和例子的更多相关文章

android JNI处理图片的例子
android JNI处理图片的例子原地址:http://blog.csdn.net/xjwangliang/article/details/7065670 <pre class=" ...
Android ConstraintLayout详解（from jianshu）
Android ConstraintLayout详解 https://www.jianshu.com/p/a8b49ff64cd3 1. 概述在本篇文章中,你会学习到有关Constraint ...
Android ConstraintLayout约束控件链接整理
Android新特性介绍,ConstraintLayout完全解析探索Android ConstraintLayout布局了解使用Android ConstraintLayout
android ConstraintLayout布局
解析ConstraintLayout的性能优势 Android新特性介绍,ConstraintLayout完全解析 1.子控件的位置约束属性: layout_constraintRight_toLef ...
Android ConstraintLayout 构建自适应界面
原文链接使用 ConstraintLayout 构建自适应界面 ConstraintLayout 可让您使用扁平视图层次结构(无嵌套视图组)创建复杂的大型布局.它与 RelativeLayout 相 ...
Base64编解码Android和ios的例子,补充JNI中的例子
1.在Android中java层提供了工具类:android.util.Base64; 里面都是静态方法,方便直接使用: 使用方法如下: // Base64 编码: byte [] encode = ...
将android中的sample例子到eclipse中
SDK中带有很多的例子,那么我们怎么样导入到eclipse中呢?方法很简单,如下: 1. 新建android工程,选择Create project from existing sample, 2. 选 ...
Android ViewFlow的一个例子
完成这个例子的步骤: 1.下载ViewFlow的源码,然后将类ViewFlow放在自己的工程的src的某个包下. 2.下载的源码里有2个工程view flow,viewflow-example.将vi ...
Android ConstraintLayout 布局警告
使用 ConstraintLayout 布局出现警告: 此视图不受垂直约束.在运行时,除非添加垂直约束,否则它将跳转到左侧解决办法: 从Android Studio v3及更高版本开始,从下拉列表中 ...

随机推荐

keras计算指定层的输出
import keras model = keras.models.Sequential([ keras.layers.Dense(4, activation='relu', input_dim=1, ...
洛谷 P4933 大师
题面 (实名推荐:本题的出题人小哥哥打球暴帅哦!(APIO/CTSC/WC的时候一起打过球w,而且大学在我隔壁喔) ) 没仔细看数据范围的时候真是摸不着头脑...还以为要 O(N^2) dp 爆锤.. ...
HGOI 20191031am 题解
Problem A Divisors 给出$m$个不同的正整数$a_i$,设数论函数 $f(k) = \sum\limits_{i = 1}^{n} [(\sum\limits_{j = 1}^ ...
SpringMVC——数据乱码问题
乱码解决: 1.controller传递数据给页面 :在RequestMapping当中指定produces="text/json;charset=utf-8" 2.Control ...
Django-视图函数/模板渲染/过滤器
一.Django的视图函数一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个 ...
ASCII码，unicode码，UTF8编码，UTF16编码\ud842\udfb7
汉字转为unicode编码怎么实现? "
redis基础操作概念等笔记
Redis常用配置 daemonize ->是否是后台进程 port ->对外端口 logfile ->Redis 系统日志 dir ->Redis 工作目录 Redis的链接 ...
03 HTTP协议与HTTPS协议
一.HTTP协议 1.官方概念: HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文 ...
10分钟梳理MySQL核心知识点
数据库的使用,是开发人员的基本功,对它掌握越清晰越深入,你能做的事情就越多. 做业务,要懂基本的SQL语句:做性能优化,要懂索引,懂引擎:做分库分表,要懂主从,懂读写分离... 今天我们用10分钟,重 ...
VSCode查询快捷键对应功能技巧

Android ConstraintLayout 说明和例子

快速说明

例子

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

随机推荐

热门专题