Android之自定义EditText光标和下划线颜色

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Android之自定义EditText光标和下划线颜色 - Lindroid的博客
- 博客频道 - CSDN.NET

Lindroid的博客

不积跬步，无以至千里。

【活动】2017 CSDN博客专栏评选

&nbsp

【5月书讯】流畅的Python，终于等到你！
   &nbsp

CSDN日报20170522 ——《从个人习惯到真正的好方法》

   &nbsp

如何看待 Kotlin 成为 Android 官方支持开发语言？

Android之自定义EditText光标和下划线颜色

标签：
androidUI控件

2017-05-22 13:38
52人阅读
评论(0)
收藏
举报

本文章已收录于：

.embody{
padding:10px 10px 10px;
margin:0 -20px;
border-bottom:solid 1px #ededed;
}
.embody_b{
margin:0 ;
padding:10px 0;
}
.embody .embody_t,.embody .embody_c{
display: inline-block;
margin-right:10px;
}
.embody_t{
font-size: 12px;
color:#999;
}
.embody_c{
font-size: 12px;
}
.embody_c img,.embody_c em{
display: inline-block;
vertical-align: middle;
}
.embody_c img{
width:30px;
height:30px;
}
.embody_c em{
margin: 0 20px 0 10px;
color:#333;
font-style: normal;
}


分类：

Android学习（17）

作者同类文章X

UI控件（5）

作者同类文章X

版权声明：本文为作者原创，欢迎转载和交流O(∩_∩)O

最近在写些小Demo复习基础，在用到EditText的时候突然发现之前几乎没有注意到它的光标和下划线的颜色，于是花了不少时间，看了不少博客，现在就来总结和分享一下收获。

1、第一印象：原生的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>

运行工程，仔细观察可以看到光标和下划线都是粉红色的。现在就让我们循序渐进，先修改它的光标颜色。

2、自定义光标颜色

EditText 有一个属性：android:textCursorDrawable ，它就是用来设置光标样式的。为了加深认识，大家先额外做个小实验：将textCursorDrawable设置为@null，表示去除系统默认的样式，但我们都记得隐藏光标的属性是android:cursorVisible , 那么这时光标会是什么样子的呢？你可以给文字（android:textColor）和提示文字（android:textColorHint属性）设置不同的颜色，运行之后就会发现此时光标的颜色是跟文字的保持一致的。

了解了android:textCursorDrawable 的作用之后，我们可以在drawable资源文件夹下新建一个cursor_color.xml文件，内容如下

<?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" />

运行效果如下：

3、取消背景后的EditText

第2节中，我们将属性android:textCursorDrawable 设置为“@null”之后发现光标的样式会变得跟文字的颜色一样，那么如果将整个EditText的背景设置为“@null”呢？我们可以添加一个EditText，然后为它增加属性android:background="@null" ：

可以看到，虽然光标的样式没有改变，但是下划线消失了，不过除此之外，EditText的边距也没有了，如果不是光标在闪烁，一眼看上去就像个TextView了。

网上有些自定义EditText下划线的教程就是这样操作的，先把背景去除，再在下面加一个横线。这样的操作未尝不可，但是为了美观，还是得重新设置间距值。。

4、自定义主题修改下划线

还记得刚才我们在创建MainActivity时要继承AppCompatActivity吗？到了这里就要揭晓答案了。这样做是为了使用appcompat-v7包中的Material Design样式，比如我们可以在Styles.xml文件中新建一个MyEditText样式：

    <style name="MyEditText" parent="Theme.AppCompat.Light">
        <item name="colorControlNormal">@android:color/darker_gray</item>
        <item name="colorControlActivated">@android:color/holo_orange_dark</item>
    </style>

colorControlNormal 表示控件默认的颜色，colorControlActivated 表示控件被激活时的颜色，这样，我们就可以分别设置EditText不被选中和选中时的颜色了。这里我将选中的颜色设为橙色。

在activity_main.xml中再增加一个EditText，加上android:theme="@style/MyEditText" 属性，效果如下：

可以看到，光标和下划线的颜色都会修改掉，而间距还是会保留。

5、全局修改EditText颜色

前面的做法都是针对一个EditText来修改的，如果需要把项目中所有的EditText的颜色都改掉的话，那这样做的话工作量就太大了。有没有办法可以一脚定江山的呢？

不知道你发现了没有，为什么EditText默认是骚气的粉红色呢？事实上，你设置其他几种控件（比如ProgressBar、Switch等等），它们的颜色基本上也是骚粉。你只要再看一眼刚才的styles.xml，里面的AppTheme的代码是这样的：

    <style 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>
    </style>

看到了吗？里面的colorAccent就是那个骚粉色了。为了理解这三种颜色，我特地找了一张图：

6、继承Activity时自定义下划线

前面我们做的自定义下划线操作都是在继承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(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                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(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                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都设置为运行一下，效果如下：

效果我们是实现了，但是这样一来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表示控件是否获得焦点。然后在布局文件中设置 android:background="@drawable/et_underline_selector" ，Activity的焦点监听代码删去就可以了。运行，就可以看到一模一样的效果了。

7、后记

文章至此就结束了，但是我要学的东西还有很多，文章里的某些知识出于我个人理解，可能会有不足或者错误，欢迎大家指正！

由于这里的代码比较简单，工程就不上传了，大家动手敲一敲，相信没有问题的。

参考文献

Android EditText 改变边框颜色

Android更改EditText下划线颜色样式的方法

时间： 2024-08-04 10:36:56

Android之自定义EditText光标和下划线颜色的相关文章

CSS改变字体下划线颜色

下图是网页中一个很普通的列表. 这次去见客户的时候,客户觉得下划线的颜色可以变变,网页就变得不单调了(据后来了解,客户上学时出板报,所以对网站的布局和细节非常的重视).做网站那么久,第一次要换下划线颜色,客户就是上帝,提出这个需求,立马查阅相关资料,发现下划线颜色是随着字体的颜色改变的,不能单独改变. 额,那怎么办? 办法总比困难多,通过使用css border-bottom实现改变文字字体下划线颜色即可. CSS代码:style="border-bottom: 1px solid blue;t

Android 如何自定义EditText 下划线？

项目要求: 笔者曾经做过一个项目,其中登录界面的交互令人印象深刻.交互设计师给出了一个非常作的设计,要求做出包含根据情况可变色的下划线,左侧有可变图标,右侧有可变删除标志的输入框,如图 记录制作过程: 第一版本 public class LineEditText extends EditText { private Paint mPaint; private int color; public static final int STATUS_FOCUSED = 1; public static

android实现对导航Tab设置下划线选中效果

技术人员核心竞争力还是技术啊.努力提高各种实现效果.加油哦! 直接看效果.此linearLayout只有两个Button ,当选中Button1,Button1有个下划线选中效果.当选中Buton2,Button2有个下划线选中效果. 如下图. package com.daoge.ui; import roboguice.activity.RoboActivity; import roboguice.inject.InjectView; import android.graphics.drawa

android-TimePickerDialog 下划线颜色修改

首先就是去framework下去找与之相关的theme属性 最开始的时候,直接找的是<item name="datePickerStyle">@style/Widget.Funui.DatePicker</item> ,但是,往父类里面找的话,并没有找到有效属性,仅仅就有一个布局 <item name="android:internalLayout">@android:layout/date_picker_holo</ite

Android输入时EditText光标不显示的解决方法

<EditText android:cursorVisible="true" android:textCursorDrawable="@null"/>即设置textCursorDrawable为@null,这样光标就默认显示字体的颜色,也可以设置一个自定义的drawable. 原文地址:https://www.cnblogs.com/yongfengnice/p/10730291.html

TabTopUnderLineLayout【自定义顶部选项卡（带下划线）】

版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线样式的效果. 备注:如果配合Fragment的话,MainActivity中的写法需要灵活处理. 效果图 代码分析 TabTopUnderLineLayout:顶部选项卡布局类——自定义的LinearLayout子类:实现了各个选项卡的布局.状态切换.点击事件的回调 使用步骤 一.项目组织结构图 注意事项: 1.  导入类文件后需要change包名以及重新import R文件路

TabTopAutoLayout【自定义顶部选项卡区域（带下划线）（动态选项卡数据且可滑动）】

版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线且可滑动效果.[实际情况中建议使用RecyclerView] 备注:如果配合Fragment的话,MainActivity中的写法需要灵活处理. 效果图 代码分析 TabTopAutoLayout:底部选项卡布局类——自定义的LinearLayout子类:实现了各个选项卡的布局.状态切换.点击事件的回调. 需要注意:注释掉params.weight = 1; //设置要添加的子

css光标下划线跟随效果

直接上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul { display: flex; position: absolute; width: 1000px; top: 50%; left: 50%; -webkit-transform

UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线

一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某几个角(小于4)为圆角而别的不变时,怎么做呢? 其实很简单,使用UIBezierPath,设置CAShapeLayer,给UIView设置遮罩效果即可. // 图标左上.左下切圆角 UIBezierPath *phoneIconPath = [UIBezierPath bezierPathWithR