android中默认的按钮一般是灰色,比较丑,而且按钮多了会显得很单调,那我们如何给按钮美美容呢?
一.原理:在xml中定义出想要的形状和颜色,当点击,选中,默认或不可触发的这些状态分别对应着不同的xml文件,然后在按钮的创建中引用,从而产生美容的效果。
如下图所示,图1为默认效果,图2为点击效果
图1
图2
二.代码:在drawable-hdpi新建xml文件bt_orange_default.xml代表按钮默认时的状态内容为:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FFEC7600" />
<corners
android:topLeftRadius="15dip"
android:topRightRadius="15dip"
android:bottomLeftRadius="15dip"
android:bottomRightRadius="15dip" />
</shape>
</item>
<item android:top="2px" android:bottom="2px" android:left="2px" android:right="2px">
<shape>
<gradient
android:startColor="#FFEC7600" android:endColor="#FFFED69E"
android:type="linear" android:angle="90"
android:centerX="1" android:centerY="1" />
<corners
android:topLeftRadius="15dip"
android:topRightRadius="15dip"
android:bottomLeftRadius="15dip"
android:bottomRightRadius="15dip" />
</shape>
</item>
</layer-list>
将这个文件在同一目录再新建3个xml文件命名为bt_orange_selected.xml,bt_orange_pressed.xml,bt_orange_enabled.xml,分别带表选中,点击,不可触发的三种状态。
这些文件内容可以根据需求修改,也可以和bt_orange_default.xml一样。笔者列出自己的修改内容,仅供参考。
bt_orange_selected.xml内容为:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FFEC7600" />
<corners
android:topLeftRadius="5dip"
android:topRightRadius="5dip"
android:bottomLeftRadius="5dip"
android:bottomRightRadius="5dip" />
</shape>
</item>
<item android:top="1px" android:bottom="1px" android:left="1px" android:right="1px">
<shape>
<gradient
android:startColor="#FFED7600" android:endColor="#FFFFD69E"
android:type="linear" android:angle="90"
android:centerX="0.5" android:centerY="0.5" />
<corners
android:topLeftRadius="5dip"
android:topRightRadius="5dip"
android:bottomLeftRadius="5dip"
android:bottomRightRadius="5dip" />
</shape>
</item>
</layer-list>
bt_orange_enabled.xml内容为:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FFEC7600" />
<corners
android:topLeftRadius="5dip"
android:topRightRadius="5dip"
android:bottomLeftRadius="5dip"
android:bottomRightRadius="5dip" />
</shape>
</item>
<item android:top="1px" android:bottom="1px" android:left="1px" android:right="1px">
<shape>
<gradient
android:startColor="#FFEDFFFF" android:endColor="#FFFDEFFF"
android:type="linear" android:angle="90"
android:centerX="0.5" android:centerY="0.5" />
<corners
android:topLeftRadius="5dip"
android:topRightRadius="5dip"
android:bottomLeftRadius="5dip"
android:bottomRightRadius="5dip" />
</shape>
</item>
bt_orange_pressed.xml内容为:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FFEC7600" />
<corners
android:topLeftRadius="5dip"
android:topRightRadius="5dip"
android:bottomLeftRadius="5dip"
android:bottomRightRadius="5dip" />
</shape>
</item>
<item android:top="1px" android:bottom="1px" android:left="1px" android:right="1px">
<shape>
<gradient
android:startColor="#FFEDA600" android:endColor="#FFFFB69E"
android:type="linear" android:angle="90"
android:centerX="0.5" android:centerY="0.5" />
<corners
android:topLeftRadius="5dip"
android:topRightRadius="5dip"
android:bottomLeftRadius="5dip"
android:bottomRightRadius="5dip" />
</shape>
</item>
</layer-list>
接着在这个目录下建立bt_orange.xml,其内容为:
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/bt_orange_pressed" />
<item android:state_focused="true"
android:drawable="@drawable/bt_orange_selected" />
<item android:state_enabled="false"
android:drawable="@drawable/bt_orange_enabled" />
<item android:drawable="@drawable/bt_orange_default" />
</selector>
最后在布局文件中找到要修改的按钮,更改按钮属性为
<Button
android:id="@+id/button2"
android:layout_width="139dp"
android:layout_height="139dp"
android:layout_x="254dp"
android:layout_y="421dp"
android:background="@drawable/bt_orange"
android:text="这个按钮到底漂亮"
android:textSize="20sp" />