zoukankan      html  css  js  c++  java
  • Android ConstraintLayout 说明和例子

    快速说明

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

    这里写图片描述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>
    View Code
  • 相关阅读:
    Android中的Handler, Looper, MessageQueue和Thread
    ANR程序无响应原因及应对办法
    避免内存泄露的一些简单方法
    android内存泄露及OOM介绍
    listview异步加载图片优化
    利用convertView及viewHolder优化Adapter
    Sqlite介绍及其语句
    关于单页面和传统页面跳转的思考
    快速入门Vue
    JS编码
  • 原文地址:https://www.cnblogs.com/noigel/p/11690265.html
Copyright © 2011-2022 走看看