下载掌阅APP，畅读海量书库
立即打开
在Android程序开发中，经常会用到Shape定义各种各样的形状，下面首先介绍Shape的标签的含义。
(1)solid：填充
android:color指定填充的颜色。
(2)gradient：渐变
android:startColor和android:endColor分别为起始和结束颜色，android:angle是渐变角度，必须为45的整数倍。另外，渐变默认的模式为android:type="linear"，即线性渐变，可以指定渐变为径向渐变，android:type="radial"，径向渐变需要指定半径android:gradientRadius="50"。
(3)stroke：描边
android:width="2dp" 描边的宽度，android:color描边的颜色。
这里还可以把描边弄成虚线的形式，设置方式为：
android:dashWidth="5dp"
android:dashGap="3dp"
其中，android:dashWidth表示虚线中一条横线的宽度，android:dashGap表示虚线中横线的间隔距离。
(4)corners：圆角
android:radius为角的弧度，值越大角越圆。
可以把4个角设定成不同的角度，如果同时设置5个属性，则radius属性无效。
android:Radius="20dp" 设置四个角的半径
android:topLeftRadius="20dp" 设置左上角的半径
android:topRightRadius="20dp" 设置右上角的半径
android:bottomLeftRadius="20dp" 设置左下角的半径
android:bottomRightRadius="20dp" 设置右下角的半径
(5)padding：间隔
可以设置上、下、左、右4个方向的间隔。
Android开发中经常需要改变原来控件的背景，比如：用户在单击按钮时，背景效果就改变。这种技术就是采用Selector实现的。实现步骤如下：
(1)首先Android的Selector是在drawable/XXX.xml中配置的。下面来完成XXX.xml的内容。
以Button为例，关键状态属性见表4-13。
表4-13 关键状态属性
根据上述状态可以设置Button的Selector效果，也可以设置Selector改变Button中的文字状态等。
以下就是配置Button中的文字效果：
drawable/button_font.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item android:state_selected="true" android:color="#FFF" />
<item android:state_focused="true" android:color="#FFF" />
<item android:state_pressed="true" android:color="#FFF" />
<item android:color="#000" />
</selector>
Button还可以实现更复杂的效果，例如渐变等。
drawable/button_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item android:state_pressed="true">
<!--定义当button处于pressed状态时的形态。-->
<shape>
<gradient android:startColor="#8600ff" />
<stroke android:width="2dp" android:color="#000000" />
<corners android:radius="5dp" />
<padding android:left="10dp" android:top="10dp"
android:bottom="10dp" android:right="10dp" />
</shape>
</item>
<item android:state_focused="true">
<!--定义当button获得focus时的形态-->
<shape>
<gradient android:startColor="#eac100" />
<stroke android:width="2dp" android:color="#333333" color="#ffffff" />
<corners android:radius="8dp" />
<padding android:left="10dp" android:top="10dp"
android:bottom="10dp" android:right="10dp" />
</shape>
</item>
</selector>
(2)随后，需要在包含Button的xml文件里添加两项。假如是main.xml文件，需要在<Button />里加两项：
android:focusable="true"
android:backgroud="@drawable/button_color"
这样当使用Button时就可以甩掉系统自带的黄颜色的背景，从而实现个性化的背景，配合应用的整体布局很实用。
【例4-6】 下面使用Shape 和Selector 优化登录布局，效果图如图4-16 所示。
从效果图中可以看出主要有以下变化：
整体上有个渐变的背景；
整个登录框增加了圆角背景；
登录按钮有了背景，并且单击后的状态发生了变化；
用户名和密码框有了图片背景，并且单击后的状态发生了变化。
下面就从这4个方面优化登录的布局和背景。
实现步骤如下：
(1)创建新项目：项目名称LoginBDemo，相关设置参照例4-1。
(2)渐变背景
首先在Layout/content_main.xml布局文件的LinearLayout中增加 background属性：android:background="@drawable/background_login"。
然后在drawable下新建资源文件background_login.xml，如图4-17所示。
图4-16 登录布局优化效果
图4-17 background_login资源文件
添加渐变，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<gradient
android:angle="45"
android:endColor="#FF72CAE1"
android:startColor="#FFACDAE5" />
</shape>
(3)圆角布局背景
首先在各控件的外面插入一个LinearLayout，设置android:background属性，代码如下：
<LinearLayout
android:layout_width="match_parent"
android:layout_depth="wrap_content"
android:paddingBottom="30dp"
android:orientation="vertical"
android:background="@drawable/background_login_div">
然后在drawable下新建资源文件background_login_div.xml，如图4-18所示。
图4-18 background_login_div资源文件
添加corners，主要设置bottomLeftRadius 、bottomRightRadius 、topLeftRadius和topRight Radius属性，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<solid android:color="#55FFFFFF" />
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
</shape>
(4)Button背景
首先修改登录按钮属性，添加background，代码如下：
<Button
android:id="@+id/login_button"
android:layout_width="150dp"
android:layout_depth="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="18dp"
android:text="登录"
android:background="@drawable/background_button_div"/>
然后在drawable下新建资源文件background_button_div.xml：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<solid android:color="#FF72CAE1" />
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
</shape>
(5)EditText背景
首先修改用户名和密码EditText的属性：
<EditText
android:id="@+id/username"
android:layout_width="match_parent"
android:layout_depth="50dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="15dp"
android:singleLine="true"
android:background="@drawable/edit_login"
android:hint="用户名"/>
然后在drawable下新建资源文件edit_login.xml：
<?xml version="1.0" encoding="UTF-8"?>
<selector
xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item android:state_enabled="false" android:drawable="@drawable/login_input" />
<item android:state_pressed="true" android:drawable="@drawable/login_input" />
<item android:state_focused="true" android:drawable="@drawable/input_over" />
</selector>
其中，login_input和input_over是两张png图片。
(6)Login完整布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
xmlns:tools="http://schemas.Android.com/tools"
android:layout_width="match_parent"
android:layout_depth="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
android:background="@drawable/background_login"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="cn.edu.neusoft.logindemo.LoginActivity"
tools:showIn="@layout/activity_login">
<LinearLayout
android:layout_width="match_parent"
android:layout_depth="wrap_content"
android:paddingBottom="30dp"
android:orientation="vertical"
android:background="@drawable/background_login_div">
<TextView
android:layout_width="wrap_content"
android:layout_depth="wrap_content"
android:text=" 欢迎选择DIY"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:textSize="25dp"/>
<EditText
android:id="@+id/username"
android:layout_width="match_parent"
android:layout_depth="50dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="15dp"
android:singleLine="true"
android:background="@drawable/edit_login"
android:hint=" 用户名"/>
<EditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_depth="50dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="15dp"
android:singleLine="true"
android:background="@drawable/edit_login"
android:hint=" 密码"
android:password="true"/>
<Button
android:id="@+id/login_button"
android:layout_width="150dp"
android:layout_depth="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="18dp"
android:text=" 登录"
android:background="@drawable/background_button_div"/>
</LinearLayout>
</LinearLayout>
这里控件的 text和 hint值采用的是硬编码，即直接在属性中写入固定值。推荐在layout/string.xml中定义，然后再对其进行调用。
<string name="welcome_msg">欢迎选择DIY</string>
<string name="username_msg">用户名</string>
<string name="password_msg">密码</string>
<string name="login_msg">登录</string>
布局文件中控件就可以使用“@string/welcome_msg”显示相关信息了。
<TextView
android:layout_width="wrap_content"
android:layout_depth="wrap_content"
android:text="@string/welcome_msg"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:textSize="25dp"/>
<EditText
android:id="@+id/username"
android:layout_width="match_parent"
android:layout_depth="50dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="15dp"
android:singleLine="true"
android:background="@drawable/edit_login"
android:hint="@string/username_msg"/>
<EditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_depth="50dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="15dp"
android:singleLine="true"
android:background="@drawable/edit_login"
android:hint="@string/password_msg"
android:password="true"/>
<Button
android:id="@+id/login_button"
android:layout_width="150dp"
android:layout_depth="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="18dp"
android:text="@string/login_msg"
android:background="@drawable/background_button_div"/>
(7)运行该项目，查看结果。