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>

 

•運行效果

　　

　　與上一個效果對比，圓角更加美觀。