Android Studio 之 Button(圆角,描边,按压效果)
阅读原文时间:2023年07月09日阅读:2

•普通Button


<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"  
    />

•运行效果

  

•圆角 Button

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

  

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


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

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

  • solrd : 填充

    • color : 设置填充颜色
  • corners : 设置圆角

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

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

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

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

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

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

         android:background="@drawable/round_corner"

      代码如下:


<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"

    />

•运行效果

  

•描边 Button

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

  

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


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

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

  • stroke : 描边

    • width : 设置描边的宽度

    • color : 设置描边的颜色

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

           android:background="@drawable/stroke"

        代码如下:


<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"

    />

•运行效果

  

•按压 Button

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

  

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


<item  
    android:state\_pressed="false"  
    android:drawable="@color/teal\_200"/>

<item  
    android:state\_pressed="true"  
    android:drawable="@color/teal\_700" />  

  需要注意的是, 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"     

  代码如下:


<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"

    />

•运行效果

  

•圆角按压效果

   标签中也可以放入 标签,这样就使得样式更加丰富。

  更改 press_effect.xml 代码如下:


<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>

•运行效果

  

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