【移动应用开发】任务4 创建系统主界面

目录

最终效果呈现 

需要用到的素材图片

1、选择主界面布局方式

2、添加环境监控布局

3、添加禁入监控区域布局

4、添加设备控制区域

（1）新建drawable-xhdpi文件夹

（2）编写strings.xml文件，添加下面代码

（3）编写activity_main.xml文件

5、三个文件的源码：

（1）strings.xml文件

（2）colors.xml文件

（3）activity_main.xml

---

最终效果呈现 

需要用到的素材图片

1、选择主界面布局方式

四个方位：Left Right Top Bottom

上一个splash界面选择了相对布局（RelativeLayout）

本节选择线性布局（LinearLayout）: 线性布局会在水平或垂直方向上让视图相邻显示

如果是垂直方向：视图会显示在一列上，如果是垂直方向，视图会显示在一行上

线性布局有个重要的属性：orientation 它的取值有两个：

vertical：垂直方向

horizontal：水平方向

2、添加环境监控布局

<!-- Ctrl+/ 注释   -->
<!--    欢迎使用智慧工厂应用-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="欢迎使用智慧工厂应用"
        android:textAlignment="center"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:textSize="20sp"
        android:background="@color/colorPrimaryDark"
        android:textColor="@color/white"/>

<!--    温度，湿度，光照布局-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="20dp"
        android:paddingBottom="20dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="16sp"
            android:text="@string/temperature_title"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="16sp"
            android:textColor="@color/colorRed"
            android:text="@string/temperature_value"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="16sp"
            android:text="@string/humility_title"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:textSize="16sp"
            android:textColor="@color/colorRed"
            android:text="@string/humility_value"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="16sp"
            android:text="@string/light_title"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:textSize="16sp"
            android:textColor="@color/colorRed"
            android:text="@string/light_value"/>
    </LinearLayout>