Android的UI设计(示例1-天气监测系统2)

我就是我 2022-12-04 04:28 117阅读 0赞

### Android.UI设计.布局练习.RelativeLayout&LinearLayout.示例1.天气监测系统2 ###

*  0. 目录
 *  1. Android的UI设计
 *   *  1.1 示例1
     *   *  1.1.4 源码
         *  1.1.5 完结

# 0. 目录 #

# 1. Android的UI设计 #

## 1.1 示例1 ##

### 1.1.4 源码 ###

**layout目录**  
`activity_main.xml`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ3MzIyOA_size_16_color_FFFFFF_t_70_pic_center]  
`activity_main_1.xml`

<?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"
        android:background="@mipmap/bg">
    
        
        <RelativeLayout
            android:id="@+id/main_lay_headbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_main_bar">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <ImageView
                    android:id="@+id/main_img_return"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:src="@mipmap/goback"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="8dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="气象监测系统v1.0"
                    android:textColor="@color/w2_white"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:layout_centerHorizontal="true"/>
            </RelativeLayout>
        </RelativeLayout>
    
    
    
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/main_lay_bottombar"
            android:layout_below="@id/main_lay_headbar">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_marginHorizontal="18dp">
    
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:padding="12dp"
                    android:background="@drawable/shape_main_page"
                    android:layout_marginTop="18dp">
                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:layout_weight="1">
                        <ImageView
                            android:layout_width="36dp"
                            android:layout_height="36dp"
                            android:src="@mipmap/guangzhao"
                            android:layout_margin="6dp"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="光照度："
                            android:textSize="16sp"
                            android:textStyle="bold"
                            android:textColor="#000"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text=""
                            android:id="@+id/txt_data"
                            android:textSize="30sp"
                            android:textColor="#000"/>
                    </LinearLayout>
    
                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:orientation="horizontal">
                        <ImageView
                            android:layout_width="36dp"
                            android:layout_height="36dp"
                            android:src="@mipmap/eryanghuatan"
                            android:layout_margin="6dp"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="二氧化碳值："
                            android:textSize="16sp"
                            android:textStyle="bold"
                            android:textColor="#000"/>
                        <TextView
                            android:id="@+id/txt_data_0"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text=""
                            android:textColor="#000"
                            android:textSize="30sp" />
                    </LinearLayout>
                </LinearLayout>
    
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:padding="12dp"
                    android:background="@drawable/shape_main_page"
                    android:layout_marginTop="18dp">
    
                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:layout_weight="1">
                        <ImageView
                            android:layout_width="36dp"
                            android:layout_height="36dp"
                            android:src="@mipmap/wendu"
                            android:layout_margin="6dp"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="温度："
                            android:textSize="16sp"
                            android:textStyle="bold"
                            android:textColor="#000"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text=""
                            android:id="@+id/txt_data_1"
                            android:textSize="30sp"
                            android:textColor="#000"/>
                    </LinearLayout>
    
                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:orientation="horizontal">
                        <ImageView
                            android:layout_width="36dp"
                            android:layout_height="36dp"
                            android:src="@mipmap/shidu"
                            android:layout_margin="6dp"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="湿度："
                            android:textSize="16sp"
                            android:textStyle="bold"
                            android:textColor="#000"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text=""
                            android:id="@+id/txt_data_2"
                            android:textSize="30sp"
                            android:textColor="#000" />
                    </LinearLayout>
                </LinearLayout>
    
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:padding="12dp"
                    android:background="@drawable/shape_main_page"
                    android:layout_marginTop="18dp">
    
                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:layout_weight="1">
                        <ImageView
                            android:layout_width="36dp"
                            android:layout_height="36dp"
                            android:src="@mipmap/yuxue"
                            android:layout_margin="6dp"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="雨雪值："
                            android:textSize="16sp"
                            android:textStyle="bold"
                            android:textColor="#000"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text=""
                            android:id="@+id/txt_data_3"
                            android:textSize="30sp"
                            android:textColor="#000" />
                    </LinearLayout>
    
                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:orientation="horizontal">
                        <ImageView
                            android:layout_width="36dp"
                            android:layout_height="36dp"
                            android:src="@mipmap/kongqizhiliang"
                            android:layout_margin="6dp"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="空气质量："
                            android:textSize="16sp"
                            android:textStyle="bold"
                            android:textColor="#000"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text=""
                            android:id="@+id/txt_data_4"
                            android:textSize="30sp"
                            android:textColor="#000" />
                    </LinearLayout>
    
    
    
                </LinearLayout>
            </LinearLayout>
    
        </ScrollView>
    
        
        <RelativeLayout
            android:id="@+id/main_lay_bottombar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true">
            <Button
                android:id="@+id/button_0"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#1AFFFFFF"
                android:text="退出登录"
                android:paddingVertical="12dp"
                android:textColor="@color/w2_white"
                android:textStyle="bold"
                android:textSize="20sp"/>
        </RelativeLayout>
    
    </RelativeLayout>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ3MzIyOA_size_16_color_FFFFFF_t_70_pic_center 1]  
**values目录**  
`colors.xml`

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="colorPrimary">#3F51B5</color>
        <color name="colorPrimaryDark">#303F9F</color>
        <color name="colorAccent">#FF4081</color>
    
        <color name="transparent">#00000000</color>
        <color name="transparent_half">#E0000000</color>
    
        
        <color name="w1_white">#ffffff</color>
        <color name="w2_white">#FAFBFC</color>
        <color name="w3_white">#F2F2F5</color>
        <color name="g1_gray">#e6e6e6</color>
        <color name="g2_gray">#dbdbdb</color>
        <color name="g3_gray">#cdcdcd</color>
        <color name="g4_gray">#bfbfbf</color>
        <color name="g5_gray">#8a8a8a</color>
        <color name="g6_gray">#707070</color>
        <color name="g7_gray">#515151</color>
        <color name="black">#2c2c2c</color>
    
        
        <color name="b1_blue">#E5F2FF</color>
        <color name="b2_blue">#0080FF</color>
        <color name="lightblue">#87CEFF</color>
        <color name="brightblue">#1296db</color>
        <color name="blue">#1B76FF</color>
        <color name="darkblue">#13227a</color>
    
        
        <color name="lightred">#FF3366</color>
        <color name="pink">#d4237a</color>
        <color name="red">#d81e06</color>
    
        
        <color name="lightorange">#FFDEAD</color>
        <color name="orange">#EEB422</color>
    
        
        <color name="yellow">#f4ea2a</color>
    
        
        <color name="lightgreen">#CCFFEC</color>
        <color name="brightgreen">#33C67F</color>
        <color name="green">#1afa29</color>
    </resources>

`strings.xml`

`styles.xml`

### 1.1.5 完结 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ3MzIyOA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/44eff8a39dfa444db35ffb40892efea0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ3MzIyOA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/71a3498ca10341409c1cebd349023bdd.png