An iOS development tour of Android development – six layout

preface

If you are familiar with iOS StoryBoard development, you will feel familiar with Android interface development. Android defines a series of specialized layout files in XML format in the RES/Layout folder that describe the UI. IOS storyboards are essentially XML files, but not readable by most people. Let’s take a couple of pictures to get a feel for it.

ViewGroup

Different from iOS, UI components and container classes are clearly distinguished in Android. UI components can only be placed in a special View container, which is a ViewGroup, rather than a UILabel text label in a UIButton button.

The core function of a ViewGroup is to lay out the View components in a container.

Viewgroups inherit from views just like UI components like buttons. But viewGroups are abstract classes and cannot be used directly. The system provides six implementations, known as the six layouts.

LinerLayout

LinerLayout can control the horizontal or vertical arrangement of components. The core attribute is Android: Orientation, which can be set to horizontal and vertical. Layout_weight, weight

Linear layout example

<? 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:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        >
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#0F0"/>
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FF0"/>
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#0FF"/>
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#F00"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#00F"/>
</LinearLayout>
Copy the code

You can see that the entire page is made up of two LinerLayout containers. The main container has three properties that fill the screen with width and height, and are arranged vertically. The main container contains three elements, a container of type LinerLayout, and two Views. The child container contains three views, arranged horizontally.

In addition, all three elements under the main container are set to Android :layout_weight = 1, which means that the three elements share the space of the parent container vertically. If, respectively, set to 2,1,1, then the child containers take up half the space.

RelativeLayout

There are two main types of relative layouts, relative to parent containers and relative to sibling components.

The keywords relative to the parent container are top, bottom, left, and right layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight, and center Layout _centerInParent. After that, you can use the margin to fine-tune specific values.

The component id is used to specify the component relative to the sibling component. The main attributes are layout_ABOVE, layout_below,layout_alignLeft, and layout_alignRight.

Relative layout example

<? 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/btn-center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Middle"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="20dp"
        android:text="20 from top of parent container"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/btn-center"
        android:layout_marginBottom="20dp"
        android:layout_alignLeft="@+id/btn-center"
        android:text="Left-aligned, spacing 20"
        />
</RelativeLayout>

Copy the code

FrameLayout(FrameLayout)

All elements added to the layout are displayed in a cascading manner, with the first control added at the bottom and the last one added at the top, and the controls at the top overwriting the contents of the controls at the bottom, similar to a stack. Frame layout is suitable for class-based game scenarios.

Frame layout Example

<? 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">

    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#F00"
        />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="10dp"
        android:background="#0F0"
        />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="10dp"
        android:background="#00F"
        />
</FrameLayout>

Copy the code

As shown, the previous view is half covered by the upper view, except for the last blue view, which is fully displayed.

AbsoulateLayout(absolute layout)

Absolute layout is to set the x and y coordinates of the control directly. This is not going to expand.

TableLayout

Table layout is similar to HTML’s table syntax, using the TableRow keyword to represent a row.

Table layout example

<? xml version="1.0" encoding="utf-8"? > <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Name:"
            />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Gender."
            />
    </TableRow>
</TableLayout>

Copy the code

ConstraintLayout

Constrained layouts, also known as enhanced relative layouts, combine LinerLayout, RelativeLayout, and percentage layouts into one and become the dominant layout style. Of course, as an iOS developer, the concept of constrained layout is already familiar. Examine the sample code directly.

<? xml version="1.0" encoding="utf-8"? > <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Button
        android:id="@+id/btnA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:text="A"
        app:layout_constraintLeft_toLeftOf="parent"
        />
    <Button
        android:id="@+id/btnB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BBBBBbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
        app:layout_constrainedWidth="true"
        app:layout_constraintLeft_toRightOf="@+id/btnA"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnA"
        />
    <Button
        android:text="1/3 B button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="@+id/btnB"
        app:layout_constraintRight_toRightOf="@+id/btnB"
        app:layout_constraintWidth_percent="0.3"
        />
    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/ic_launcher_background"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />
</android.support.constraint.ConstraintLayout>

Copy the code

Button A specifies that the reference object is the parent and left-aligned with layout_constraintLeft_toLeftOf=”parent”. Works with layout_marginLeft to set how far to deviate to the left.

Similarly, button B uses layout_constraintLeft_toRightOf=”@+id/btnA” to specify left and right alignment of button A, layout_constraintRight_toRightOf=”parent” to specify right and right alignment of the parent container, Layout_constraintTop_toBottomOf =”@+ ID /btnA” top aligned with bottom of button A. App :layout_constrainedWidth=”true” is a mandatory constraint because we set the width of the B button to wrap the text, but the text is too long and the constraint conflicts. Setting this line forces the constraint to take precedence and the text will wrap.

For the bottom image, use layout_constraintDimensionRatio=”16:9″ to ensure that the aspect ratio is 16:9. The other Settings are the same. Constraint layout details may refer to www.jianshu.com/p/a74557359…