Android Studio开发之 ConstraintLayout布局个人经典Demo

这个布局，个人觉得挺好的，以后需要直接回去copy。谨以此备忘！

直接附上xml文件源代码，不废话咯。

<?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"
    tools:context=".MainActivity">

    <!-- 左上角 -->
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/NULL_USE"
            android:text="庸"
            android:visibility="invisible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/btn_up"
            android:text="北"
            android:layout_toRightOf="@+id/NULL_USE"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_center"
            android:text="中"
            android:layout_below="@+id/btn_up"
            android:layout_alignLeft="@+id/btn_up"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_left"
            android:text="西"
            android:layout_toLeftOf="@+id/btn_center"
            android:layout_alignTop="@+id/btn_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_right"
            android:text="东"
            android:layout_toRightOf="@+id/btn_center"
            android:layout_alignTop="@+id/btn_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_down"
            android:text="南"
            android:layout_below="@+id/btn_center"
            android:layout_alignLeft="@+id/btn_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/NULL_USE2"
            android:text="庸"
            android:visibility="invisible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/btn_up2"
            android:text="北"
            android:layout_toRightOf="@+id/NULL_USE2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_center2"
            android:text="中"
            android:layout_below="@+id/btn_up2"
            android:layout_alignLeft="@+id/btn_up2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_left2"
            android:text="西"
            android:layout_toLeftOf="@+id/btn_center2"
            android:layout_alignTop="@+id/btn_center2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_right2"
            android:text="东"
            android:layout_toRightOf="@+id/btn_center2"
            android:layout_alignTop="@+id/btn_center2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_down2"
            android:text="南"
            android:layout_below="@+id/btn_center2"
            android:layout_alignLeft="@+id/btn_center2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </RelativeLayout>


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <Button
            android:id="@+id/NULL_USE3"
            android:text="庸"
            android:visibility="invisible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/btn_up3"
            android:text="北"
            android:layout_toRightOf="@+id/NULL_USE3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_center3"
            android:text="中"
            android:layout_below="@+id/btn_up3"
            android:layout_alignLeft="@+id/btn_up3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_left3"
            android:text="西"
            android:layout_toLeftOf="@+id/btn_center3"
            android:layout_alignTop="@+id/btn_center3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_right3"
            android:text="东"
            android:layout_toRightOf="@+id/btn_center3"
            android:layout_alignTop="@+id/btn_center3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_down3"
            android:text="南"
            android:layout_below="@+id/btn_center3"
            android:layout_alignLeft="@+id/btn_center3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </RelativeLayout>


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <Button
            android:id="@+id/NULL_USE4"
            android:text="庸"
            android:visibility="invisible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/btn_up4"
            android:text="北"
            android:layout_toRightOf="@+id/NULL_USE4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_center4"
            android:text="中"
            android:layout_below="@+id/btn_up4"
            android:layout_alignLeft="@+id/btn_up4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_left4"
            android:text="西"
            android:layout_toLeftOf="@+id/btn_center4"
            android:layout_alignTop="@+id/btn_center4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_right4"
            android:text="东"
            android:layout_toRightOf="@+id/btn_center4"
            android:layout_alignTop="@+id/btn_center4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_down4"
            android:text="南"
            android:layout_below="@+id/btn_center4"
            android:layout_alignLeft="@+id/btn_center4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </RelativeLayout>


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf= "parent">

        <Button
            android:id="@+id/NULL_USE5"
            android:text="庸"
            android:visibility="invisible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/btn_up5"
            android:text="北"
            android:layout_toRightOf="@+id/NULL_USE5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_center5"
            android:text="中"
            android:layout_below="@+id/btn_up5"
            android:layout_alignLeft="@+id/btn_up5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_left5"
            android:text="西"
            android:layout_toLeftOf="@+id/btn_center5"
            android:layout_alignTop="@+id/btn_center5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_right5"
            android:text="东"
            android:layout_toRightOf="@+id/btn_center5"
            android:layout_alignTop="@+id/btn_center5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_down5"
            android:text="南"
            android:layout_below="@+id/btn_center5"
            android:layout_alignLeft="@+id/btn_center5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <Button
            android:id="@+id/NULL_USE6"
            android:text="庸"
            android:visibility="invisible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/btn_up6"
            android:text="北"
            android:layout_toRightOf="@+id/NULL_USE6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_center6"
            android:text="中"
            android:layout_below="@+id/btn_up6"
            android:layout_alignLeft="@+id/btn_up6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_left6"
            android:text="西"
            android:layout_toLeftOf="@+id/btn_center6"
            android:layout_alignTop="@+id/btn_center6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_right6"
            android:text="东"
            android:layout_toRightOf="@+id/btn_center6"
            android:layout_alignTop="@+id/btn_center6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_down6"
            android:text="南"
            android:layout_below="@+id/btn_center6"
            android:layout_alignLeft="@+id/btn_center6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent">

        <Button
            android:id="@+id/NULL_USE7"
            android:text="庸"
            android:visibility="invisible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/btn_up7"
            android:text="北"
            android:layout_toRightOf="@+id/NULL_USE7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_center7"
            android:text="中"
            android:layout_below="@+id/btn_up7"
            android:layout_alignLeft="@+id/btn_up7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_left7"
            android:text="西"
            android:layout_toLeftOf="@+id/btn_center7"
            android:layout_alignTop="@+id/btn_center7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_right7"
            android:text="东"
            android:layout_toRightOf="@+id/btn_center7"
            android:layout_alignTop="@+id/btn_center7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_down7"
            android:text="南"
            android:layout_below="@+id/btn_center7"
            android:layout_alignLeft="@+id/btn_center7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <Button
            android:id="@+id/NULL_USE8"
            android:text="庸"
            android:visibility="invisible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/btn_up8"
            android:text="北"
            android:layout_toRightOf="@+id/NULL_USE8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_center8"
            android:text="中"
            android:layout_below="@+id/btn_up8"
            android:layout_alignLeft="@+id/btn_up8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_left8"
            android:text="西"
            android:layout_toLeftOf="@+id/btn_center8"
            android:layout_alignTop="@+id/btn_center8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_right8"
            android:text="东"
            android:layout_toRightOf="@+id/btn_center8"
            android:layout_alignTop="@+id/btn_center8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btn_down8"
            android:text="南"
            android:layout_below="@+id/btn_center8"
            android:layout_alignLeft="@+id/btn_center8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </RelativeLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

 

---- The End.