Android button自定义样式显示

ゝ一世哀愁。 2022-07-25 16:35 241阅读 0赞

一个好的APP从直观上最能吸引用户的必定是好看的UI界面及良好的交互体验和特效，有时甚至连主要功能都是次要的！好吧，软件也到了拼脸的时代，主要看气质！

所以这篇文章就聊聊button的自定义显示，下一篇聊聊Android动画。

**1.通过XML文件设置属性**

定义后和未定义的对比

![Center][]

给button添加自定义的显示也非常简单，在button属性里加上android:background="@drawable/bt\_style\_bg" 其中最主要的是在drawable文件夹下的bt\_style\_bg.xml文件

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        
        <item android:state_pressed="true"><shape>
    
                
                <gradient android:angle="270" android:endColor="#ADFF2F" android:startColor="#ADFF2F"/>
                
                <stroke android:width="1dip" android:color="#f403c9" />
                
                <corners android:radius="2dp" />
                
                <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
            </shape></item>
    
        
        <item android:state_focused="true"><shape>
                <gradient android:angle="270" android:endColor="#00ff00" android:startColor="#00ffff" />
    
                <stroke android:width="1dip" android:color="#f403c9" />
    
                <corners android:radius="2dp" />
    
                <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
            </shape></item>
    
        
        <item><shape>
                <gradient android:angle="180" android:endColor="#ffffff" android:startColor="#000000" />
    
                <stroke android:width="1dip" android:color="#f403c9" />
    
                <corners android:radius="5dip" />
    
                <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
            </shape></item>
    
    </selector>

shape属性的使用

圆角背景

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        
        <solid android:color="#E2F5F9"/>
        
        <stroke
            android:width="2dp"
            android:color="#125579" />
        
        <corners
            android:topLeftRadius="180dp"
            android:bottomLeftRadius="180dp"
            android:topRightRadius="180dp"
            android:bottomRightRadius="180dp"/>
        <padding
            android:left="10dp"
             android:bottom="5dp"
            android:top="5dp"
            android:right="10dp"
            />
    </shape>

圆形背景

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
        <padding
            android:bottom="2dp"
            android:left="2dp"
            android:right="2dp"
            android:top="2dp"></padding>
        <size android:height="15dp"
            android:width="15dp"></size>
        <solid android:color="#DD0000"></solid>
    </shape>

**2. 自定义形状、颜色、图样的按钮的实现**

步骤如下。

(a) 设计一张自定义形状风格背景的图片，如下图。

![Center 1][]

(b) 未点击和按下后的状态各做一张，形成一套图片，如下图。

![Center 1][]like\_normal.png ![Center 2][] like\_pressed.png

<?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/like_normal" />  
        <item android:state_focused="true"  
            android:drawable="@drawable/like_pressed" />  
        <item android:drawable="@drawable/like_normal" />  
    </selector>

**3.9-patch图片背景方式(注意前面有个.)**

9-patch格式，是在Android中特有的一种PNG图片格式，以"\*\*\*.9.png"结尾。此种格式的图片定义了可以伸缩拉伸的区域和文字显示区域，这样，就可以在Android开发中对非矢量图进行拉伸而仍然保持美观。如果使用位图而没有经过9-patch处理的话，效果就会将图片任意的拉伸，影响效果。Android中大量用了这种技术，默认的按钮的背景就是用了类似的方法实现的。我们看一下google官方的描述：

![Center 3][]

在Android sdk目录下有一个tools文件夹，在这个文件夹中找到draw9patch.bat文件，我们就是使用它来制作Nine-Patch图片的。双击打开之后，在导航栏点击File→Open 9-patch将xxx.png加载进来。  
  我们可以在图片的四个边框绘制一个个的小黑点，在上边框和左边框绘制的部分就表示当图片需要拉伸时就拉伸黑点标记的区域，在下边框和右边框绘制的部分则表示内容会被放置的区域。

如下图所示：![Center 4][]

完成后，最后保存为"xxx.9.png"，这样就完成了，然后将其放入到button的background中或者xml自定义的属性中。

注意：.9图只能通过背景设置拉伸，如果用src方式设置只会当作普通图片处理

[Center]: /images/20220724/7b6a7c97736c4bae826fed163b05bb0f.png
[Center 1]: /images/20220724/9420a2a880e2487eb335aa23fb5067c2.png
[Center 2]: /images/20220724/079230585007467b9aa2d88981069640.png
[Center 3]: /images/20220724/e8ef469e868b4cbea1fc5beb0e186b19.png
[Center 4]: /images/20220724/248b49b95aa344d49de41cb236c46a80.png