Material Design整理(六)——SearchView及FlexboxLayout

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

原文发布于微信公众号 - Android机动车(JsAndroidClub)

原文发表时间:2017-12-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android机器圈

Achartengine.jar绘制动态图形一 --饼图

PS:我们在做安卓程序的时候,免不了会做一些图形,自己可以选择自定义view ,就是用Canvas画,也可以用写好的jar包,就是achartengine.ja...

4528
来自专栏Android群英传

饿了么丝滑无缝过度搜索栏的实现

1903
来自专栏Android相关

LinearLayout.onMeasure--事例说明

将LinearLayout中代码Copy了一份存在本地,然后再在里面加了几个子View,打印出来LinearLayout.onMeasure中的那些变量的值

1032
来自专栏大壮

iOS 动画(理论篇)

1625
来自专栏lzj_learn_note

RecyclerView的一些开源LayoutManager

Google默认为RecyclerView提供了LinearLayoutManager、StaggeredGridLayoutManager、GridLayou...

3993
来自专栏移动开发

杂记

1.EditText自动获取焦点弹出软键盘 为了防止上述情况,可以在其父级控件中添加如下属性:

1263
来自专栏游戏杂谈

“穿透”层的鼠标事件

需要实现如下的效果,有一个浮动层,需要层级在它之下的一个元素也能照常响应相应的事件

1192
来自专栏lzj_learn_note

自定义无限循环ViewPager(二)――ViewPager滑动原理解析

在前面一篇文章中,已经分析了ViewPager初始化的原理,而本篇文章开始分析ViewPager的滑动及页面切换的原理。在阅读本文之前,大家可以先去了解下Scr...

1551
来自专栏KK的小酒馆

初识自定义控件Android应用界面开发

自定义控件是个大坑,并不能在此以偏概全阐述出它的精髓,笔记仅作为一方面的了解作用。

761
来自专栏Web项目聚集地

Javascript将HTML转成PDF并下载「支持多页」

由于html2canvas只能将它能处理的生成canvas image,因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与,整个图片都由客户端浏览...

2732

扫码关注云+社区