Android中使用shape实现EditText圆角

之前看到手机上的百度editText控件是圆角的就尝试做了一下，看了看相关的文章。

因为代码少，看看就知道了。所以下面我就直接贴上代码供大家参考，有其他的好方法记得分享哦~

整个代码不涉及JAVA代码，首先是需要被MainActivity加载的页面代码：

 1 <EditText

 2         android:id="@+id/edt_operator_name"

 3         

 4         android:layout_width="250dip"

 5         android:layout_height="wrap_content"

 6         android:background="@layout/rounded_edittext"

 7         android:gravity="center_vertical"

 8         android:hint="百度"

 9         android:paddingBottom="10dip"

10         android:paddingTop="10dip" />

然后就是具体的样式rounded_edittext.xml代码：

 1 <?xml version="1.0" encoding="utf-8"?>

 2 <shape xmlns:android="http://schemas.android.com/apk/res/android"

 3     android:padding="10dp"

 4     android:shape="rectangle" >

 5 

 6     <solid android:color="#FFFFFF" />

 7 

 8     <corners

 9         android:bottomLeftRadius="15dp"

10         android:bottomRightRadius="15dp"

11         android:topLeftRadius="15dp"

12         android:topRightRadius="15dp" />

13 

14 </shape>

此时，运行即可。

 

EditText去边框：EditText的background属性设置为@null就搞定了：android:background="@null"。

 

其实以上内容的知识点就是shape的使用，下面简单的介绍一下：

shape用于设定形状，可以在selector，layout等里面使用，有6个子标签，各属性如下：

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    

    <!-- 圆角 -->

    <corners

        android:radius="9dp"

        android:topLeftRadius="2dp"

        android:topRightRadius="2dp"

        android:bottomLeftRadius="2dp"

        android:bottomRightRadius="2dp"/><!-- 设置圆角半径 -->

    

    <!-- 渐变 -->

    <gradient

        android:startColor="@android:color/white"

        android:centerColor="@android:color/black"

        android:endColor="@android:color/black"

        android:useLevel="true"

        android:angle="45"//android:angle 整型 渐变角度(PS：当angle=0时，渐变色是从左向右。 然后逆时针方向转，当angle=90时为从下往上。angle必须为45的整数倍)

        android:type="radial"

        android:centerX="0"

        android:centerY="0"

        android:gradientRadius="90"/>

    

    <!-- 间隔 -->

    <padding

        android:left="2dp"

        android:top="2dp"

        android:right="2dp"

        android:bottom="2dp"/><!-- 各方向的间隔 -->

    

    <!-- 大小 -->

    <size

        android:width="50dp"

        android:height="50dp"/><!-- 宽度和高度 -->

    

    <!-- 填充 -->

    <solid

        android:color="@android:color/white"/><!-- 填充的颜色 -->

    

    <!-- 描边 -->

    <stroke

        android:width="2dp"

        android:color="@android:color/black"

        android:dashWidth="1dp"

        android:dashGap="2dp"/>

    

</shape>

填充：设置填充的颜色

间隔：设置四个方向上的间隔

大小：设置大小

圆角：同时设置五个属性，则Radius属性无效

android:Radius="20dp"                           设置四个角的半径

android:topLeftRadius="20dp"              设置左上角的半径
android:topRightRadius="20dp"           设置右上角的半径
android:bottomLeftRadius="20dp"      设置右下角的半径
android:bottomRightRadius="20dp"    设置左下角的半径

描边：dashWidth和dashGap属性，只要其中一个设置为0dp，则边框为实现边框

android:width="20dp"                               设置边边的宽度
android:color="@android:color/black"  设置边边的颜色
android:dashWidth="2dp"                         设置虚线的宽度
android:dashGap="20dp"                          设置虚线的间隔宽度

渐变：当设置填充颜色后，无渐变效果。angle的值必须是45的倍数（包括0），仅在type="linear"有效，不然会报错。android:useLevel 这个属性不知道有什么用。

 

上面的圆角例子是layout作为背景，下面有一个selecter作为背景的例子（这个例子出自：http://www.oschina.net/question/166763_34833）：

main.xml:

 

<Button

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="TestShapeButton"

    android:background="@drawable/button_selector"

    />

 

 

button_selector.xml:

<?xml version="1.0" encoding="utf-8"?>

<selector

    xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" >

        <shape>

            <!-- 渐变 -->

            <gradient

                android:startColor="#ff8c00"

                android:endColor="#FFFFFF"

                android:type="radial"

                android:gradientRadius="50" />

            <!-- 描边 -->

            <stroke

                android:width="2dp"

                android:color="#dcdcdc"

                android:dashWidth="5dp" 

                android:dashGap="3dp" />

            <!-- 圆角 -->

            <corners

                android:radius="2dp" />

            <padding

                android:left="10dp"

                android:top="10dp"

                android:right="10dp"

                android:bottom="10dp" />

        </shape>

    </item>



    <item android:state_focused="true" >

        <shape>

            <gradient

                android:startColor="#ffc2b7"

                android:endColor="#ffc2b7"

                android:angle="270" />

            <stroke

                android:width="2dp"

                android:color="#dcdcdc" />

            <corners

                android:radius="2dp" />

            <padding

                android:left="10dp"

                android:top="10dp"

                android:right="10dp"

                android:bottom="10dp" />

        </shape>

    </item>



    <item>       

        <shape>

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

            <stroke

                android:width="2dp"

                android:color="#fad3cf" />

            <corners 

                android:topRightRadius="5dp"

                android:bottomLeftRadius="5dp"

                android:topLeftRadius="0dp"

                android:bottomRightRadius="0dp"

            />

            <padding

                android:left="10dp"

                android:top="10dp"

                android:right="10dp"

                android:bottom="10dp" />

        </shape>

    </item>

</selector>

 

此外，我还在网上找到了个渐变的实例，地址如下：

http://l62s.iteye.com/blog/1659433