使用shape自定义圆角样式的Button和EditText

来源：互联网发布：iphone 通话录音软件编辑：程序博客网时间：2024/06/10 23:45

在Android开发过程中，UI设计师给出的效果图中会出现圆角的按钮，开发人员可以直接使用图片素材或使用shape来自定义按钮的方式来达到效果。但是直接使用图片素材会导致整个apk文件很大。所以，推荐使用shape来实现。

1.使用shape绘制圆角的、颜色充满的Button

<Button        android:id="@+id/btn_connect_wifi"        style="?android:attr/buttonBarButtonStyle"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_marginBottom="65dp"        android:layout_marginLeft="38dp"        android:layout_marginRight="38dp"        android:background="@drawable/shape_btn_wifi_connect_pressed"        android:text="登录"        android:textColor="@android:color/white" />

在drawable中创建shape_btn_wifi_connect_pressed.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <corners android:radius="10dp"></corners>    <solid android:color="#15a0da"></solid></shape>

其中radius为圆角半径值，值越大，圆角越圆。

2.使用shape绘制圆角的、只有边框的Button

<Button        android:id="@+id/btn_connect_wifi"        style="?android:attr/buttonBarButtonStyle"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_marginBottom="65dp"        android:layout_marginLeft="38dp"        android:layout_marginRight="38dp"        android:background="@drawable/shape_btn_add"        android:text="登录"        android:textColor="#000000"        />

在drawable中创建shape_btn_add.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <corners android:radius="15dp">    </corners>    <stroke        android:width="2dp"        android:color="#15a0da"></stroke></shape>

3.使用shape绘制圆角的、描边的Button

<Button        android:id="@+id/btn_connect_wifi"        style="?android:attr/buttonBarButtonStyle"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_marginBottom="65dp"        android:layout_marginLeft="38dp"        android:layout_marginRight="38dp"        android:background="@drawable/shape_btn_normal"        android:text="登录"        android:textColor="@android:color/white" />

在drawable中创建shape_btn_normal.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <corners android:radius="15dp"></corners>    <stroke        android:width="1dp"        android:color="#000000"></stroke>    <solid android:color="#15a0da"></solid></shape>

3.同样，我们可以使用shape来改变EditText的样式

<EditText        style="@style/TextSize12"        android:layout_width="match_parent"        android:layout_height="56dp"        android:layout_below="@+id/head"        android:layout_margin="16dp"        android:background="@drawable/shape_et"        android:hint="@string/input_copycat_id"       android:padding="16dp"        android:textColorHint="@color/gray" />

在drawable中创建shape_et.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <corners android:radius="5dp"></corners>    <stroke        android:width="1dp"        android:color="@color/c_gray"></stroke></shape>

4.使用shape绘制虚线

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="line"    >    <stroke        android:dashGap="3dp"        android:dashWidth="8dp"        android:width="1dp"        android:color="#63a219" />    <size android:height="1dp" /></shape>

【附】

shape的属性：

solid 实心，即充满

属性：android:color 指定填充的颜色

gradient 渐变

属性：android:type 渐变类型

ValueDescription"linear"线性渐变"radial"圆形渐变，起始颜色从cenralX,centralY点开始。需要指定android:gradientRadius"sweep"A sweeping line gradient.

android:angle 渐变颜色的角度，默认为0，必须为45的整数倍（只在type为linear下起作用，默认type为linear）

取值： 0表示从左向右

90表示从下向上

270表示从上向下

360表示从右到左

android:startColor 渐变开始颜色

android: endColor 渐变结束颜色

stroke 描边

属性：android:width 描边的宽度

android:color 描边的颜色

通过以下两个属性可以把边绘制为虚线样式

android:dashWidth 一小段虚线“-”的宽度（长度）

android:dashGap 虚线之间的间隔距离

corners 圆角

属性： android:radius 角的弧度，越大越角越圆

android:topLeftRadius 左上角

android:topRightRadius 右上角

android:bottomLeftRadius 右下角

android:bottomRightRadius 左下角

padding 间隔

0 0