讀書APP原始碼，搜尋欄模糊處理實現的相關程式碼

1.實現

1.1 EditText監聽部分

方法解釋：

EditText的addTextChangedListener監聽如下，可以看到共有三個方法

beforeTextChanged()

在EditText輸入前，先呼叫一次該方法

afterTextChanged()

在EditText輸入完成後，呼叫一次該方法

onTextChanged()

在EditText輸入過程中，不斷的回撥該方法

etContent.addTextChangedListener(object : TextWatcher {
    
    override fun afterTextChanged(s: Editable?) {
    }
    override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int)  {
    }
    override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
    }
})

效果實現：

我們想實現的效果有如下內容

當輸入框內有內容時則顯示刪除按鈕，沒有內容時則隱藏

在輸入過程中不斷的進行網路請求

搜尋有結果時則顯示Recyclerview，沒有資料則隱藏

具體實現：

etContent.addTextChangedListener(object : TextWatcher {    
    ......
    override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) { 
        if (etContent.text.isNullOrEmpty()) {
            //輸入框為空，刪除按鈕隱藏
            ivDel.visibility = View.GONE
            //當輸入框為空時，隱藏recyclerview，目的是隱藏上一次的搜尋結果
            recy.visibility = View.GONE
        } else {
//輸入框不為空，刪除按鈕展示
            ivDel.visibility = View.VISIBLE            
          //輸入框發生變化就進行網路請求           
            mainViewModel.getFuzzySearchList(Const.fuzzySearchUrl,etContent.text.toString())
        }
    }
})

1.2 網路請求部分

介面部分：

模糊搜尋

@GET請求

引數：key：wd value：要搜尋的內容

地址：

使用以上介面，傳入一個引數wd即可，wd為我們輸入框的內容

interface ApiService {
@GET
fun getFuzzySearchList(@Url url:String,@Query("wd") content:String): Call<ResponseBody>
}

詳情介面

Url為：文字框內容+&cl=3

這裡我們簡單的通過webview載入該網頁即可

邏輯部分：

請求完成後若資料為空，則要隱藏Recyclerview皮膚，反之則顯示

請求完成後對Recyclerview進行更新

2. 具體實現

MainActivity

class MainActivity : AppCompatActivity() {
    
    //建立ViewModel
    private val mainViewModel: MainViewModel by lazy {
        ViewModelProvider(this, ViewModelProvider.AndroidViewModelFactory(application)).get(
            MainViewModel::class.java
        )
    }
    private val data = mutableListOf<String>()
    private val myAdapter = MyAdapter(data)
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        //Recyclerview相關配置
        recy.layoutManager = LinearLayoutManager(this)
        recy.adapter = myAdapter
        //跳轉到詳情頁
        myAdapter.setOnMyClickListener(object :MyAdapter.MyClickListener{
            override fun onClick(position: Int) {
                val intent = Intent(this@MainActivity,NewsShowActivity::class.java)
                val url = Const.serchUrl+data[position]+"&cl=3"
                intent.putExtra("url",url)
                startActivity(intent)
                //跳轉後清空搜尋框，隱藏Recyclerview皮膚
                etContent.setText("")
                recy.visibility = View.GONE
                
            }
        //模糊搜尋結果監聽
        mainViewModel.getResultLiveData().observe(this, Observer {
            if(it.isEmpty()){
                //資料為空，隱藏RecyclerView皮膚
                recy.visibility = View.GONE
            }else{
                recy.visibility = View.VISIBLE
            }
            //搜尋完成後對RecyclerView更新
            data.clear()
            data.addAll(it)
            myAdapter.notifyDataSetChanged()            
        })
            
        //EditText搜尋框進行監聽   
        etContent.addTextChangedListener(object : TextWatcher {
            override fun afterTextChanged(s: Editable?) {     
            }
            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {              
            }
            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
                if (etContent.text.isNullOrEmpty()) {
                    ivDel.visibility = View.GONE
                    //為空時如果不隱藏， 上一次搜尋的結果就會在下面顯示不會隱藏
                    recy.visibility = View.GONE
                } else {
                    ivDel.visibility = View.VISIBLE                                       
                    //進行網路請求
                    mainViewModel.getFuzzySearchList(Const.fuzzySearchUrl,etContent.text.toString())
                    }
                }
            })
    }
}

MainViewModel

模糊搜尋返回的資料是如下格式，而且是GBK編碼，所以我們在請求成功後需要對資料進行下處理

window.baidu.sug({q:"奧運會",p:false,s:["奧運會","奧運會女子200米蝶泳決賽","奧運會獎牌榜","奧運會賽程","奧運會金牌榜2021","奧運會乒乓球","奧運會直播","奧運會多少年舉辦一次","奧運會在哪看","奧運會裁判"]});
1
class MainViewModel :ViewModel(){
    
    private val httpClient = OkHttpClient.Builder()
    .connectTimeout(5, TimeUnit.SECONDS)
    .readTimeout(5, TimeUnit.SECONDS)
    .writeTimeout(5, TimeUnit.SECONDS)
    .build()
    private val retrofit: Retrofit =Retrofit.Builder()
    .baseUrl(")
    .client(httpClient)
    .addConverterFactory(GsonConverterFactory.create())
    .build()
    private val api = retrofit.create(ApiService::class.java)
    
    
     /**
     * 模糊搜尋
     */
    fun getFuzzySearchList(url:String,content:String){
        api.getFuzzySearchList(url,content).enqueue(object : retrofit2.Callback<ResponseBody> {
            override fun onFailure(call: Call<ResponseBody>, t: Throwable) {
                errorLiveData.value = t.message
            }
            override fun onResponse(call: Call<ResponseBody>, response: Response<ResponseBody>) {
                if(response?.body() != null){
                    //因為模糊搜尋的結果是GBK編碼，所以這裡需要處理下
                    val charset = response.body()!!.contentType()!!.charset()!!
                    val source = response?.body()?.source()
                    source?.let {                       
                        source.skip(ByteString.decodeHex("efbbbf").size().toLong())
                    }
                    
                    val string = response?.body()?.string()
                    string?.let {
                        val startIndex = it.indexOf("(")
                        val endIndex =  it.length-2
                        //擷取
                        val json = it.substring(startIndex+1, endIndex)
                        val jsonObject = gson.fromJson<ResultBean>(json, ResultBean::class.java)
                        //對資料進行更新
                        resultLiveData.value = jsonObject.s
                    }
                }
            }
        })
    }        
}

以上就是讀書APP原始碼，搜尋欄模糊處理實現的相關程式碼，更多內容歡迎關注之後的文章

讀書APP原始碼，搜尋欄模糊處理實現

相關文章