Read before thinking

The best way to learn a skill or read an article is to study with questions, so that in the process, you will have a sense of clarity, lights out, and memory will be more profound.

  1. What are the common layouts?
  2. What are the characteristics and differences of each layout?
  3. How to optimize the layout?

1. Constrain layout ConstraintLayout

ConstraintLayout is one of the major new features in Android Studio 2.2. ConstraintLayout uses constraints to specify the position and relationships of controls, similar to RelativeLayout. But it is far more powerful than a RelativeLayout, and it effectively solves the problem of too many nested layouts.

Explain ConstraintLayout this article explains explain ConstraintLayout by writing XML. Explain ConstraintLayout by referring to the new Android feature

ConstraintLayout 1. First use ConstraintLayout to achieve the top, high adaptive, wide match_parent

<TextView
        android:id="@+id/tv_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Name"
        android:textSize="20sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
    />
Copy the code

Realize the effect drawing

2. Implement a control below another control

<TextView
        android:id="@+id/tv_mobile"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:text="Mobile phone Number"
        android:gravity="center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_name"
    />
Copy the code

Realize the effect drawing

3. The control is displayed in the center

<TextView
        android:id="@+id/tv_age"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Age"
        android:gravity="center"
        android:textSize="30sp"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
    />
Copy the code

Implementation effect

  1. By layout weight, achieve percentage layout
<TextView
        android:id="@+id/tab0"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="tab1"
        android:textColor="@color/colorAccent"
        android:textSize="20sp"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tab1" />

    <TextView
        android:id="@+id/tab1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="tab2"
        android:textSize="20sp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tab0"
        app:layout_constraintRight_toLeftOf="@+id/tab2"
        app:layout_constraintTop_toTopOf="@+id/tab0" />

    <TextView
        android:id="@+id/tab2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="tab3"
        app:layout_constraintHorizontal_weight="1"
        android:textColor="@color/colorPrimary"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tab1"
        app:layout_constraintRight_toLeftOf="@id/tab3"
        app:layout_constraintTop_toTopOf="@+id/tab0" />

    <TextView
        android:id="@+id/tab3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="tab4"
        android:textSize="20sp"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tab2"
        app:layout_constraintRight_toLeftOf="@+id/tab4"
        app:layout_constraintTop_toTopOf="@+id/tab0" />

    <TextView
        app:layout_constraintHorizontal_weight="1"
        android:id="@+id/tab4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="tab5"
        android:textColor="@color/colorPrimary"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tab3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/tab0" />
Copy the code

Realize the effect drawing

2. LinearLayout

Linear layout is the arrangement of child elements (which can be controls or layouts) in horizontal or vertical order, with each element following the previous one. There are two types of linear layouts: horizontal and vertical. Set android:orientation=”vertical” and Android :orientation=”horizontal” respectively. Android :layout_weight indicates the proportion of space occupied by child elements.

Let’s implement the following effect

Concrete code implementation

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <EditText
            android:id="@+id/msg"
            android:inputType="number"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text=""> </EditText> </LinearLayout> // The second behavior MC M + m-MR four buttons constitute a horizontal layout <LinearLayout Android :layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="mc" android:layout_weight="1">
        </Button>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="m+" android:layout_weight="1">
        </Button>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="m-" android:layout_weight="1">
        </Button>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="mr" android:layout_weight="1">
        </Button>
    </LinearLayout>

</LinearLayout>
Copy the code

3. Layout a RelativeLayout

RelativeLayout inherits from Android.Widget. ViewGroup, and is the most flexible and commonly used layout among the top five Android layouts, ideal for complex interface designs.

Let’s implement the following effect

The specific code is as follows

<? xml version="1.0" encoding="utf-8"? > <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:text="Button1"
    />
    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/btn1"
        android:layout_toLeftOf="@id/btn1"
        android:text="Button2"
    />
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/btn1"
        android:layout_toRightOf="@id/btn1"
        android:text="Button3"
    />
    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/btn2"
        android:layout_toLeftOf="@id/btn3"
        android:layout_toRightOf="@id/btn2"
        android:text="Button4"
    />

</RelativeLayout>
Copy the code

Since I rarely use the following layout in my projects, I won’t cover it more

4. TableLayout

TableLayout is suitable for multi-row and multi-column layout. Each table is composed of multiple TableRow. A TableRow represents each row in the table and this row can be composed of multiple sub-elements. Actually TableLayout and TableRow are subclasses of LineLayout linear layout. Android :orientation = horizontal android:layout_width=MATCH_PARENT Android: layout_height = WRAP_CONTENT. So TableRow is actually a horizontal linear layout, and all the child elements are the same width and height.

5. FrameLayout FrameLayout

FrameLayout is the simplest layout. All controls placed in the layout are stacked in a hierarchy in the upper left corner of the screen. The last control overwrites the previous control. In a FrameLayout layout, it makes no sense to define any spatial position-related attributes. Controls are stacked automatically in the top left corner, regardless of your control. But the control itself can control its own internal layout.

6. Absolute layout

Android :layout_x and Android: layout_Y set the coordinates of all child elements in the absolute layout, that is, coordinates (Android :layout_x, Android :layout_y), Layout_x is used to represent the abscissa and layout_y is used to represent the ordinate. The top left corner of the screen is the coordinate (0,0), the horizontal to the right is square, and the vertical to the bottom is square. In practice, this layout is used less often, because Android terminals tend to have more models with different screen sizes. Resolution and so on May vary, and absolute layout may result in inconsistent display on some terminals.

Layout optimization

  1. Use the include tag to load repeated layouts
  2. Use the Merge tag to reduce layout nesting
  3. Use the ViewStub to dynamically control the layout display

Because of the length of the problem is not to do specific examples, you can try to achieve.

The article has read to the end, do you know the first few questions? If not? You can read intensively for problems you won’t have! The answer is in the text, I believe you can certainly solve!