Android自定義View之FairySearchView(靈活的通用搜索控制元件)
阿新 • • 發佈:2019-02-15
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上的程式碼。