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

蜻蜓队长

发布于 2018-08-03 14:30:44

1.1K0

发布于 2018-08-03 14:30:44

文章被收录于专栏：Android机动车Android机动车

github地址：https://github.com/shuaijia/MaterialDesignDemo

简介

大多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的简单介绍，有错误的地方或不足的地方，希望大家能够指出。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2017-12-07，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自 Android机动车微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

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

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

github地址：https://github.com/shuaijia/MaterialDesignDemo

简介

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

使用

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

1、创建带有SearchView的menu文件

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

2、布局文件中添加ToolBar

ToolBar添加得再正常不过了

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

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

4、更换默认图标颜色

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

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

5、设置SearchView的样式

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

6、SearchView字体颜色设置

7、SearchView内容监听

8、关联navigationIcon的点击

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

顺便简单说一下FlexboxLayout

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

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

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

1、添加依赖

2、布局简单写法

3、父容器属性介绍

·a

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

·b

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

·c

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

4、子控件属性介绍

·a

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

·b

这个类似于权重属性

·c

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

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐