Android Studio 之 Button圆角，描边，按压效果

 

•普通Button

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:gravity="center"
    android:padding="10dp">
    
    <Button
        android:id="@+id/btn_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#D52BD5"
        android:text="普通Button"
        android:textColor="#000000"
        android:textSize="20sp"
        />
    
</RelativeLayout>

 

•运行效果

　　

•圆角 Button

　　点击 app/src/main/res 找到 drawable 文件夹，右击->New->Drawable Resource File。

　　

　　新建一个文件名为 round_corner 根元素为 shape 的 .xml 文件，添加如下代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="20dp" />

    <solid android:color="#D52BD5" />

</shape>

• solrd : 填充

  • color : 设置填充颜色

• corners : 设置圆角

• radius : 设置四个角的弯曲度

• topLefTradius : 设置左上角的弯曲度

• topRighTradius : 设置右上角的弯曲度

• bottomLefTradius : 设置左下角的弯曲度

• bottomrighTradius :设置右下角的弯曲度

　　配置好 round_corner.xml 文件后，只需更改一下普通 Button 中的 background 属性即可实现圆角；

　　　　 android:background="@drawable/round_corner" 

　　代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:gravity="center"
    android:padding="10dp">

    <Button
        android:id="@+id/btn_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/round_corner"
        android:text="圆角Button"
        android:textColor="#000000"
        android:textSize="20sp"

        />

</RelativeLayout>

 

•运行效果

　　

•描边 Button

　　点击 app/src/main/res 找到 drawable 文件夹，右击->New->Drawable Resource File。

　　

 　　新建一个 stroke.xml 文件，在该文件中加入如下代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="20dp" />

    <stroke
        android:width="2dp"
        android:color="#22DD22" />


</shape>

• stroke : 描边
  • width : 设置描边的宽度
  • color : 设置描边的颜色

　　配置好 stroke.xml 文件后，将 Button 中的 background 属性更改一下即可实现描边。

　　　　 android:background="@drawable/stroke" 

　　代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:gravity="center"
    android:padding="10dp">

    <Button
        android:id="@+id/btn_stroke"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/stroke"
        android:text="描边 Button"
        android:textColor="#000000"
        android:textSize="20sp"

        />

</RelativeLayout>

 

•运行效果

　　

•按压 Button

点击 app/src/main/res 找到 drawable 文件夹，右击->New->Drawable Resource File。

　　

 　　新建一个 press_effect.xml 文件，在该文件中加入如下代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_pressed="false"
        android:drawable="@color/teal_200"/>

    <item
        android:state_pressed="true"
        android:drawable="@color/teal_700" />
</selector>

　　需要注意的是， android:drawable = "这里如果使用RGB颜色代码（#CC56CC）"  会报错：

 AAPT: error: '#CC56CC' is incompatible with attribute drawable (attr) reference. 

　　解决方案就是，将你需要的颜色代码放入到 res/values/colors.xml 中，通过 @color/XXX 来使用这些颜色。

　　配置好 press_effect.xml 文件后，将 Button 中的 background 属性更改一下即可实现按压效果。

　　　　 android:background="@drawable/press_effect" 　　　　

　　代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:gravity="center"
    android:padding="10dp">

    <Button
        android:id="@+id/btn_press_effect"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/press_effect"
        android:text="描边 Button"
        android:textColor="#000000"
        android:textSize="20sp"

        />

</RelativeLayout>

 

•运行效果

　　

•圆角按压效果

　　<item> 标签中也可以放入 <shape> 标签，这样就使得样式更加丰富。

　　更改 press_effect.xml 代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="false">
        <shape>
            <corners android:radius="10dp" />
            <solid android:color="@color/teal_200" />
        </shape>
    </item>

    <item>
        <shape>
            <corners android:radius="10dp" />
            <solid android:color="@color/teal_700" />
        </shape>
    </item>
    
</selector>

 

•运行效果

　　

　　与上一个效果对比，圆角更加美观。