Android自定義View實(shí)現(xiàn)搜索框(SearchView)功能-創(chuàng)新互聯(lián)

概述

創(chuàng)新互聯(lián)主營(yíng)平魯網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app軟件開發(fā)公司,平魯h5小程序制作搭建,平魯網(wǎng)站營(yíng)銷推廣歡迎平魯?shù)鹊貐^(qū)企業(yè)咨詢

在Android開發(fā)中,當(dāng)系統(tǒng)數(shù)據(jù)項(xiàng)比較多時(shí),常常會(huì)在app添加搜索功能,方便用戶能快速獲得需要的數(shù)據(jù)。搜索欄對(duì)于我們并不陌生,在許多app都能見到它,比如豌豆莢

在某些情況下,我們希望我們的自動(dòng)補(bǔ)全信息可以不只是純文本,還可以像豌豆莢這樣,能顯示相應(yīng)的圖片和其他數(shù)據(jù)信息,因此Android給我們提供的AutoCompleteTextView往往就不夠用,在大多情況下我們都需要自己去實(shí)現(xiàn)搜索框。

分析

根據(jù)上面這張圖,簡(jiǎn)單分析一下自定義搜索框的結(jié)構(gòu)與功能,有
1. 搜索界面大致由三部門組成,如圖:輸入框+(自動(dòng)補(bǔ)全)提示框+結(jié)果列表。
2. 提示框的數(shù)據(jù)與輸入框輸入的文本是實(shí)時(shí)聯(lián)動(dòng)的,而結(jié)果列表只有在每次進(jìn)行搜索操作時(shí)才會(huì)更新數(shù)據(jù)

3. 輸入框的UI應(yīng)是動(dòng)態(tài)的,即UI隨著輸入的文本的改變而改變,如:在未輸入文本時(shí),清除按鈕Android自定義View實(shí)現(xiàn)搜索框(SearchView)功能應(yīng)該是隱藏的;只有當(dāng)框中有文本時(shí)才會(huì)顯示。
4. 軟鍵盤也應(yīng)該是動(dòng)態(tài)的,如完成搜索時(shí)應(yīng)自動(dòng)隱藏。
5. 選擇提示框的選項(xiàng)會(huì)自動(dòng)補(bǔ)全輸入框,且自動(dòng)進(jìn)行搜索
6. (external)有熱門搜索推薦/記錄搜索記錄的功能——熱門搜索推薦列表只在剛要進(jìn)行搜索的時(shí)候彈出,即未輸入文本時(shí),可供用戶選擇。

根據(jù)上面的分析,我們認(rèn)為一個(gè)搜索框應(yīng)該包含輸入框和提示框兩個(gè)部分。搜索框可以設(shè)置一個(gè)回調(diào)監(jiān)聽接口,當(dāng)需要進(jìn)行搜索操作時(shí),調(diào)用監(jiān)聽者的search()方法,從而實(shí)現(xiàn)具體的搜索操作以及結(jié)果列表的數(shù)據(jù)聯(lián)動(dòng)。

演示Demo

注意:


1. 這里,博主圖方便沒有模擬太多數(shù)據(jù),而且提示框和熱搜列表也都只是使用String類型的數(shù)據(jù),各位看官們可以根據(jù)自身需要去設(shè)置item_layout和相應(yīng)的adapter。
2. 由于個(gè)人習(xí)慣,博主在這個(gè)demo中使用了通用適配器,所以生成和設(shè)置adapter的代碼比較簡(jiǎn)略,看官們可以根據(jù)傳統(tǒng)的ViewHolder模式打造自己的adapter。或者學(xué)習(xí)一下通用適配器的打造??梢詤⒖歼@里(鴻神博客Again)學(xué)習(xí)一下通用適配器的打造,在我的源碼里面也有對(duì)應(yīng)的源碼。

實(shí)現(xiàn)

好了,說了那么多,開始來看代碼吧

先看SearchView的布局文件 search_layout.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:background="#eee" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:orientation="vertical"> 
 
  <LinearLayout 
    android:background="#eb4f38" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal"> 
 
 
    <FrameLayout 
 
      android:layout_weight="1" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content"> 
 
      <EditText 
        android:id="@+id/search_et_input" 
        android:layout_gravity="center_vertical" 
        android:layout_margin="10dp" 
        android:drawableLeft="@drawable/search_icon" 
        android:drawablePadding="5dp" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:background="@drawable/search_edittext_shape" 
        android:textSize="16sp" 
        android:imeOptions="actionSearch" 
        android:inputType="text" 
        android:hint="請(qǐng)輸入關(guān)鍵字"/> 
 
      <ImageView 
        android:visibility="gone" 
        android:layout_marginRight="20dp" 
        android:src="@drawable/iv_delete_bg" 
        android:id="@+id/search_iv_delete" 
        android:layout_gravity="right|center_vertical" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"/> 
    </FrameLayout> 
 
    <Button 
      android:id="@+id/search_btn_back" 
      android:layout_marginRight="10dp" 
      android:layout_marginTop="10dp" 
      android:layout_marginBottom="10dp" 
      android:layout_gravity="center_vertical" 
      android:background="@drawable/btn_search_bg" 
      android:layout_width="@dimen/btn_width" 
      android:layout_height="@dimen/btn_height" 
      android:text="返回" 
      android:textColor="@color/color_white"/> 
  </LinearLayout> 
 
  <ListView 
    android:visibility="gone" 
    android:id="@+id/search_lv_tips" 
    android:background="@drawable/lv_search_tips_bg" 
    android:layout_marginLeft="20dp" 
    android:layout_marginRight="20dp" 
    android:layout_marginBottom="10dp" 
    android:layout_width="match_parent" 
    android:layout_height="200dp"> 
  </ListView> 
</LinearLayout> 

本文名稱:Android自定義View實(shí)現(xiàn)搜索框(SearchView)功能-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接:http://muchs.cn/article22/cddocc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站網(wǎng)頁設(shè)計(jì)公司、關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航、網(wǎng)站策劃

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化