Android IoT development of combat | 08 - four basic control layout

1. LinearLayout (linear layout)

Achieve layout code:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="200dp"
            android:layout_margin="10dp"
            android:src="@drawable/pic_001"
            />
        </LinearLayout>

        //第一栏信息
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            //1x1信息温度
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/temp">

            </ImageView>
                <TextView
                    android:id="@+id/temp_textview"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textSize="25sp"
                    android:text="25.2℃">
                </TextView>

            </LinearLayout>
            //1x2湿度
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1"
                android:layout_gravity="center">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/humi"
                    android:layout_gravity="center"
                    />
                <TextView
                    android:id="@+id/humi_textview"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textSize="25sp"
                    android:text="33 %RPH">
                </TextView>
            </LinearLayout>

        </LinearLayout>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text=""
            android:textSize="20sp"
            />

        //第二栏信息
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            //2x1信息亮度
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/lightness">

                </ImageView>
                <TextView
                    android:id="@+id/lightness_textview"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textSize="25sp"
                    android:text="123 Lux">
                </TextView>

            </LinearLayout>

            //2x2信息气体
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/gas">

                </ImageView>
                <TextView
                    android:id="@+id/gas_textview"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textSize="25sp"
                    android:text="5 %">
                </TextView>

            </LinearLayout>

        </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text=""
            android:textSize="20sp"
            />

        //定时信息显示
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="当前定时时间:"
            android:textSize="15sp"
            android:gravity="center"
            android:layout_weight="1"
            />
            <TextView
                android:id="@+id/time_textview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="2020-03-07 17:40:00"
                android:textSize="15sp"
                android:gravity="center"
                android:layout_weight="1"
                />
            
        </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text=""
            android:textSize="20sp"
            />

        //最底部定时按钮
        <Button
            android:id="@+id/button_timer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="定时"
            />
        //最底部定时按钮
        <Button
            android:id="@+id/button_exit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="退出登录"
            />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

2. RelativeLayout (opposite layout)

Be written ......

3. FameLayout (frame layout)

Be written ......

4. Percentage distribution

Be written ......
receive more exciting articles and resources push, welcome to subscribe to my micro-channel public number: "mculover666."