Android implements symmetrical layout of controls (constraint layout and linear layout)

        When drawing the interface, you will encounter many layouts on the interface. Although it is very simple, it is not proficient to do it every time. Let me summarize some daily

1. Realize two spatially symmetrical layouts on the interface

Method 1. Use the guideLine of the constraint layout . It is suitable for two controls with uncertain width and height, and there are many constraints

GuidelineIt is a tool class that can only be used in the ConstraintLayout layout. It is used to assist the layout. It is similar to the auxiliary line. You can set android:orientationattributes to determine whether it is horizontal or vertical.

Important attributes:

  • layout_constraintGuide_begin, specify a fixed distance from the left or top, such as 10dp, an auxiliary line will appear at a distance of 10dp from the left or top
  • layout_constraintGuide_end, specify a fixed distance from the right or bottom, such as 50dp, an auxiliary line will appear at a distance of 50dp from the right or bottom
  • layout_constraintGuide_percent, specifies the percentage of the width or height in the parent control, such as 0.5, which means the distance is vertically or horizontally centered.

 

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_marginTop="20dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.appcompat.widget.AppCompatTextView
                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"
                android:textColor="@color/black"
                android:text="guideline 实现对称布局"/>

            <androidx.appcompat.widget.AppCompatButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="确定"
                android:layout_marginTop="30dp"
                android:layout_marginEnd="20dp"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintEnd_toStartOf="@id/guide_line_1"
                android:textColor="@color/white"
                android:background="@drawable/rgb1a1c1f_r8"
                android:textStyle="bold"
                android:paddingHorizontal="20dp"/>

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guide_line_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.5"/>

            <androidx.appcompat.widget.AppCompatButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="取消"
                android:layout_marginTop="30dp"
                android:background="@drawable/rgb1a1c1f_r8"
                android:layout_marginStart="20dp"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toEndOf="@id/guide_line_1"
                android:textColor="@color/white"
                android:textStyle="bold"
                android:paddingHorizontal="20dp"/>

        </androidx.constraintlayout.widget.ConstraintLayout>

Method 2: Linear layout . We all know that linear layout is either horizontal or vertical. When its child controls are required to be arranged evenly, or to occupy the width and height of the parent container in a certain proportion, its weight property can be used 

This is to achieve left-right symmetry

            <LinearLayout
                android:paddingHorizontal="20dp"
                android:layout_marginTop="20dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/ll_1"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/cl_1"
                android:orientation="horizontal">
                
                <androidx.appcompat.widget.AppCompatButton
                    android:background="@drawable/rgb1a1c1f_r8"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="20dp"
                    android:text="@string/video"
                    android:layout_weight="1"/>
                <androidx.appcompat.widget.AppCompatButton
                    android:background="@drawable/rgb1a1c1f_r8"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="20dp"
                    android:text="游戏"
                    android:layout_weight="1"/>
                
                
            </LinearLayout>

This is to achieve the weight ratio:

 

 

            <LinearLayout
                android:paddingHorizontal="10dp"
                android:layout_marginTop="20dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/ll_1"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/cl_1"
                android:orientation="horizontal">

                <androidx.appcompat.widget.AppCompatButton
                    android:background="@drawable/rgb1a1c1f_r8"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="10dp"
                    android:text="@string/video"
                    android:layout_weight="1"/>
                <androidx.appcompat.widget.AppCompatButton
                    android:background="@drawable/rgb1a1c1f_r8"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="10dp"
                    android:text="游戏"
                    android:layout_weight="1"/>
                <androidx.appcompat.widget.AppCompatButton
                    android:background="@drawable/rgb1a1c1f_r8"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="10dp"
                    android:text="小说"
                    android:layout_weight="4"/>


            </LinearLayout>

Very basic knowledge, for personal summary.

Guess you like

Origin blog.csdn.net/LoveFHM/article/details/130076621