最近在写些小 Demo 复习基础,在用到 EditText 的时候突然发现之前几乎没有注意到它的光标和下划线的颜色,于是花了不少时间,看了不少博客,现在就来总结和分享一下收获。
我们要在原生的 EditText 上修改,首先当然要认识一下它的本来面目。在 Android Studio 中新建一个工程,让 MainActivity 继承于 AppCompatActivity(为什么要这样做,后面再说),然后在 MainActivity 的布局中放置一个 EditText:
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- android:orientation="vertical"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- tools:context="com.lindroid.edittext.MainActivity">
- <EditText
- android:hint="原生的EditText"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"/>
- </LinearLayout>
运行工程,仔细观察可以看到光标和下划线都是粉红色的。现在就让我们循序渐进,先修改它的光标颜色。
EditText 有一个属性:
,它就是用来设置光标样式的。为了加深认识,大家先额外做个小实验:将 textCursorDrawable 设置为 @null,表示去除系统默认的样式,但我们都记得隐藏光标的属性是
- android:textCursorDrawable
, 那么这时光标会是什么样子的呢?你可以给文字(android:textColor)和提示文字(android:textColorHint 属性)设置不同的颜色,运行之后就会发现此时光标的颜色是跟文字的保持一致的。
- android:cursorVisible
了解了
的作用之后,我们可以在 drawable 资源文件夹下新建一个 cursor_color.xml 文件,内容如下
- android:textCursorDrawable
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <size android:width="2dp"/>
- <solid android:color="@android:color/holo_blue_light"/>
- </shape>
光标的颜色为系统自带的浅蓝色,宽度为 2dp。在原生的 EditText 下面放置一个新的 EditText:
- <EditText
- android:textCursorDrawable="@drawable/cursor_color"
- android:hint="自定义光标颜色"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"/>
运行效果如下:
第 2 节中,我们将属性
设置为 "@null" 之后发现光标的样式会变得跟文字的颜色一样,那么如果将整个 EditText 的背景设置为 "@null" 呢?我们可以添加一个 EditText,然后为它增加属性
- android:textCursorDrawable
:
- android:background="@null"
可以看到,虽然光标的样式没有改变,但是下划线消失了,不过除此之外,EditText 的边距也没有了,如果不是光标在闪烁,一眼看上去就像个 TextView 了。
网上有些自定义 EditText 下划线的教程就是这样操作的,先把背景去除,再在下面加一个横线。这样的操作未尝不可,但是为了美观,还是得重新设置间距值。。
还记得刚才我们在创建 MainActivity 时要继承 AppCompatActivity 吗?到了这里就要揭晓答案了。这样做是为了使用 appcompat-v7 包中的 Material Design 样式,比如我们可以在 Styles.xml 文件中新建一个 MyEditText 样式:
- "MyEditText"parent="Theme.AppCompat.Light">"colorControlNormal">@android:color/darker_gray</item>"colorControlActivated">@android:color/holo_orange_dark</item></style>
表示控件默认的颜色,
- colorControlNormal
表示控件被激活时的颜色,这样,我们就可以分别设置 EditText 不被选中和选中时的颜色了。这里我将选中的颜色设为橙色。
- colorControlActivated
在 activity_main.xml 中再增加一个 EditText,加上
属性,效果如下:
- android:theme="@style/MyEditText"
可以看到,光标和下划线的颜色都会修改掉,而间距还是会保留。
前面的做法都是针对一个 EditText 来修改的,如果需要把项目中所有的 EditText 的颜色都改掉的话,那这样做的话工作量就太大了。有没有办法可以一脚定江山的呢?
不知道你发现了没有,为什么 EditText 默认是骚气的粉红色呢?事实上,你设置其他几种控件(比如 ProgressBar、Switch 等等),它们的颜色基本上也是骚粉。你只要再看一眼刚才的 styles.xml,里面的 AppTheme 的代码是这样的:
- name="AppTheme"parent="Theme.AppCompat.Light.DarkActionBar">-- Customize your theme here. --><item name="colorPrimary">@color/colorPrimary</item>
- <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
- <item name="colorAccent">@color/colorAccent</item>
看到了吗?里面的 colorAccent 就是那个骚粉色了。为了理解这三种颜色,我特地找了一张图:
前面我们做的自定义下划线操作都是在继承 AppCompatActivity 的前提下,如果你改成 Activity,然后在 Android5.0 以下的手机运行的话,效果是这样的:
Material Design 风格消失了,光标的颜色虽然还能修改,但是下划线的颜色却改不了。所以我们还得另想方法。
EditText 是一个输入框,我们可以这样理解:下划线无非就是给输入框的下边框加一条线。这个用 Android 中的 layer-list(图层)就可以做到。新建两个 xml 文件:et_underline_unselected.xml 和 et_underline_selected.xml,前者是 EditText 被选中时的背景,后者则是未被选中时的背景: et_underline_unselected.xml
- <?xml version="1.0" encoding="utf-8"?>
- <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
- <item
- android:bottom="0dp"
- android:left="-2dp"
- android:right="-2dp"
- android:top="-2dp">
- <shape>
- <solid android:color="@android:color/transparent"/>
- <stroke
- android:width="1dp"
- android:color="@android:color/darker_gray"/>
- <padding android:bottom="4dp"/>
- </shape>
- </item>
- </layer-list>
et_underline_selected.xml
- <?xml version="1.0" encoding="utf-8"?>
- <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
- <item
- android:bottom="0dp"
- android:left="-2dp"
- android:right="-2dp"
- android:top="-2dp">
- <shape>
- <solid android:color="@android:color/transparent"/>
- <stroke
- android:color="@android:color/holo_green_light"
- android:width="2dp"/>
- <padding android:bottom="4dp"/>
- </shape>
- </item>
- </layer-list>
我将 layer-list 理解成一个图层列表,shape 就是列表中的一个 item,由于我们只需要下边框有横线,所以除了 shape 在列表中的下边距外都设为负值。光标和下划线之间要有点距离,所以 shape 的下方内边距设为 4dp。当然,被选中时的下划线宽度要大一点。
在项目中新建一个 SecondActivity,继承于 Activity,然后在布局文件中放置两个 EditText,background 都设为 "@null",光标就用我们之前的浅蓝色。
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical"
- tools:context="com.lindroid.edittext.SecondActivity">
- <EditText
- android:id="@+id/editText1"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_margin="3dp"
- android:background="@null"
- android:hint="自定义EditText下划线1"
- android:textCursorDrawable="@drawable/cursor_color"/>
- <EditText
- android:id="@+id/editText2"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_margin="3dp"
- android:background="@null"
- android:hint="自定义EditText下划线2"
- android:textCursorDrawable="@drawable/cursor_color"/>
- </LinearLayout>
然后在代码中设置 EditText 的监听事件
- /**初始化EditText,默认都为未选中状态**/editText1.setBackgroundResource(R.drawable.et_underline_unselected);
- editText2.setBackgroundResource(R.drawable.et_underline_unselected);/**第一个EditText的焦点监听事件**/editText1.setOnFocusChangeListener(newView.OnFocusChangeListener() {@Override
- public void onFocusChange(View v,booleanhasFocus) {if(hasFocus) {
- Log.e(TAG,"EditText1获得焦点");
- editText1.setBackgroundResource(R.drawable.et_underline_selected);
- }else{
- Log.e(TAG,"EditText1失去焦点");
- editText1.setBackgroundResource(R.drawable.et_underline_unselected);
- }
- }
- });/**第二个EditText的焦点监听事件**/editText2.setOnFocusChangeListener(newView.OnFocusChangeListener() {@Override
- public void onFocusChange(View v,booleanhasFocus) {if(hasFocus) {
- Log.e(TAG,"EditText2获得焦点");
- editText2.setBackgroundResource(R.drawable.et_underline_selected);
- }else{
- Log.e(TAG,"EditText2失去焦点");
- editText2.setBackgroundResource(R.drawable.et_underline_unselected);
- }
- }
- });
注意,要先将所有的 EditText 都设置为未选中时的背景,不然在焦点监听事件被触发之前 EditText 都是没有下划线的。
运行一下,效果如下:
效果我们是实现了,但是这样一来 Activity 中的代码显得太冗长,因此我们可以将选中和未选中的状态封装到状态选择器中。在 drawable 文件夹下新建一个 et_underline_selector.xml 文件:
- <?xml version="1.0" encoding="utf-8" ?>
- <selector xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:state_focused="false" android:drawable="@drawable/et_underline_unselected"
- />
- <item android:state_focused="true" android:drawable="@drawable/et_underline_selected"
- />
- </selector>
表示控件是否获得焦点。然后在布局文件中设置
- android:state_focused
,Activity 的焦点监听代码删去就可以了。运行,就可以看到一模一样的效果了。
- android:background="@drawable/et_underline_selector"
文章至此就结束了,但是我要学的东西还有很多,文章里的某些知识出于我个人理解,可能会有不足或者错误,欢迎大家指正!
由于这里的代码比较简单,工程就不上传了,大家动手敲一敲,相信没有问题的。
Android EditText 改变边框颜色 Android 更改 EditText 下划线颜色样式的方法
来源: http://blog.csdn.net/lindroid20/article/details/72551102