1. 程式人生 > >Android自定義View之FairySearchView(靈活的通用搜索控制元件)

Android自定義View之FairySearchView(靈活的通用搜索控制元件)

1.概述

FairySearchView是經過封裝的通用搜索控制元件,可以根據需求切換不同的佈局模式。內建多種事件監聽器,可以滿足不同場景的業務需求,使用方式非常靈活。

2.效果預覽

顯示所有控制元件(無輸入內容) 顯示所有控制元件(有輸入內容)
點選了回車/搜尋 不顯示返回按鈕
不顯示取消按鈕 不顯示返回/取消按鈕

3.基本用法

Gradle配置

//根專案下的build.gradle
allprojects {
    repositories {
        maven { url "https://jitpack.io"
} } } //主專案下的build.gradle dependencies { implementation 'com.github.CodingEnding:FairySearchView:1.01' }

基本使用

搜尋欄一般巢狀在Toolbar中使用,如下:

<!-- 將FairySearView巢狀在Toolbar中使用(也可以單獨使用) -->
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:contentInsetStart="0dp">
<com.codingending.library.FairySearchView android:id
="@+id/search_view" android:layout_width="match_parent" android:layout_height="wrap_content" app:searchViewHeight="55dp" app:showSearchIcon="true" app:showBackButton="true" app:showClearButton="true" app:showCancelButton="true" />
</android.support.v7.widget.Toolbar>

提示: Toolbar預設有16dp的左邊距,這會影響UI效果,可以通過設定app:contentInsetStart="0dp"取消這個邊距。

當然,FairySearchView也可以作為一個普通控制元件使用。注意,FairySearchView預設並沒有設定背景,如果將其作為普通控制元件請設定android:background屬性。

相關屬性

屬性名 型別 預設值 說明
app:searchViewHeight dimension 52dp 中間輸入區域的高度
app:maxSearchLength integer x 輸入框的最大文字長度
app:showBackButton boolean false 是否顯示左側返回按鈕
app:backIcon drawable x 左側返回按鈕的圖示
app:showSearchIcon boolean true 是否顯示輸入框左側的搜尋按鈕
app:backIcon drawable x 輸入框左側的搜尋按鈕圖示
app:showClearButton boolean true 是否顯示輸入框右側的清除按鈕
app:clearIcon drawable x 輸入框右側的清除按鈕圖示
app:showCancelButton boolean true 是否顯示右側的取消按鈕
app:cancelText string 取消 右側取消按鈕顯示的文字
app:cancelTextSize dimension 16sp 右側取消按鈕的文字大小
app:cancelTextColor color fff 右側取消按鈕的文字顏色
app:searchText string x 輸入框的內容
app:searchTextSize dimension 14sp 輸入框的的文字大小
app:searchTextColor color 212121 輸入框的的文字顏色
app:searchHint string x 輸入框的提示文字
app:searchHintColor color aaa 輸入框的的提示文字顏色

監聽器

FairySearchView內建了多個事件監聽器,可以根據實際需求靈活設定。

監聽左側返回按鈕的點選事件:

fairySearchView.setOnBackClickListener(new FairySearchView.OnBackClickListener() {
    @Override
    public void onClick() {
        //TODO
    }
});

監聽清除按鈕的點選事件:

fairySearchView.setOnClearClickListener(new FairySearchView.OnClearClickListener() {
    @Override
    public void onClick(String oldContent) {
        //oldContent:被清除的內容
    }
});

說明: 預設情況下點選清除按鈕會清空輸入框中的內容,如果沒有特殊的需求請不要設定這個監聽器。

監聽右側取消按鈕的點選事件:

fairySearchView.setOnCancelClickListener(new FairySearchView.OnCancelClickListener() {
    @Override
    public void onClick() {
        //TODO
    }
});

監聽輸入框內容的變化:

fairySearchView.setOnEditChangeListener(new FairySearchView.OnEditChangeListener() {
    @Override
    public void onEditChanged(String nowContent) {
        //nowContent:輸入框中的內容
    }
});

監聽虛擬鍵盤的右下角回車/搜尋按鍵點選事件(此時可以執行搜尋):

fairySearchView.setOnEnterClickListener(new FairySearchView.OnEnterClickListener() {
    @Override
    public void onEnterClick(String content) {
        //content:輸入框中的內容
    }
});

相關方法

FairySearchView為大部分屬性提供了對應的getter/setter方法,下面列出其中的一部分,其他的方法也基本類似。

方法名 返回值 說明
setSearchText(String text) void 設定輸入內容
getSearchText string 獲得輸入內容
setSearchTextSize(int searchTextSize) void 設定輸入文字大小(px)
setSearchTextColor(int searchTextColor) void 設定輸入文字顏色
setSearchHint(String searchHint) void 設定提示文字
setSearchHintColor(int searchHintColor) void 設定提示文字顏色
setSearchViewHeight(int searchViewHeight) void 設定輸入區域高度(px)
setMaxSearchLength(int maxSearchLength) void 限制輸入內容的最大長度
setBackIcon(int backIcon) void 設定返回按鈕的圖示
setShowBackButton(boolean showBackButton) void 設定是否顯示返回按鈕
……… ………. ……….

4.實現思路

本庫的實現方式還是挺簡單的,主要參考了多種常用的搜尋框UI風格,並進行了適當封裝。允許使用者根據需求切換不同的佈局模式,並向外暴露需要的監聽器介面。

更多的細節可以參考Github上的程式碼。

5.Github地址