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

其他 2020-09-07 22:53:58 阅读次数: 0

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

0. 目录

1. Android的UI设计

1.1 示例1

1.1.4 源码

layout目录
activity_main.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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginHorizontal="12dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="24dp"
        android:gravity="center">

        <!--输入区域-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:gravity="center"
            android:orientation="vertical"
            android:id="@+id/login_layout_txt">

            <!--账号-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_weight="1">

                <ImageView
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    android:src="@mipmap/zhanghao"
                    android:layout_marginHorizontal="12dp">
                </ImageView>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                    <EditText
                        android:id="@+id/zhanghao"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="账号"
                        android:inputType="text"
                        android:background="@drawable/shape_login_txt"
                        android:layout_marginRight="12dp"/>
                    <View
                        android:layout_width="match_parent"
                        android:layout_height="2dp"
                        android:background="@color/g1_gray"
                        android:layout_marginHorizontal="6dp">
                    </View>
                </LinearLayout>

            </LinearLayout>

            <!--密码-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_weight="1">
                <ImageView
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    android:layout_marginHorizontal="12dp"
                    android:src="@mipmap/mima">
                </ImageView>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                    <EditText
                        android:id="@+id/mima"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="密码"
                        android:inputType="textPassword"
                        android:background="@drawable/shape_login_txt"
                        android:layout_marginRight="12dp"/>
                    <View
                        android:layout_width="match_parent"
                        android:layout_height="2dp"
                        android:background="@color/g1_gray"
                        android:layout_marginHorizontal="6dp">
                    </View>
                </LinearLayout>
            </LinearLayout>

        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:orientation="horizontal"
            android:gravity="center">

            <Button
                android:id="@+id/btn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="登录 "
                android:layout_marginLeft="24dp"

                android:textSize="16sp"
                android:textStyle="bold"
                android:textColor="@color/black"
                android:paddingVertical="6dp"
                android:paddingHorizontal="16dp"
                android:background="@drawable/shape_login_btn"
                android:layout_weight="1"/>

            <Button
                android:id="@+id/btn2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="注册"
                android:layout_marginHorizontal="12dp"

                android:textSize="16sp"
                android:textStyle="bold"
                android:textColor="@color/black"
                android:paddingVertical="6dp"
                android:paddingHorizontal="16dp"
                android:background="@drawable/shape_login_btn"
                android:layout_weight="1"/>

            <Button
                android:id="@+id/btn3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="删除"
                android:layout_marginRight="24dp"

                android:textSize="16sp"
                android:textStyle="bold"
                android:textColor="@color/black"
                android:paddingVertical="6dp"
                android:paddingHorizontal="16dp"
                android:background="@drawable/shape_login_btn"
                android:layout_weight="1"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="36dp"
                android:gravity="center"
                android:text="Don't have an account?"
                android:textColor="@color/g5_gray">
            </TextView>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:text="Help"
                android:textColor="@color/w1_white">
            </TextView>
        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

在这里插入图片描述
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">

    <!--headbar-->
    <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>

    <!--bottombar-->
    <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>

在这里插入图片描述
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

<resources>
    <string name="app_name">气象监测</string>
</resources>

styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Light.NoTitleBar.Fullscreen">
    </style>
</resources>

1.1.5 完结

猜你喜欢

转载自blog.csdn.net/weixin_42473228/article/details/108422993
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022