专栏首页Android机动车Material Design整理(六)——SearchView及FlexboxLayout

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),作者:贾帅

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Material Design 在 Android 中的应用

    我刚来这个公司的时候,每个周三都会有分享会,主题自定,分享对象尽量是面向大众,一开始觉得不错,但是到后面发现分享的内容不是那么有营养,而且积极性不是很高,都是当...

    蜻蜓队长
  • 如何动态更换App图标

    在Android开发中,通常会有这样的需求,逢年过节UI的小伙伴们都会做出节日或活动相关的APP图标让我们更换,可是每次更换都要发版实现。那么,如何在不发版的情...

    蜻蜓队长
  • 从零开始搭建MVVM架构(1)——DataBinding

    从零开始搭建MVVM架构系列文章(持续更新): Android从零开始搭建MVVM架构(1)————DataBinding Android从零开始搭建M...

    蜻蜓队长
  • Android应用界面开发——Widget(实现液晶时钟)

    桌面控件是通过BroadcastReceiver的形式进行控制的,因此每个桌面控件都对应于一个BroadcastReceiver。开发桌面控件时,只需继承Bro...

    trampcr
  • 第一个Android应用Android应用界面开发

    给项目取名First Application 主界面命名FirstAty,xml文件命名就自动使用activity_first_aty吧。

    爱因斯坦福
  • 线性布局LinearLayout(二)

    线性布局,顾名思义,指的是整个Android布局中的控件摆放方式是以线性的方式摆放的, 代码中加载主界面布局是从onCreate开始的:

    李小白是一只喵
  • Android自定义View

    前几天在郭霖大神的博客上看了自定义View的知识,感觉受益良多,大神毕竟大神。在此总结一下关于Android 自定义View的用法:

    指点
  • [android] 手机卫士自定义对话框布局

    点击手机防盗,进行判断,如果没有设置密码,显示一个设置密码的对话框,如果已经设置密码了,弹出输入密码对话框

    陶士涵
  • Android 基础动画之 scale 渐变缩放

    和尚最近在学习 ViewPager 的小动画,说来惭愧,工作这么久了一直没有认真了解过动画这部分,今天特意学习一下 Android 的基本动画。

    阿策
  • TimePicker控件、帧动画、补间动画

    1.TimePicker控件 最近感觉每个开发平台的控件基本都差不多,在Android中控件的事件和.net控件直接写事件有一定的区别,net事件可以直接界面进...

    水击三千

扫码关注云+社区

领取腾讯云代金券