MaterialSearchView 使用教程

MaterialSearchView 使用教程

MaterialSearchViewCute library to implement SearchView in a Material Design Approach项目地址:https://gitcode.com/gh_mirrors/ma/MaterialSearchView

项目介绍

MaterialSearchView 是一个基于 Material Design 规范的 Android 搜索视图库。它提供了一个美观且易用的搜索界面，可以覆盖在 Toolbar 或 ActionBar 上，并显示一个 ListView 来展示用户的建议或最近的搜索。该库支持多种语言，并且可以根据需要进行样式定制。

项目快速启动

添加依赖

首先，在项目的 build.gradle 文件中添加 MaterialSearchView 的依赖：

implementation 'com.miguelcatalan:materialsearchview:1.4.0'

布局文件

在布局文件中添加 MaterialSearchView：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp" />

    <com.miguelcatalan.materialsearchview.MaterialSearchView
        android:id="@+id/search_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</FrameLayout>

代码实现

在 Activity 中设置 MaterialSearchView：

import com.miguelcatalan.materialsearchview.MaterialSearchView;

public class MainActivity extends AppCompatActivity {

    private MaterialSearchView searchView;

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

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        searchView = findViewById(R.id.search_view);
        searchView.setOnSearchViewListener(new MaterialSearchView.SearchViewListener() {
            @Override
            public void onSearchViewShown() {
                // 搜索视图显示时的操作
            }

            @Override
            public void onSearchViewClosed() {
                // 搜索视图关闭时的操作
            }
        });

        searchView.setOnQueryTextListener(new MaterialSearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                // 提交搜索查询时的操作
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                // 搜索文本变化时的操作
                return false;
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_menu, menu);
        MenuItem item = menu.findItem(R.id.action_search);
        searchView.setMenuItem(item);
        return true;
    }
}

应用案例和最佳实践

自定义样式

可以通过修改 styles.xml 文件来自定义 MaterialSearchView 的样式：

<style name="MaterialSearchViewStyle">
    <item name="searchBackground">@color/white_ish</item>
    <item name="searchVoiceIcon">@drawable/ic_action_voice_search</item>
    <item name="searchCloseIcon">@drawable/ic_action_navigation_close</item>
    <item name="searchBackIcon">@drawable/ic_action_navigation_arrow_back</item>
    <item name="searchSuggestionBackground">@color/search_layover_bg</item>
    <item name="historyIcon">@drawable/ic_history_white</item>
    <item name="suggestionIcon">@drawable/ic_action_search_white</item>
    <item name="listTextColor">@color/white_ish</item>
    <item name="searchBarHeight">?attr/actionBarSize</item>
</style>

添加搜索建议

可以通过 setSuggestions 方法添加搜索建议：

List<String> suggestions = new ArrayList<>();
suggestions.add("Apple");
suggestions.add("Banana");
suggestions.add("Cherry");
searchView.setSuggestions(suggestions);

MaterialSearchViewCute library to implement SearchView in a Material Design Approach项目地址:https://gitcode.com/gh_mirrors/ma/MaterialSearchView