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

深藏阁楼爱情的钟 2022-12-04 03:29 91阅读 0赞

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

*  0. 目录
 *  1. Android的UI设计
 *   *  1.1 示例1
     *   *  1.1.1 前言
         *  1.1.2 设计示例
         *  1.1.3 目录结构
         *  1.1.4 源码
         *  1.1.5 下一章

# 0. 目录 #

# 1. Android的UI设计 #

## 1.1 示例1 ##

### 1.1.1 前言 ###

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ3MzIyOA_size_16_color_FFFFFF_t_70_pic_center]

`前几天朋友布置了一道Android编程题,做一个简单的天气监测系统,让我帮忙设计一下,好苦恼啊,竟然为难一个做后端的做美工~,嗯,真香!我寻思好久没碰Android了,不如试试手感,然后灵感如涌泉一般不可收拾...`

### 1.1.2 设计示例 ###

> 我们先来看看UI效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ3MzIyOA_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ3MzIyOA_size_16_color_FFFFFF_t_70_pic_center 2]  
`感觉还真像那么回事...`

### 1.1.3 目录结构 ###

> 我们先来看看,需要哪些材料吧~

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ3MzIyOA_size_16_color_FFFFFF_t_70_pic_center 3]  
在mipmap目录下,这里我把所有需要的图片元素也贴上,便于学习者下载练习 [**点这里下载**][Link 1]

### 1.1.4 源码 ###

> 废话不多说,源码贴上~

**drawable目录**  
`shape_login_btn.xml`

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    
        <solid android:color="@color/lightred"/>
        <corners android:radius="24dp"/>
    </shape>

![在这里插入图片描述][20200905181555643.png_pic_center]  
`shape_login_txt.xml`

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    
        <corners android:radius="4dp"/>
        <padding android:bottom="6dp" android:left="6dp" android:right="6dp" android:top="6dp"/>
        <solid android:color="#1AFFFFFF"/>
    </shape>

![在这里插入图片描述][20200905181700738.png_pic_center]  
留意观察,会有淡淡的颜色,这就是设置半透明文本框的控件布局

`shape_main_bar.xml`

<?xml version="1.0" encoding="utf-8"?>
    <shape android:shape="rectangle"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="#1AFFFFFF"/>
        <padding android:top="36dp" android:bottom="12dp" android:left="12dp" android:right="8dp"/>
    </shape>

![在这里插入图片描述][20200905181914267.png_pic_center]  
`shape_main_page.xml`

<?xml version="1.0" encoding="utf-8"?>
    <shape android:shape="rectangle"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="#66FFFFFF"/>
        <corners android:radius="12dp"/>
    </shape>

![在这里插入图片描述][20200905182005753.png_pic_center]

### 1.1.5 下一章 ###

[**Android的UI设计(示例1-天气监测系统2)**][Android_UI_1-_2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ3MzIyOA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/2a5e0ade586240a3a5ca1821401fa815.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ3MzIyOA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/e9c51361ee71437684c8e1f551e03e04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ3MzIyOA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/b1d6e32f4eb14007b836ae4c70e57a42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ3MzIyOA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/c59e959bc09946fca67ac62f9a294f88.png
[Link 1]: https://download.csdn.net/download/weixin_42473228/12817409
[20200905181555643.png_pic_center]: /images/20221123/1549d39841364030bd563c8b8fc8890a.png
[20200905181700738.png_pic_center]: /images/20221123/ce2d2766f4f746d8a9dbd967847ea2e5.png
[20200905181914267.png_pic_center]: /images/20221123/dbffb0ed51fc456da2da5a57608b56d8.png
[20200905182005753.png_pic_center]: /images/20221123/993f9fffdabd4e60a0a1df95cb07d316.png
[Android_UI_1-_2]: https://blog.csdn.net/weixin_42473228/article/details/108422993