Android ConstraintLayout 說明和例子

時間 2019-11-16

標籤 android constraintlayout 明和例子欄目 Android 简体版

原文原文鏈接

快速說明

當咱們點擊一個按鈕時，顯示效果以下android

Baseline的顯示須要右鍵該控件，而後app

約束類型ide

尺寸約束spa

實心方塊，用來調整組件的大小3d

邊界約束code

空心圓圈，創建組件之間，組件和parent的約束關係。orm

基準線約束xml

是讓兩個帶有文本屬性的組件對齊的。blog

清除約束圖片

點擊清除全部控件的約束，

右鍵清除所選控件的約束

約束實例

點擊打開自動約束

點擊進行自動約束

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

相關標籤/搜索

constraintlayout+radiogroup

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。