android kotlin editText仿searchView实现

做个笔记
class SearchEditText @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyle: Int = 0
) : ConstraintLayout(context, attrs, defStyle) {

    @StringRes
    private var defaultTxt: Int = 0
    var callback: CallBack? = null

    init {
        View.inflate(context, R.layout.layout_search_edit, this)

        searchEdit.doAfterTextChanged { editContent ->
          //设置右边的icon
            editOperate.setImageResource(if (editContent.isNullOrEmpty()) R.drawable.icon_voice else R.drawable.ic_close_black_24dp)
            editOperate.debounceClick {
                callback?.let { callback ->
                    //回调
                    if (editContent.isNullOrEmpty()) {
                        callback.onVoice()
                    } else {
                        clearEdit()
                    }
                }

            }
        }

    }

    private fun clearEdit() {
        searchEdit.text = null
    }
    //这里可以拿到editText的值
    fun editTxtContent(): String = searchEdit.text.toString()

    fun setDefaultTxt(@StringRes id: Int) {
        defaultTxt = id
        searchEdit.hintResource = defaultTxt
    }

    interface CallBack {
        fun onVoice()
    }
}

UI样式,

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:paddingEnd="@dimen/gap_8">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_search_gray_24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/searchEdit"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:ellipsize="end"
        android:imeOptions="actionSearch"
        android:inputType="text"
        android:lines="1"
        android:paddingLeft="30dp"
        android:paddingEnd="30dp"
        tools:text="22222222" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/editOperate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/gap_8"
        android:src="@drawable/icon_voice"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

editText中

android:imeOptions="actionSearch"

将软键盘中的回车改为了“搜索”

searchView.apply {
            setDefaultTxt(
                //给editText设置hint,注意这里使用的是的@StringRes
            )

            callback = object : SearchEditText.CallBack {
                override fun onVoice() {
                    //点击右上角点击voiceIcon的点击事件,可以弹出语音听写啥的
                }
            }
            searchEdit.setOnEditorActionListener { _, actionId, _ ->
                if (actionId == EditorInfo.IME_ACTION_SEARCH) {
                    //软键盘中的搜索键操作所需要的逻辑
                    //searchEditText中的editTxtContent()方法可以直接拿到editText输入的值
                }
                false
            }
            searchEdit.afterTextChangeEvents().skipInitialValue()
                .debounce(500, TimeUnit.NANOSECONDS).observeOn(AndroidSchedulers.mainThread())
                .subscribeBy {
                   //一些搜索联想,搜索建议的的操作
                }
        }

以上就完成了,配合在AppBarLayout中使用,欢迎指正

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容