给android中按钮美美容

来源：互联网发布：社工库源码编辑：程序博客网时间：2024/04/30 05:19

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>

最后在布局文件中找到要修改的按钮，更改按钮属性为