目录

安卓学习-之-约束布局

安卓学习 之 约束布局

约束布局:

重要属性:

app:layout_constraintBottom_toBottomOf     位置设置 (约束当前view的底部位置) app:layout_constraintVertical_bias                偏移量设置       (垂直偏移量)

下面就来新建一个布局文件:

https://i-blog.csdnimg.cn/direct/5e74e967d6f54069b7c7ef289f78b259.png

为新布局文件取名为:constraint_layout

这个选择的包名有点长,但不能错

https://i-blog.csdnimg.cn/direct/4d04a5446851448295268aa03dac67a2.png

生成的布局文件中的包名也是这么长的:

https://i-blog.csdnimg.cn/direct/f7e318764ebd49a7b6eeddf80e387fb8.png

下面来看看代码吧:


<?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"
    android:background="#FF0000">

    <!--
    app:layout_constraint方位_to方位of="?" :
        1.方位2.引用其他控件id 当前控件的某个方位和另一个参照物的某个方位对齐
            app:layout_constraintLeft_toLeftof      //我的左侧在参照物的左侧
            app:Layout_constraintRight_toRightof    //我的右侧在参照物的右侧
            app:layout_constraintTop_toTopOf        //我的顶侧在参照物的顶侧
            app:Layout_constraintBottom_toBottomof  //我的底侧在参照物的底侧
            app:layout_constraintstartitoStartof    //我的左侧在参照物的左侧
            app:layout_constraintEnd_toEndof        //我的右侧在参照物的右侧
        2:当前控件的A侧在参照物的B侧
            app:layout_constraintLeft_toRightof   //我的左侧在参照物的右侧
            app:layout_constraintRight_toLeftof   //我的右侧在参照物的左侧
            app:layout_constraintTop_toBottomOf   //我的上侧在参照物的底侧
            app:layout_constraintBottom_toTopof   //我的底侧在参照物的顶侧
            app:layout_constraintstart_toEndof    //我的左侧在参照物的右侧
            app:layout_constraintEnd_toStartof    //我的右侧在参照物的左侧
    -->
    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="红包"
        android:textColor="#f6d5a8"
        android:textSize="22sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="<返回"
        android:textColor="#f6d5a8"
        android:textSize="22sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="红包记录"
        android:textColor="#f6d5a8"
        android:textSize="22sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="330dp"
        android:layout_height="60dp"
        android:background="#f6d5a8"
        android:text="一字千金红包"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.53"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="330dp"
        android:layout_height="60dp"
        android:layout_marginBottom="15dp"
        android:background="#f6d5a8"
        android:text="普通红包"
        android:textSize="20sp"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button3"
        android:layout_width="330dp"
        android:layout_height="60dp"
        android:layout_marginBottom="15dp"
        android:background="#f6d5a8"
        android:text="口令红包"
        android:textSize="20sp"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="330dp"
        android:layout_height="60dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button"
        app:layout_constraintVertical_bias="0.443">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:hint="输口令、领红包" />

        <TextView
            android:layout_width="90dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="确定"
            android:textColor="#cccccc"
            android:textSize="26dp" />


    </LinearLayout>

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="口令红包规则"
        android:textSize="18sp"
        android:textColor="#f6d5a8"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout" />


</androidx.constraintlayout.widget.ConstraintLayout>

看看最终效果:

https://i-blog.csdnimg.cn/direct/73f904e5a7434ff2b9076bd869dab905.png

其实这个界面都是可以用拖拽来布局完成的,具体的步骤为1、:

https://i-blog.csdnimg.cn/direct/ba3076a1918d4ad8ae198186136ca466.png

2、把需要的控件拖拽到预览框内就可以了:

https://i-blog.csdnimg.cn/direct/695a3faf31a7425f86b4554b268c127c.png

这样拖拽后,代码会自动生成的,哪里需要细致的调节再在代码中修改:

https://i-blog.csdnimg.cn/direct/d0094e72db3d42d8b323c87c48ae39f6.png

右侧的属性菜单中关于这个控件的所有属性都有,直接修改就好了:

https://i-blog.csdnimg.cn/direct/8cfa8475ed68405ba12fadbfa89a2e20.png

这个可视化的好处是:可以快速的创建界面,样式一目了然。