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

0. 目录

1. Android的UI设计

1.1 示例1

1.1.1 前言

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

1.1.2 设计示例

我们先来看看UI效果

感觉还真像那么回事...

1.1.3 目录结构

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

在mipmap目录下,这里我把所有需要的图片元素也贴上,便于学习者下载练习 点这里下载

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>

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>

留意观察,会有淡淡的颜色,这就是设置半透明文本框的控件布局

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>

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>

1.1.5 下一章

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