1. FrameLayout frame layout
This layout is similar to superimposed pictures without any positioning method. When we add components to it, they will be placed in the upper left corner of the container by default.
Components above are displayed on the bottom layer, and components below are displayed on the top layer.
In the following code, view 1 is displayed at the bottom and view 3 is displayed at the top
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="400dp" android:layout_height="400dp" android:gravity="bottom|end" android:text="View 1" android:background="@color/purple_200" android:textColor="@color/white" android:textSize="60sp" /> <TextView android:layout_width="300dp" android:layout_height="300dp" android:gravity="bottom|end" android:text="View 2" android:background="@color/teal_200" android:textColor="@color/white" android:textSize="60sp" /> <TextView android:layout_width="200dp" android:layout_height="200dp" android:gravity="bottom|end" android:text="view 3" android:background="@color/teal_700" android:textColor="@color/white" android:textSize="60sp" /> </FrameLayout>
Two, ConstraintLayout constraint layout
Starting from Android Studio 2.3, the official template uses ConstraintLayout by default. It appears mainly to solve the problem of excessive layout nesting, and to position and adjust widgets in a flexible way.
ConstraintLayout is a bit like RelativeLayout, more flexible than RelativeLayout, and has better performance. The position and size of the control can be constrained according to the proportion, which can better adapt to models with different screen sizes.
1. Relative positioning
Common properties:
- layout_constraintLeft_toLeftOf: left aligned with the left of the target component
- layout_constraintLeft_toRightOf: Align the left and the right of the target component
- layout_constraintRight_toLeftOf: The right is aligned with the left of the target component
- layout_constraintRight_toRightOf: The right side is aligned with the right side of the target component
- layout_constraintTop_toTopOf: The top edge is aligned with the top edge of the target component
- layout_constraintTop_toBottomOf: The top edge is aligned with the bottom edge of the target component
- layout_constraintBottom_toTopOf: The bottom edge is aligned with the top edge of the target component
- layout_constraintBottom_toBottomOf: The bottom edge is aligned with the bottom edge of the target component
- layout_constraintBaseline_toBaselineOf: Text baseline alignment, such as the height of two TextView s is inconsistent, but they want their text alignment
- layout_constraintStart_toStartOf: Same as layout_constraintLeft_toLeftOf
- layout_constraintStart_toEndOf: Same as layout_constraintLeft_toRightOf
- layout_constraintEnd_toStartOf: Same as layout_constraintRight_toLeftOf
- layout_constraintEnd_toEndOf: Same as layout_constraintRight_toRightOf
- layout_constraintHorizontal_bias: The horizontal offset of the left and right constraints, the value of 0-1 can be set, and the default is 0.5 to center
- layout_constraintVertical_bias: The vertical offset of the upper and lower constraints, the value of 0-1 can be set, and the default is 0.5 to center
- layout_constraintHorizontal_weight: Horizontal weight value, which can be any value and takes effect at 0dp
- layout_constraintVertical_weight: Vertical weight, which can be any value, takes effect at 0dp
- layout_constraintDimensionRatio: aspect ratio, when at least one dimension of width or height is set to 0dp, the ratio can be set, such as (1:2)
Example code, calculator layout:
<?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"> <TextView android:id="@+id/c_view1" android:layout_height="wrap_content" android:layout_width="match_parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" android:layout_gravity="fill" android:gravity="end" android:layout_marginStart="5dp" android:layout_marginEnd="5dp" android:layout_marginTop="5dp" android:background="#FFCCCC" android:text="0" android:textSize="50sp" /> <Button android:layout_height="wrap_content" android:layout_width="0dp" app:layout_constraintTop_toBottomOf="@id/c_view1" app:layout_constraintStart_toStartOf="@id/c_view1" app:layout_constraintEnd_toStartOf="@id/btn_qk" android:layout_marginEnd="5dp" android:textSize="40sp" android:id="@+id/btn_ht" android:text="go back" /> <Button android:id="@+id/btn_qk" android:layout_height="0dp" android:layout_width="0dp" app:layout_constraintEnd_toEndOf="@id/c_view1" app:layout_constraintStart_toEndOf="@id/btn_ht" app:layout_constraintTop_toBottomOf="@id/c_view1" app:layout_constraintBottom_toBottomOf="@id/btn_ht" android:textSize="40sp" android:text="empty" /> <Button android:text="+" android:id="@+id/btn_jia" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_marginEnd="5dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_ht" app:layout_constraintStart_toStartOf="@id/btn_ht" app:layout_constraintEnd_toStartOf="@id/btn_01" /> <Button android:text="1" android:id="@+id/btn_01" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_marginEnd="5dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_ht" app:layout_constraintStart_toEndOf="@id/btn_jia" app:layout_constraintEnd_toStartOf="@id/btn_02" /> <Button android:text="2" android:id="@+id/btn_02" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_marginEnd="5dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_ht" app:layout_constraintStart_toEndOf="@id/btn_01" app:layout_constraintEnd_toStartOf="@id/btn_03" /> <Button android:text="3" android:id="@+id/btn_03" android:layout_height="wrap_content" android:layout_width="0dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_ht" app:layout_constraintStart_toEndOf="@id/btn_02" app:layout_constraintEnd_toEndOf="@id/btn_qk" /> <Button android:text="-" android:id="@+id/btn_jian" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_marginEnd="5dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_jia" app:layout_constraintStart_toStartOf="@id/btn_ht" app:layout_constraintEnd_toStartOf="@id/btn_04" /> <Button android:text="4" android:id="@+id/btn_04" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_marginEnd="5dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_jia" app:layout_constraintEnd_toStartOf="@id/btn_05" app:layout_constraintStart_toEndOf="@id/btn_jian" /> <Button android:text="5" android:id="@+id/btn_05" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_marginEnd="5dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_jia" app:layout_constraintEnd_toStartOf="@id/btn_06" app:layout_constraintStart_toEndOf="@id/btn_04" /> <Button android:text="6" android:id="@+id/btn_06" android:layout_height="wrap_content" android:layout_width="0dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_jia" app:layout_constraintStart_toEndOf="@id/btn_05" app:layout_constraintEnd_toEndOf="@id/btn_qk" /> <Button android:text="*" android:id="@+id/btn_xin" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_marginEnd="5dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_jian" app:layout_constraintStart_toStartOf="@id/btn_ht" app:layout_constraintEnd_toStartOf="@id/btn_07" /> <Button android:text="7" android:id="@+id/btn_07" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_marginEnd="5dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_jian" app:layout_constraintEnd_toStartOf="@id/btn_08" app:layout_constraintStart_toEndOf="@id/btn_xin" /> <Button android:text="8" android:id="@+id/btn_08" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_marginEnd="5dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_jian" app:layout_constraintEnd_toStartOf="@id/btn_09" app:layout_constraintStart_toEndOf="@id/btn_07" /> <Button android:text="9" android:id="@+id/btn_09" android:layout_height="wrap_content" android:layout_width="0dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_jian" app:layout_constraintStart_toEndOf="@id/btn_08" app:layout_constraintEnd_toEndOf="@id/btn_qk" /> <Button android:text="/" android:id="@+id/btn_chu" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_marginEnd="5dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_xin" app:layout_constraintStart_toStartOf="@id/btn_ht" app:layout_constraintEnd_toStartOf="@id/btn_dian" /> <Button android:text="." android:id="@+id/btn_dian" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_marginEnd="5dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_xin" app:layout_constraintEnd_toStartOf="@id/btn_00" app:layout_constraintStart_toEndOf="@id/btn_chu" /> <Button android:text="0" android:id="@+id/btn_00" android:layout_height="wrap_content" android:layout_width="0dp" android:layout_marginEnd="5dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_xin" app:layout_constraintEnd_toStartOf="@id/btn_deng" app:layout_constraintStart_toEndOf="@id/btn_dian" /> <Button android:text="=" android:id="@+id/btn_deng" android:layout_height="wrap_content" android:layout_width="0dp" app:layout_constraintHorizontal_weight="1" app:layout_constraintTop_toBottomOf="@id/btn_xin" app:layout_constraintStart_toEndOf="@id/btn_00" app:layout_constraintEnd_toEndOf="@id/btn_qk" /> </androidx.constraintlayout.widget.ConstraintLayout>
2. Angle positioning
Common properties:
- layout_constraintCircle: Angular positioning refers to the target component
- layout_constraintCircleAngle: Offset angle, refer to the vertical direction of the component to turn the angle to the right
- layout_constraintCircleRadius: distance
<?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"> <!-- Button 1 screen centered --> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="94dp" android:text="button 1" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> <!-- Button 2 rotates 120 degrees relative to button 1, and is 120 degrees away from the center of button 1 dp --> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:text="button 2" app:layout_constraintCircle="@id/button" app:layout_constraintCircleAngle="120" app:layout_constraintCircleRadius="120dp" /> </androidx.constraintlayout.widget.ConstraintLayout>
3. Weight and 0dp
- If layout_width is set to 0dp, then the control will spread out horizontally to fill all the space
- If layout_height is set to 0dp, then the control will spread out vertically to fill all the space
- layout_constraintHorizontal_weight: Set the weight value, which can be any value
4. Controls are arranged in a row, evenly distributed (default)
The first control of a chain is the chain header of the chain. We can set layout_constraintHorizontal_chainStyle in the chain header to change the style of the entire chain. chains provides 3 styles, namely:
- CHAIN_SPREAD: spread elements evenly (default)
- CHAIN_SPREAD_INSIDE: Expand the element, but the ends of the chain are close to the parent
- CHAIN_PACKED: elements of the chain will be packed together
<?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"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="button 1" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/button2" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="button 2" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@+id/button" app:layout_constraintRight_toLeftOf="@id/button3" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="button 3" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@id/button2" app:layout_constraintRight_toRightOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
5. Group grouping
Group can group multiple controls into one group to facilitate hiding or displaying a group of controls
<androidx.constraintlayout.widget.Group android:id="@+id/group" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="invisible" app:constraint_referenced_ids="btn_deng,btn_00,btn_dian"/>
6. Barrier
Barrier is only used to assist layout and will not be displayed on the page. Other components can be constrained with Barrier.
- constraint_referenced_ids: a list of referenced component ids, separated by commas (,)
- barrierDirection: The barrier is located at the position of the reference component, optional values (left, right, top, bottom, start, end)
<androidx.constraintlayout.widget.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="right" app:constraint_referenced_ids="btn_01,btn_02" />