Android界面圆角输入框实现

最终效果如上图。

main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/white"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="83dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:orientation="vertical" 
        android:background="@drawable/rounded_outer">

        <EditText
            android:id="@+id/namevalue"
            android:paddingTop="5dp"
            android:paddingLeft="5dp"
            android:paddingBottom="5dp"
            android:paddingRight="5dp"
            android:layout_marginLeft="1dp"
            android:layout_marginRight="1dp"
            android:layout_width="fill_parent"
            android:layout_height="38dp"
            android:layout_gravity="center"
            android:hint="用户名"
            android:inputType="text"
            android:textSize="20sp"
            android:background="@drawable/rounded_text">
        </EditText>
 
    	<View 
        	android:layout_width="fill_parent" 
        	android:layout_height="1dp" 
        	android:background="@color/light_grey" > 
    	</View>	
 
        <EditText
            android:id="@+id/passvalue"
            android:layout_width="fill_parent"
            android:layout_height="38dp"
            android:paddingTop="5dp"
            android:paddingLeft="5dp"
            android:paddingBottom="5dp"
            android:paddingRight="5dp"
            android:layout_marginLeft="1dp"
            android:layout_marginRight="1dp"
            android:layout_gravity="center"
            android:hint="密码"
            android:inputType="textPassword"
            android:textSize="20sp" 
            android:background="@drawable/rounded_text">
        </EditText>
    </LinearLayout>
</LinearLayout>

从上面布局文件可以看到，用到了rounded_outer 和 rounded_text 这两个XML文件。

rounded_outer.xml:

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle" 
    android:padding="3dp">  
    <!-- 填充 -->
    <solid android:color="@color/white" />
	<!-- 描边 -->
    <stroke android:width="1dp" android:color="@color/light_grey"/>
    <!-- 圆角 -->
    <corners android:bottomRightRadius="5dp"  
        android:bottomLeftRadius="5dp" 
        android:topLeftRadius="5dp"  
        android:topRightRadius="5dp" />  
</shape>  

rounded_text.xml:

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle" 
    android:padding="3dp">  
    <!-- 填充 -->
    <solid android:color="@color/white" />
	<!-- 描边 -->
    <stroke android:width="1dp" android:color="@color/light_grey"/>
    <!-- 圆角 -->
    <corners android:bottomRightRadius="5dp"  
        android:bottomLeftRadius="5dp" 
        android:topLeftRadius="5dp"  
        android:topRightRadius="5dp" />  
</shape>  

rounded_outer.xml 使整个布局为圆角的，当然它还有描边、填充色等属性设置。

rounded_text.xml 使圆角里面的文本框为圆角，与rounded_outer.xml的圆角匹配，在这两个xml文件中都设置圆角为5dp。

如果不用rounded_text.xml文件的话，效果如下：

明显看出“密码”框显示的问题。

在main.xml布局代码中有如下view:

<View  android:layout_width="fill_parent"        

            android:layout_height="1dp"        

            android:background="@color/light_grey" />
 它是用来分隔上下两个文本框的，若不加上这段代码，两个文本框之间就不会有一条连接的横线。

实现上述视图，用到的就是shape<形状控制>的使用，参看：android shape的使用。里面对于各属性介绍的很详细。