项目需求讨论-标题栏上的搜索功能
今天讲的就是一个很简单的具体开始时候遇到的需求,在标题栏中实现搜索功能,而且美工要求需要实现下面GIF图的效果,我就实现了下,可能不是最好的,有哪里可以更方便请大家指出。正好仔细的讲解了下SearchView和Toolbar。希望大家看看我哪里是不是讲错了。哈哈。
1.先抛开搜索功能,我们看如何单纯实现下图的标题栏的界面:
因为我平常项目中的标题栏使用的是Toolbar。当然大家在这个需求上面,用个其他类型的ViewGroup也是一样的。大家知道,Toolbar也是继承ViewGroup的,
public class Toolbar extends ViewGroup {}复制代码
所以使用方法也是和一般的ViewGroup一样。
<android.support.v7.widget.Toolbarandroid:id="@+id/common_toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="@color/colorPrimary"><TextViewandroid:id="@+id/tool_bar_choose"style="@style/TabTitleStyle"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="待审批" /><ImageViewandroid:id="@+id/start_search"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:src="@drawable/search_icon" /> </android.support.v7.widget.Toolbar>复制代码
没错,我们就是直接在Toolbar中放置子元素,为了把标题TextView放置在正中间,使用android:layout_gravity="center"
,然后因为搜索按钮是在右边,对ImageView使用android:layout_gravity="right"
。
这时候有人会问了,那左边的返回按钮呢。怎么没写在布局中。
因为返回按钮有二种方式来进行处理显示,我们分别来说明:
在Activity中写上代码:
Toolbar toolbar = (Toolbar) findViewById(R.id.common_toolbar); if(toolbar != null){toolbar.setNavigationIcon(R.drawable.toolbar_back_icon);toolbar.setNavigationOnClickListener(v -> finish()); }复制代码
在Activity中获取到了Toolbar的对象,然后设置Navigation图标及Navigation的点击事件即可。
同样在是在Activity中写上代码:
//先让返回箭头出现 Toolbar toolbar = (Toolbar) findViewById(R.id.common_toolbar); setSupportActionBar(toolbar); ActionBar bar = getSupportActionBar(); bar.setDisplayHomeAsUpEnabled(true);复制代码
这时候出现的返回箭头是系统原生的,是这样的:
跟我们原来的需求的返回图标不同,所以我们也有二种方法来进行修改:
- 在我们引入的Appbar的theme中添加一个Item,将设计师给我们的图放进去
<item name="android:homeAsUpIndicator">@drawable/web_detail_back</item>
- 在我们的Toolbar中添加属性
app:navigationIcon="@drawable/web_detail_back"
记得要在根布局中添加xmlns:app="http://schemas.android.com/apk/res-auto"
- 在我们引入的Appbar的theme中添加一个Item,将设计师给我们的图放进去
我们添加了返回图标后,我们就需要给他点击事件,这里也有二种实现方式:
- 覆写
onOptionsItemSelected
方法:@Override public boolean onOptionsItemSelected(MenuItem item) {switch (item.getItemId()) {case android.R.id.home:finish();break;}return true; }复制代码
- 在AndroidManifest.xml中对当前Activity中添加,声明该Activity的父Activity是哪个,然后按返回的时候就跳到那个父Activity中。
<activity android:name=".modules.view.activity.ApproveActivity"><meta-dataandroid:name="android.support.PARENT_ACTIVITY"android:value=".modules.view.activity.LoginActivity" /> </activity>复制代码
2.实现搜索框功能
我们上面说过Toolbar实际上就是一个ViewGroup,所以我就想到可以让Toolbar中包含一个FragmentLayout,然后在这个上面的标题的标题及搜索图标按钮上面,覆盖了一层我们要的SearchView,然后默认是隐藏的,点击搜索图标按钮后让SearchView显示就可以了。其实的确很简单。
我们的布局代码就变成了:(ps:因为我用的是百分比布局,所以Framelayout变为了PercentFrameLayout,LinearLayout变为了PercentLinearLayout)
<android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="@color/colorPrimary"><android.support.percent.PercentFrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/tool_bar_choose"style="@style/TabTitleStyle"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:drawablePadding="10dp"android:drawableRight="@drawable/more_unfold"android:text="待审批" /><ImageViewandroid:visibility="gone"android:id="@+id/start_search"android:layout_width="40dp"android:layout_height="match_parent"android:layout_gravity="right"android:scaleType="center"android:src="@drawable/search_icon" /><com.chint.pay.widget.PercentLinearLayoutandroid:id="@+id/search_group"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center_vertical"android:visibility="gone"><android.support.v7.widget.SearchViewandroid:id="@+id/search_view"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/search_view_background"app:layout_heightPercent="70%"android:queryHint="请输入姓名或者手机号"app:layout_widthPercent="85%" /><TextViewandroid:id="@+id/cancel_search"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="取消"android:textColor="@android:color/white"android:textSize="14sp" /></com.chint.pay.widget.PercentLinearLayout></android.support.percent.PercentFrameLayout></android.support.v7.widget.Toolbar>复制代码
好的,看布局代码,就知道在第一步中的标题栏的布局的上面,覆盖了一层横向布局,用来显示SearchView和取消按钮,该界面默认是隐藏的,只有当按了搜索图标按钮,再让这个横向布局显示,盖在上面,(当然同时也可以让原来的标题和搜索图标按钮隐藏)。
这本来是我们想要的效果,但是当我运行了代码后,我看到生成的界面是这样的:
原来,Toolbar自带的左边的按钮,是默认先占了它的位置,然后剩下的面积再是放我们自己定义的FrameLayout,所以我们的FrameLayout总体就先往右边偏移了。这时候又因为我们的标题是FrameLayout的中间,所以标题也整体往右边便宜了。那岂不是都不能实现了??该怎么处理呢??答案当然是有方法处理。(这B装的我好累。)
我们可以直接在ToolBar中,自己在左边添加一个ImageView,然后图片设为返回的图标,然后给这个ImageView添加点击事件就OK了。所以我们在上面的布局代码中的PercentFrameLayout中再添加一个ImageView元素:
<android.support.percent.PercentFrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:id="@+id/tool_back"android:layout_width="30dp"android:scaleType="center"android:layout_marginLeft="-5dp"android:layout_height="match_parent"android:src="@drawable/toolbar_back_icon"android:layout_gravity="center_vertical"/>....................</android.support.percent.PercentFrameLayout>复制代码
这下我们的布局整个都实现了。只要对相应的按钮实现点击事件,控制相关控件的显示及隐藏即可。
3.SearchView的显示及键盘弹出
SearchView基础我就不重复了,先附上其他大神写的SearchView的相关基础知识:
搜索框(SearchView)的功能与用法
详细解读Android中的搜索框(三)—— SearchView
我们看到,在GIF图中,当我点击了搜索图标按钮的时候,SearchView 的Visible设为显示状态,同时键盘出现,然后当我点击取消按钮的时候,SearchView 的Visible设为隐藏状态,同时键盘消失,SearView的显示和隐藏这个大家都只要,只要调用SearchView.setVisibility方法即可。那键盘呢,其实不用特意去设定键盘的弹出及隐藏。
我这边是使用了SearchView的onActionViewCollapsed及onActionViewExpanded方法
onActionViewExpanded方法:
初始SearchView是否已经是展开的状态
写上此句后searchView初始展开的,也就是是可以点击输入的状态,如果不写,那么就需要点击下放大镜,才能展开出现输入框。
同理,onActionViewCollapsed正好相反。
因为设置他们的展开与不展开,正好会自动调用键盘的显示和隐藏。所以我们这里正好调用这二个方法:
switch (view.getId()) {case R.id.start_search:searchGroup.setVisibility(View.VISIBLE);startSearch.setVisibility(View.GONE);searchView.onActionViewExpanded();break;case R.id.cancel_search:searchGroup.setVisibility(View.GONE);startSearch.setVisibility(View.VISIBLE);searchView.onActionViewCollapsed();break;
}复制代码
这里还要对SearchView 调用:
searchView.setIconifiedByDefault(false);复制代码
从上面图片可以看到,设为false和true的区别在于输入的光标的显示位置,如果为true,设光标在放大镜的前面,而且,当你输入文字后,放大镜也会不见,设为false,则光标在放大镜后面,输入文字,放大镜也不会消失。
同时记得对SearchView设置搜索事件:
searchView.setOnQueryTextListener(this);复制代码
Activity 实现SearchView.OnQueryTextListener接口,覆写相关方法:
@Override
public boolean onQueryTextSubmit(String query) {Toast.makeText(aty, "你搜索了:" + query, Toast.LENGTH_SHORT).show();return false;
}@Override
public boolean onQueryTextChange(String newText) {return false;
}复制代码
这样就结束了。哈哈,希望大家不要乱喷我。有错请留言。O(∩_∩)O
补充1:
感谢大家下面留言指出错误,说是标题并没有居中,我用AS的布局工具看了,没有居中的原因如下图所示:
Toolbar的自己本身左边padding的一部分值,所以我们只需要给Toolbar加上
app:contentInsetStart="0dp"
属性即可,加上该属性后,我们可以看到如下的布局了。
项目需求讨论-标题栏上的搜索功能相关推荐
- 排版 项目 html,项目需求讨论: 文字显示排版— Html 格式
嗨,各位,今天来个小技巧,估计很多人都知道,我也就重复提下罢了.. 比如 升级更新框 通知提示框 我们看到,我用红框框出来的地方 1.直接使用系统自带的AlertDialog的提示框,我们看到了我们更 ...
- java 搜索业务怎么写_Java项目实战第11天:搜索功能的实现
原标题:Java项目实战第11天:搜索功能的实现 今天是刘小爱自学Java的第110天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 事先说明:关于今天的搜索功能实现. 并没有使用到倒排索引这 ...
- 项目需求讨论-APP手势解锁及指纹解锁
好久没写文章了,最近也比较偷懒,今天继续讨论我实际开发中遇到的需求,那就是关于APP解锁,大家都知道.现在越来越多的APP在填入账号密码后,第二次登录后,基本不会再次重复输入账号密码了.而是快捷登录, ...
- 网站搜索功能怎么实现_电商网站上的搜索功能是如何实现的?
今天是刘小爱自学Java的第159天. 感谢你的观看,谢谢你. 学习计划安排如下: 索引库本质上和数据库类似,也是存储数据的,既然如此自然也会有增删改查. 那么这个索引库到底有何特别应用呢? 索引库的 ...
- android 仿ios 底部弹出,项目需求讨论-仿ios底部弹框实现及分析
hi,在项目开发中,有时候需要仿照ios的底部弹框做效果,比如我们在iPhone上面关闭定位的时候,就会弹出ios特有的底部弹框: 屏幕快照 2017-10-09 08.20.30 PM.png 弹框 ...
- Win10企业版任务栏上搜索功能失效的解决方法
Win10企业版任务栏上搜索功能失效的解决方法 1. 系统版本与问题描述 ① 系统版本 ② 问题描述 2. 问题分析与解决方法 ① 问题分析 ② 解决方法 1. 系统版本与问题描述 ① 系统版本 系统 ...
- 6月3号抖音显示服务器维护中,抖音搜索功能升级维护 期间无法进行用户搜索
这两天有很多小伙伴说抖音上的搜索功能搜不到人了,这是怎么回事呢?其实,这两天,抖音的搜索功能正在升级维护,所以导致搜索功能暂时无法使用. 类别:影音娱乐 大小:210.36M 语言:简体中文 ...
- ipad和iphone适配_如何在iPhone和iPad上通过搜索打开应用程序,网站和快捷方式
ipad和iphone适配 Khamosh Pathak Khamosh Pathak If you're not using the Search feature on your iPhone or ...
- 微信小程序中用键盘的搜索功能进行页面跳转
我们都知道,小程序中页面跳转是必不可少的,一边都是绑定事件bindtap,在js中写所跳转的路径即可,那么如何在搜索框里面点击手机键盘上的搜索功能,去进行页面跳转呢?这就用到了一个input中的一个事 ...
最新文章
- 来聊聊双目视觉的基础知识(视觉深度、标定、立体匹配)
- java string封装类_java中八种基本数据类型以及它们的封装类,String类型的一些理解...
- java单链表 提供增删改查_java实现单链表增删改查的实例代码详解
- cmd oracle sys登录_oracle忘记sys/system/scott用户密码的解决方法
- 经典线程同步 互斥量Mutex的使用分析
- 计算机图形学 实现鼠标拖拽图元
- 泱脏武器库之 CVE 2021-4034 Polkit 提权小结
- 4.3-软件开发中,“原型图”的作用与绘制方法说明
- 微信公众号H5合成图片长按下载
- AI人工智能+区块链+物联网+大数据可视化平台建设综合解决方案
- WebRTC视频码率控制(序言)
- 中职学校计算机课听课记录表,中职听课记录
- 菩萨蛮 生如夏花(赵敏)
- 三亚游—温暖的寒冬、蔚蓝的海和安九拉
- Excel中的Vlookup函数操作实例
- 半导体车间净化工程的空气洁净度划分等级
- SSL-ZYC 逃离洞穴
- 网络安全专家齐成岳:如何隐蔽你的C2
- 15必须掌握的win7快捷键
- rabbitmq安装 虚拟ip_步骤4:配置IPv6地址
热门文章
- 采集豆瓣“我看过的电影” 整合到wordpress_wordpress豆瓣插件
- SilkTest武林外史之7-简单web测试
- TLS握手协议分析与理解——某HTTPS请求流量包分析
- linux的sssd服务,sssd – 刷新ldap客户端配置Centos
- linux图形界面bind dns,在linux上使用BIND建立DNS服务器
- [附源码]SSM计算机毕业设计领导干部听课评课管理系统JAVA
- 自定义UITableView索引动画,实现饿了么菜单效果
- 常见的数据集合——栈
- MSI主板更换后一直进入BIOS界面
- 文件实时同步备份软件那个比较好用?