Material Design整理（六）——SearchView及FlexboxLayout

github地址 点击打开

简介

大多APP都具有搜索功能，但是大部分都是在标题栏中放置搜索的图标或者是不可输入的EditText，当点击的时候，开启另外一个界面进行搜索，但是业务要求：点击搜索按钮，就会出现输入框，点击返回时，又会再次收起，我们就可以使用SearchView来实现。

SearchView拥有强大的功能和属性，让我们在做搜索框时不再使用EditText和大量处理来实现！简单、方便！

---

使用

SearchView一般与ToolBar结合使用，下面我们以此为例一起探讨。ToolBar不太了解的可以阅读这篇文章点击打开

1、创建带有SearchView的menu文件

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <!--右侧搜索操作条目--> <item android:id="@+id/action_search" android:title="搜索" android:icon="@mipmap/ic_search" app:actionViewClass="android.support.v7.widget.SearchView" app:showAsAction="always"/> </menu>

其中，actionViewClass中指定view类型为SearchView

---

2、布局文件中添加ToolBar

<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />

ToolBar添加得再正常不过了

---

3、在Activity中获取ToolBar和设置menu

supportRequestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_search); toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.setNavigationIcon(R.mipmap.ic_arrow_back); toolbar.setTitleTextColor(Color.WHITE); toolbar.setTitle("搜索"); setSupportActionBar(toolbar); @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_search, menu); MenuItem menuItem = menu.findItem(R.id.action_search); searchView = (SearchView) MenuItemCompat.getActionView(menuItem); return super.onCreateOptionsMenu(menu); }

注意上方代码：先用menu.findItem生成MenuItem对象，在用MenuItem获取SearchView。

---

4、更换默认图标颜色

SearchView的默认图标都是黑色的，如果我们想换成其他颜色，在Activity的主题中，指定Toolbar菜单项图标的颜色

<style name="SeachViewActivityTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <!--toolbar菜单项图标的颜色--> <item name="android:textColorSecondary">@android:color/white</item> </style>

这样就将ToolBar的图标颜色更换了。

---

5、设置SearchView的样式

大家看代码就很清楚了，不再详细介绍

searchView.setSubmitButtonEnabled(true);//显示提交按钮 searchView.setIconified(false);//设置searchView处于展开状态 searchView.onActionViewExpanded();// 当展开无输入内容的时候，没有关闭的图标 searchView.setIconifiedByDefault(true);//默认为true在框内，设置false则在框外 searchView.setSubmitButtonEnabled(true);// 显示提交按钮 searchView.setQueryHint("输入关键字");

---

6、SearchView字体颜色设置

mSearchAutoComplete = searchView.findViewById(R.id.search_src_text); mSearchAutoComplete.setHintTextColor(getResources().getColor(android.R.color.white));//设置提示文字颜色 mSearchAutoComplete.setTextColor(getResources().getColor(android.R.color.white));//设置内容文字颜色

---

7、SearchView内容监听

searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() { @Override public boolean onQueryTextSubmit(String query) { Snackbar.make(searchView, "搜索" + query,BaseTransientBottomBar.LENGTH_LONG).show(); return false; } @Override public boolean onQueryTextChange(String newText) { return false; } });

---

8、关联navigationIcon的点击

toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (mSearchAutoComplete.isShown()) { try { mSearchAutoComplete.setText("");//清除文本 //利用反射调用收起SearchView的onCloseClicked()方法 Method method = searchView.getClass().getDeclaredMethod("onCloseClicked"); method.setAccessible(true); method.invoke(searchView); } catch (IllegalAccessException e) { e.printStackTrace(); } catch (InvocationTargetException e) { e.printStackTrace(); } catch (NoSuchMethodException e) { e.printStackTrace(); } } else { finish(); } } });

ok！到这里，大家就对SearchView有个初步认识了，期待大家的回复，一起深入研究！

---

顺便简单说一下FlexboxLayout

相信大家都写过流式布局，典型用处就是搜索界面的标签和商品界面的筛选功能。

之前用过鸿洋大神写的FlowLayout，不过Google开源了新的容器，就是FlexboxLayout，使用它会让我们流式布局更加简单。

另外FlexboxLayout还可以结合RecyclerView轻松实现瀑布流，这个打算以后再整理。

---

1、添加依赖

compile 'com.google.android:flexbox:0.2.3'

2、布局简单写法

<com.google.android.flexbox.FlexboxLayout android:layout_width="match_parent" android:layout_height="match_parent" android:padding="8dp" app:flexWrap="wrap" app:alignItems="center" app:alignContent="flex_start" app:flexDirection="row" app:justifyContent="flex_start"> <TextView android:layout_width="wrap_content" android:layout_height="35dp" android:paddingLeft="15dp" android:paddingRight="15dp" android:layout_margin="5dp" app:layout_alignSelf="flex_start" android:text="程序员" android:gravity="center" android:textColor="#8bc34a" android:background="@drawable/shape_tag_item" /> <TextView android:layout_width="wrap_content" android:layout_height="35dp" android:paddingLeft="15dp" android:paddingRight="15dp" android:layout_margin="5dp" app:layout_alignSelf="flex_start" android:text="散文" android:gravity="center" android:textColor="#8bc34a" android:background="@drawable/shape_tag_item" /> <TextView android:layout_width="wrap_content" android:layout_height="35dp" android:paddingLeft="15dp" android:paddingRight="15dp" android:layout_margin="5dp" app:layout_alignSelf="flex_start" android:text="程序员" android:gravity="center" android:textColor="#8bc34a" android:background="@drawable/shape_tag_item" /> <TextView android:layout_width="wrap_content" android:layout_height="35dp" android:paddingLeft="15dp" android:paddingRight="15dp" android:layout_margin="5dp" app:layout_alignSelf="flex_start" android:text="IT" android:gravity="center" android:textColor="#8bc34a" android:background="@drawable/shape_tag_item" /> <TextView android:layout_width="wrap_content" android:layout_height="35dp" android:paddingLeft="15dp" android:paddingRight="15dp" android:layout_margin="5dp" app:layout_alignSelf="flex_start" android:text="苹果" android:gravity="center" android:textColor="#8bc34a" android:background="@drawable/shape_tag_item" /> </com.google.android.flexbox.FlexboxLayout>

3、父容器属性介绍

·a

app:flexWrap="wrap"

flexWrap 属性表示换行与否，默认为noWrap，表示不换行，wrap表示自动换行，还有一个wrap_reverse 表示副轴反转

·b

app:flexDirection="row"

flexDirection 表示子元素的排列方向，元素的排列方向为主轴的方向，该属性有四种取值，不同取值对应不同的主副轴，参考下图：

·c

app:justifyContent="flex_start"

justifyContent 表示控件沿主轴对齐方向，有五种取值，默认情况下大家看到控件是左对齐（flex_start），另外还有主轴居中对齐（center）

---

4、子控件属性介绍

·a

app:layout_order="2"

这个表示子元素的优先级，默认值为1，数值越大越靠后显示

·b

app:layout_flexGrow="2"

这个类似于权重属性

·c

app:layout_flexShrink="2"

表示空间不足时，子控件缩放比例，0表示不缩放，例如以下代码

<com.google.android.flexbox.FlexboxLayout android:layout_width="300dp" android:layout_height="wrap_content"> <TextView android:layout_width="300dp" android:layout_height="48dp" app:layout_flexShrink="2" android:background="@color/colorPrimary"/> <TextView app:layout_flexShrink="1" android:layout_width="100dp" android:layout_height="48dp" android:background="@color/colorAccent"/> </com.google.android.flexbox.FlexboxLayout>

父容器总宽度为300dp，结果两个子元素加起来就400，超过了100dp，总共需要缩小100dp，根据flexShrink属性，第一个TextView缩小100的三分之二，第二个TextView缩小100的三分之一。

---

OK，以上就是SearchView及FlexboxLayout的简单介绍，有错误的地方或不足的地方，希望大家能够指出。