自定义View——加强版的EditText

Posted 鹏达君

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义View——加强版的EditText相关的知识,希望对你有一定的参考价值。

1.如何加强?

输入内容后,有面会显示一个图片,用户点击后 可以清空文本框。

 

2.案例构造步骤

1)在drawable文件中建一个bg_frame_search.xml文件。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/background_white" />
    <corners android:radius="5dp" />
    <stroke android:width="1px" android:color="@color/frame_search"/>
</shape>

 

2)在drawable中放置你要显示的图片,图片名称为:delete_gray。

 

3)书写自定义view。

import android.content.Context;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.EditText;
/**
 * Created by 刘鹏达 on 2017/12/9.
 */

public class DelEditText extends EditText {

    private Drawable imgClear;
    private Context mContext;

    public DelEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        init();
    }

    private void init() {
        imgClear = mContext.getResources().getDrawable(R.drawable.delete_gray);
        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) {

            }
            //在内容改变完之后
            @Override
            public void afterTextChanged(Editable editable) {
                setDrawable();
            }
        });
    }


    //绘制删除图片
    private void setDrawable(){
        if (length() < 1)
            setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);
        else
            setCompoundDrawablesWithIntrinsicBounds(null, null, imgClear, null);
    }


    //当触摸范围在右侧时,触发删除方法,隐藏叉叉
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if(imgClear != null && event.getAction() == MotionEvent.ACTION_UP)
        {
            int eventX = (int) event.getRawX();
            int eventY = (int) event.getRawY();
            Rect rect = new Rect();
            getGlobalVisibleRect(rect);
            rect.left = rect.right - 100;
            if (rect.contains(eventX, eventY))
                setText("");
        }
        return super.onTouchEvent(event);
    }


    @Override
    protected void finalize() throws Throwable {
        super.finalize();
    }

}

 

4)引用自定义view

布局:

<LinearLayout 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"
    android:background="@color/back_red"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.example.edittextzdy.DelEditText
        android:id="@+id/edit_search"
        android:layout_width="match_parent"
        android:layout_height="32dp"
        android:layout_margin="10dp"
        android:background="@drawable/bg_frame_search"
        android:hint="带删除按钮的EditText~"
        android:maxLength="20"
        android:padding="5dp"
        android:singleLine="true" />


</LinearLayout>

activity:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

 

效果图:

 

总结:大家看了这几个案例之后,只是知道了,哦,我要实现自定义view大概应该怎么去操作,但对操作的底层,或者说本质却有点模糊,所以之后我们就来谈谈自定义view的深入了。

以上是关于自定义View——加强版的EditText的主要内容,如果未能解决你的问题,请参考以下文章

Android 自定义view-仿新浪微博#话题#插入EditText

如果 EditText 字段中有文本,如何更改 backgroundtint 颜色?

使用颜色选择器更改片段中edittext的背景颜色

如何在自定义适配器中搜索?

Android:在片段内膨胀自定义视图

android 自定义View 使用 DataBinding 笔记