目前各种app都讲究用户体验,这里介绍下对EditText控件的样式美化。
先上效果图:
注:第一个控件没有没有设置 background 的任何属性,第二个控件设置了 android:background="@drawable/bg_edittext_selector"
若希望取消 EditText 背景,直接设置 android:background="@null" 便可。
此处通过两个xml文件来设置未获得焦点和已经获得焦点的样式,通过shape实现。
edittext_focused.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="1dip"/>
<stroke
android:width="1dip"
android:color="#728ea3" />
</shape>
edittext_normal.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="1dip"/>
<stroke
android:width="1dip"
android:color="#BDC7D8" />
</shape>
注:此处可以通过设置 corners (角) 来设置边框的弧度。想了解shape更多属性可以自行查阅。
bg_edittext_selector.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/edittext_normal" android:state_window_focused="false"/>
<item android:drawable="@drawable/edittext_focused" android:state_focused="true"/>
</selector>
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.aa.MainActivity" >
<EditText
android:id="@+id/normal"
android:layout_width="fill_parent"
android:layout_height="36dip"
android:layout_margin="36dip"
android:hint="请输入用户名"
android:padding="5dip"
android:singleLine="true"
android:textColorHint="#AAAAAA"
android:textSize="15dip" />
<EditText
android:layout_below="@+id/normal"
android:layout_width="fill_parent"
android:layout_height="36dip"
android:layout_margin="36dip"
android:background="@drawable/bg_edittext_selector"
android:hint="请输入用户名"
android:padding="5dip"
android:singleLine="true"
android:textColorHint="#AAAAAA"
android:textSize="15dip" />
</RelativeLayout>