最终效果如上图。
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的使用。里面对于各属性介绍的很详细。