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

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 前言

​​前几天朋友布置了一道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)​​