Android 圆角按钮的实现

叁歲伎倆 2022-03-08 05:54 487阅读 0赞

# Android 圆角按钮的实现 #

**效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyYWN5ZHJhZ29ubHh5_size_16_color_FFFFFF_t_70]

1.  在res/drawable目录下新建按钮样式文件 **btn\_normal.xml**（正常状态） 和 **btn\_pressed.xml**(按下状态)。

btn\_normal.xml文件：

btn\_pressed.xml文件：

1.  在res/drawable目录下新建样式文件 **btn\_selector.xml** 文件，定义按钮的不同状态样式。

btn\_selector.xml文件：

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        
        <item android:drawable="@drawable/btn_normal" android:state_pressed="false"/>
    
        
        <item android:drawable="@drawable/btn_pressed" android:state_pressed="true"/>
    
    </selector>

1.  使用按钮样式。

activity\_button.xml文件：

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
        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_height="match_parent"
        tools:context=".ButtonActivity">
    
        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:layout_marginStart="30dp"
            android:text="button"
            android:textColor="#fff"
            android:background="@drawable/btn_selector"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
    </android.support.constraint.ConstraintLayout>

> android:background="**@drawable/btn\_selector**"  
> 其中的btn\_selector是我们自定义的xml样式文件。

运行结果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyYWN5ZHJhZ29ubHh5_size_16_color_FFFFFF_t_70 1]

1.  给圆角按钮加上虚线边框样式。

btn\_normal.xml文件：

<?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        
        <corners android:radius="10dp"/>
    
        
        <solid android:color="#3a8fea"/>
    
        
        <stroke
            android:width="2dp"
            android:dashWidth="6dp"
            android:dashGap="6dp"
            android:color="#e75050" />
    
    </shape>

运行结果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyYWN5ZHJhZ29ubHh5_size_16_color_FFFFFF_t_70 2]

> 如果希望按钮边框是实线，那么把dashWidth和dashGap属性去除即可。

实线边框样式：

<?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        
        <corners android:radius="10dp"/>
    
        
        <solid android:color="#3a8fea"/>
    
        
        <stroke
            android:width="2dp"
            android:color="#e75050" />
    
    </shape>

运行结果图：  
![在这里插入图片描述][20190314145352496.jpg]

1.  实现局部圆角样式。

<?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        
        <corners
            android:topLeftRadius="10dp"
            android:bottomRightRadius="10dp"/>
    
        
        <solid android:color="#3a8fea"/>
    
    </shape>

运行结果图：  
![在这里插入图片描述][20190314150013897.jpg]

1.  渐变背景色样式。

> angle：角度，当 android:type=“linear”时有效 ，以45度为单位，逆时针方向旋转  
> centerX：Float。渐变色中心的 X 相对位置（ 0-1.0 ）。当 android:type=“linear”时无效  
> centerY：Float。渐变色中心的 Y 相对位置（ 0-1.0 ）。当 android:type=“linear”时无效  
> centerColor：color。可选的颜色，出现在 start 和 end 颜色之间。  
> gradientRadius：Float。渐变色的半径。当 android:type=“radial” 时有效。  
> startcolor：开始的颜色  
> endcolor：结束的颜色  
> type：渐变色的样式。有效值为：  
> “linear”：线性渐变，默认值  
> “radial”：环形渐变。 start 颜色是处于中间的颜色  
> “sweep”：扇形渐变  
> useLevel：Boolean。“ true ”表示可以当作 LevelListDrawable 使用

<?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        
        <corners android:radius="10dp"/>
    
        
        <solid android:color="#3a8fea"/>
    	
        <gradient
            android:angle="180"
            android:startColor="#f00"
            android:centerColor="#0f0"
            android:endColor="#00f"
            android:type="linear"
            android:useLevel="true"/>
    
    </shape>

运行结果图：  
![在这里插入图片描述][20190314151041261.jpg]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyYWN5ZHJhZ29ubHh5_size_16_color_FFFFFF_t_70]: /images/20220308/7cf4333b3734463f9f145b1ab21c9ea3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyYWN5ZHJhZ29ubHh5_size_16_color_FFFFFF_t_70 1]: /images/20220308/24ea1550455f473fa12217b7177da70c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyYWN5ZHJhZ29ubHh5_size_16_color_FFFFFF_t_70 2]: /images/20220308/8d471591bd714d97a706785a873240ae.png
[20190314145352496.jpg]: /images/20220308/6b82e074df5f4257a78007f0778597c8.png
[20190314150013897.jpg]: /images/20220308/01de285cbf6b439ab6a7f21a0080a563.png
[20190314151041261.jpg]: /images/20220308/5c38e0eecd154f14878612c0df4db0d1.png