MaterialSearchBar

วัสดุแถบค้นหา Android

แถบค้นหาการออกแบบวัสดุสำหรับ Android

---

ไลบรารี่ที่สวยงามและใช้งานง่ายนี้จะช่วยเพิ่ม Lollipop Material Design SearchView ในโครงการของคุณ

---

ดูวิกิของเรา

วิธีใช้

เพื่อรวม SearchBar ในโครงการของคุณ:

เพิ่มรหัสนี้ลงในไฟล์ build.gradle ระดับโครงการ

 allprojects {
	repositories {
		.. .
		maven { url " https://jitpack.io " }
	}
}

เพิ่มการพึ่งพาให้กับไฟล์ build.gradle ระดับแอป

 dependencies {
	implementation ' com.github.mancj:MaterialSearchBar:X.X.X '
}

จากนั้นเพิ่ม SearchBar ให้กับกิจกรรมของคุณ:

< com .mancj.materialsearchbar.MaterialSearchBar
    style = " @style/MaterialSearchBarLight "
    app : mt_speechMode = " true "
    app : mt_hint = " Custom hint "
    app : mt_maxSuggestionsCount = " 10 "
    android : layout_width = " match_parent "
    android : layout_height = " wrap_content "
    android : id = " @+id/searchBar " />

---

MaterialSearchBar มีแอตทริบิวต์ xml ดังต่อไปนี้:

คุณลักษณะ	คำอธิบาย
mt_speechMode	หากตั้งค่าเป็นจริง ไอคอนไมโครโฟนจะแสดงแทนไอคอนค้นหา
mt_maxSuggestionsCount	ระบุจำนวนคำค้นหาสูงสุดที่เก็บไว้
mt_navIcon เปิดใช้งานแล้ว	ตั้งค่าไอคอนการนำทางเปิดใช้งาน
mt_roundedSearchBarEnabled	ใช้แถบค้นหารูปแคปซูลในเวอร์ชัน 21+ และเปลี่ยนกลับเป็นค่าเริ่มต้นที่ด้านล่าง
mt_dividerColor	กำหนดสีของคำแนะนำและตัวแบ่งเมนู
mt_searchBarColor	ตั้งค่าสีหลักของแถบค้นหา
mt_menuIconDrawable	ตั้งค่าไอคอนเมนูที่วาดได้
mt_searchIconDrawable	ตั้งค่าไอคอนการค้นหาที่วาดได้เมื่อโหมดคำพูดเป็นเท็จ
mt_speechIconDrawable	ตั้งค่าไอคอนคำพูดที่วาดได้เมื่อโหมดคำพูดเป็นจริง
mt_backIconDrawable	ตั้งค่าไอคอนลูกศรย้อนกลับที่วาดได้
mt_clearIconDrawable	ตั้งค่าไอคอนที่ชัดเจนที่สามารถวาดได้
mt_navIconTint	ตั้งค่าสีอ่อนของไอคอนภาพเคลื่อนไหว nav/back
mt_menuIconTint	กำหนดสีอ่อนของไอคอนเมนู
mt_searchIconTint	ตั้งค่าการค้นหาสีอ่อน / ไอคอนคำพูด
mt_backIconTint	ตั้งค่าสีอ่อนของไอคอนลูกศรย้อนกลับ
mt_clearIconTint	กำหนดสีอ่อนของไอคอนที่ชัดเจน
mt_navIconUseTint	ไอคอนการนำทางแบบเคลื่อนไหวควรใช้สีอ่อน
mt_menuIconUseTint	ไอคอนเมนูควรใช้สีอ่อน
mt_searchIconUseTint	ไอคอนการค้นหา/คำพูดควรใช้สีอ่อน
mt_backIconUseTint	ไอคอนด้านหลังควรใช้สีอ่อน
mt_clearIconUseTint	ไอคอนที่ชัดเจนควรใช้สีอ่อน
mt_hint	ตั้งค่าข้อความของคำใบ้เมื่อแถบค้นหาถูกโฟกัสและคำค้นหาว่างเปล่า
mt_placeholder	ตั้งค่าข้อความตัวยึดเมื่อไม่ได้โฟกัส MaterialSearchBar
mt_textColor	ตั้งค่าสีข้อความ
mt_hintColor	ตั้งค่าสีคำใบ้
mt_placeholderColor	ตั้งค่าสีตัวยึดตำแหน่ง
mt_textCursorTint	ตั้งค่าสีเคอร์เซอร์ข้อความ
mt_highlightedTextColor	ตั้งค่าสีอ่อนสำหรับเน้นข้อความ

---

วิธีการสาธารณะ:

• addTextChangeListener(TextWatcher textWatcher)
• clearSuggestions()
• closeSearch()
• openSearch()
• getLastSuggestions()
• getMenu()
• getText()
• hideSuggestionList()
• inflateMenu(int menuResource)
• inflateMenu(int menuResource, int icon)
• isSearchOpened()
• isSpeechModeEnabled()
• isSuggestionsVisible()
• setArrowIcon(int arrowIconResId)
• setArrowIconTint(int arrowIconTint)
• setCardViewElevation(int elevation)
• setClearIcon(int clearIconResId)
• setClearIconTint(int clearIconTint)
• setCustomSuggestionAdapter(SuggestionsAdapter suggestionAdapter)
• setDividerColor(int dividerColor)
• setHint(CharSequence hintText)
• setIconRippleStyle(boolean borderlessRippleEnabled)
• setLastSuggestions(List suggestions)
• setMaxSuggestionCount(int maxSuggestionsCount)
• setMenuDividerEnabled(boolean menuDividerEnabled)
• setMenuIcon(int menuIconResId)
• setMenuIconTint(int menuIconTint)
• setNavButtonEnabled(boolean navButtonEnabled)
• setNavIconTint(int navIconTint)
• setOnSearchActionListener(OnSearchActionListener onSearchActionListener)
• setPlaceHolder(CharSequence placeholder)
• setPlaceHolderColor(int placeholderColor)
• setRoundedSearchBarEnabled(boolean roundedSearchBarEnabled)
• setSearchIcon(int searchIconResId)
• setSearchIconTint(int searchIconTint)
• setSpeechModeEnabled(boolean speechMode)
• setSuggestionsClickListener(SuggestionsAdapter.OnItemViewClickListener listener)
• setText(String text)
• setTextColor(int textColor)
• setTextHighlightColor(int highlightedTextColor)
• setTextHintColor(int hintColor)
• showSuggestions()
• updateLastSuggestions(List suggestions)

---

แถบค้นหาวัสดุจัดแต่งทรงผม

สไตล์ที่กำหนดเอง - styles.xml สร้างสไตล์ที่กำหนดเองและใช้สไตล์ใดสไตล์หนึ่งที่มีให้เป็นพาเรนต์

Provided Styles are: MaterialSearchBarLight and MaterialSearchBarDark

Example:
< style name = " MyCustomTheme " parent = " MaterialSearchBarLight " >
     < item name = " mt_searchBarColor " >@color/searchBarPrimaryColor</ item >
            < item name = " mt_dividerColor " >@color/searchBarDividerColor</ item >
            < item name = " mt_navIconTint " >@color/searchBarNavIconTintColor</ item >
            < item name = " mt_searchIconTint " >@color/searchBarSearchIconTintColor</ item >
            < item name = " mt_clearIconTint " >@color/searchBarClearIconTintColor</ item >
            < item name = " mt_menuIconTint " >@color/searchBarMenuIconTintColor</ item >
            < item name = " mt_backIconTint " >@color/searchBarBackIconTintColor</ item >
            < item name = " mt_textCursorTint " >@color/searchBarCursorColor</ item >
            < item name = " mt_textColor " >@color/searchBarTextColor</ item >
            < item name = " mt_hintColor " >@color/searchBarHintColor</ item >
            < item name = " mt_placeholderColor " >@color/searchBarPlaceholderColor</ item >
            < item name = " mt_highlightedTextColor " >@color/searchBarTextHighlightColor</ item >
</ style >

หรือ

สีที่กำหนดเอง - colours.xml เพียงตั้งค่า/เปลี่ยนสีเหล่านี้ (หรือบางส่วน) แล้วคุณจะมีสไตล์ที่คุณกำหนดเอง

    //Material SearchBar Light Theme Colors
        < color name = " searchBarIconColor " >#3a3a3a</ color >
        //Base
        < color name = " searchBarPrimaryColor " >#FFFFFF</ color >
        < color name = " searchBarCursorColor " >#8000a1ff</ color >
        < color name = " searchBarDividerColor " >#1F000000</ color >
    
        //Icons
        < color name = " searchBarNavIconTintColor " >@color/searchBarIconColor</ color >
        < color name = " searchBarMenuIconTintColor " >@color/searchBarIconColor</ color >
        < color name = " searchBarSearchIconTintColor " >@color/searchBarIconColor</ color >
        < color name = " searchBarClearIconTintColor " >@color/searchBarIconColor</ color >
        < color name = " searchBarBackIconTintColor " >@color/searchBarIconColor</ color >
    
        //Text
        < color name = " searchBarTextColor " >#DE000000</ color >
        < color name = " searchBarHintColor " >#42000000</ color >
        < color name = " searchBarPlaceholderColor " >#8A000000</ color >
        < color name = " searchBarTextHighlightColor " >#8000a1ff</ color >
    
        //Base
        < color name = " searchBarPrimaryColorDark " >#303030</ color >
        < color name = " searchBarDividerColorDark " >#1FFFFFFF</ color >
    
        //Material SearchBar Dark Theme Colors
        < color name = " searchBarIconColorDark " >#00a1ff</ color >
        //Icons
        < color name = " searchBarNavIconTintColorDark " >@color/searchBarIconColorDark</ color >
        < color name = " searchBarMenuIconTintColorDark " >@color/searchBarIconColorDark</ color >
        < color name = " searchBarSearchIconTintColorDark " >@color/searchBarIconColorDark</ color >
        < color name = " searchBarClearIconTintColorDark " >@color/searchBarIconColorDark</ color >
        < color name = " searchBarBackIconTintColorDark " >@color/searchBarIconColorDark</ color >
    
        //Text
        < color name = " searchBarTextColorDark " >#DEFFFFFF</ color >
        < color name = " searchBarHintColorDark " >#42FFFFFF</ color >
        < color name = " searchBarPlaceholderColorDark " >#8AFFFFFF</ color >
        < color name = " searchBarTextHighlightColorDark " >#BF00a1ff</ color >

---

หากต้องการบันทึกคำค้นหาเมื่อกิจกรรมถูกทำลาย ให้ใช้เมธอด searchBar.getLastSuggestions() จากนั้นเพื่อเรียกคืนคำค้นหาให้ใช้ searchBar.setLastSuggestions(List<String>); ดังแสดงในตัวอย่างด้านล่าง

ตัวอย่าง

นี่คือตัวอย่างง่ายๆ ของการใช้ MaterialSearchBar

 private List < String > lastSearches ;
private MaterialSearchBar searchBar ;

@ Override
protected void onCreate ( Bundle savedInstanceState ) {
    super . onCreate ( savedInstanceState );
    setContentView ( R . layout . activity_main );

    searchBar = ( MaterialSearchBar ) findViewById ( R . id . searchBar );
    searchBar . setHint ( "Custom hint" );
    searchBar . setSpeechMode ( true );
    //enable searchbar callbacks
    searchBar . setOnSearchActionListener ( this );
    //restore last queries from disk
    lastSearches = loadSearchSuggestionFromDisk ();
    searchBar . setLastSuggestions ( list );
    //Inflate menu and setup OnMenuItemClickListener
    searchBar . inflateMenu ( R . menu . main );
    searchBar . getMenu (). setOnMenuItemClickListener ( this );
}

@ Override
protected void onDestroy () {
    super . onDestroy ();
    //save last queries to disk
    saveSearchSuggestionToDisk ( searchBar . getLastSuggestions ());
}

@ Override
public void onSearchStateChanged ( boolean enabled ) {
    String s = enabled ? "enabled" : "disabled" ;
    Toast . makeText ( MainActivity . this , "Search " + s , Toast . LENGTH_SHORT ). show ();
}

@ Override
public void onSearchConfirmed ( CharSequence text ) {
    startSearch ( text . toString (), true , null , true );
}

@ Override
public void onButtonClicked ( int buttonCode ) {
    switch ( buttonCode ){
        case MaterialSearchBar . BUTTON_NAVIGATION :
            drawer . openDrawer ( Gravity . LEFT );
            break ;
        case MaterialSearchBar . BUTTON_SPEECH :
            openVoiceRecognizer ();
    }
}

ตัวอย่างเพิ่มเติม