美文网首页
Button根据EditText输入状态改变背景颜色

Button根据EditText输入状态改变背景颜色

作者: 程序员张晴天 | 来源:发表于2018-06-12 07:48 被阅读40次

    需求

    Button随EditText输入状态改变颜色

    有3个不同颜色状态,

    • EditText未输入时,Button处于不可点击状态
    • EditText输入时,Button处于高亮状态
    • EditText输入且用户按下按钮,Button --> Pressed状态

    效果如下:


    演示图片

    EditText在没有输入时,Button不可点击,为灰色状态
    EditText输入后,Button可点击,且背景变为蓝色
    EditText输入后,点击Button时,Button背景色变为红色

    解决思路

    EditText的输入通过添加addTextChangedListener来监听
    Button的点击颜色变化使用selector来控制

    遇到的问题

    在根据以上的实现思路实现时,遇到了一些问题

    问题一:在Selector中使用android:color属性报错
    button_selector.xml代码:

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@android:color/holo_red_light" android:state_pressed="true"/>
        <item android:color="@android:color/darker_gray"/>
    </selector>
    

    应用崩溃的错误日志:

    Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #0: <item> tag requires a 'drawable' attribute or child tag defining a drawable
    

    日志提示在item子节点中必须要求有drawable属性,根据错误信息将所有color属性替换成了drawable,修改后的button_selector.xml如下:

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@android:color/holo_red_light" android:state_pressed="true"/>
        <item android:drawable="@android:color/darker_gray"/>
    </selector>
    

    问题二:selector没有作用,Button按下时颜色并没有改变
    给Button的background属性设置了button_selector
    然后在EditText. addTextChangedListener中的onTextChanged方法中检测EditText的输入状态

            editText.addTextChangedListener(new TextWatcher() {
                @Override
                public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    
                }
    
                @Override
                public void onTextChanged(CharSequence s, int start, int before, int count) {
                    //EditText输入状态改变,Button背景颜色也改变
                    if ("".equals(editText.getText().toString().trim())) {
                        button.setBackgroundColor(Color.GRAY);
                        button.setEnabled(false);
                    } else {
                        button.setBackgroundColor(ContextCompat.getColor(context, R.color.color_blue));
                    }
                }
    
                @Override
                public void afterTextChanged(Editable s) {
    
                }
            });
    

    在EditText中输入字符后,Button背景色变为蓝色,但是pressed时却没有变成红色,背景还是蓝色,发现是button.setBackgroundColor(ContextCompat.getColor(context, R.color.color_blue));把Button的背景色给写死了,所以Button的颜色没办法改变

    解决方案

    整理了下问题,最后想到了一个解决方案,在布局文件中,把Button的background的属性由selector设置为不可点击颜色灰色android:background="@android:color/darker_gray",然后在onTextChanged()中,当EditText输入时,设置Button的background为selector,而不是写死颜色,这样就可以解决在EditText输入时,点击Button背景颜色却无法变化的问题!

            editText.addTextChangedListener(new TextWatcher() {
                @Override
                public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    
                }
    
                @Override
                public void onTextChanged(CharSequence s, int start, int before, int count) {
                    //EditText输入状态改变,Button背景颜色也改变
                    if ("".equals(editText.getText().toString().trim())) {
                        button.setBackgroundColor(Color.GRAY);
                        button.setEnabled(false);
                    } else {
                        //设置selector来控制Button背景颜色
                        button.setBackground(ContextCompat.getDrawable(context,
                                R.drawable.button_input_selector));
                        button.setEnabled(true);
                    }
                }
    
                @Override
                public void afterTextChanged(Editable s) {
    
                }
            });
    

    相关文章

      网友评论

          本文标题:Button根据EditText输入状态改变背景颜色

          本文链接:https://www.haomeiwen.com/subject/ozaheftx.html