Android微信界面的设计
Android微信界面的设计
(1)整体采用垂直的LinearLayout线性布局
(2)最上面是ActionBar,搜索框SearchView,Overflow(含有4个单选菜单项)
(3)中间使用ViewPager+Fragment组件,这样可实现左右滑动的界面。
(4)最下面是水平的LinearLayout线性布局:含有4个自定义的控件
【微信6.0主界面】视频教程: http://t.cn/R5kTSEr
一、ActionBar,搜索框SearchView,Overflow的实现
1. 取消微信标题栏图标的显示
2. 改变Overflow按钮(即界面右上角的省略号)的图标为加号
3.由于在某些机型上自带菜单键,所以2中的Overflow按钮有可能被隐藏,所以需要强行设置起显示
4.在OverflowButton展开之后,各个选项上是没有图标的。这里需要修改为显示图标。
1、【 取消微信标题栏图标的显示】
- //在Activity文件onCreate()方法当中添加函数调用即可
- getActionBar().setDisplayShowHomeEnabled(false);
2、【修改Overflow按钮的图标为加号 】详见博客:http://blog.csdn.net/guyuealian/article/details/51721167
使用ActionBar时,Android系统默认给overflow是三个点的图标,如果你想修改overflow的图标,变成类似于微信“+”加号或者其他图标,可这样实现:即在values/styles.xml文件中修改和增加样式(注意:如果你的Android项目有多个values文件,如values-v11、values-14,请全部统一修改,values-v11和values-14的区别是,系统会根据不同的系统版本选择不同的显示样式)
- <resources>
- <!--
- Base application theme for API 14+. This theme completely replaces
- AppBaseTheme from BOTH res/values/styles.xml and
- res/values-v11/styles.xml on API 14+ devices.
- -->
- <style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
- <!-- API 14 theme customizations can go here. -->
- <item name="android:actionOverflowButtonStyle">@style/OverflowStyle</item>
- </style>
- <style name="OverflowStyle">
- <item name="android:src">@drawable/actionbar_add_icon</item>
- </style>
- </resources>
说明:上面values/styles.xml文件定义 name="android:actionOverflowButtonStyle"即表示设置overflow的样式引用资源文件样式为@style/OverflowStyle,然后在再下面定义OverflowStyle样式的drawable资料为“+”加号图标。
3、【强制显示Overflow按钮】
ActionBar的空间有限,当选项菜单项很多时,系统会压缩到Overflow中显示,对于有MENU按键的手机,用户单击MENU按键即可查看Overflow中菜单项;对于没有MENU的手机,ActionBar会在最后显示一个有三个点的折叠图标;当用户单击该图标就会显示被隐藏的菜单项;但有时,有些手机并没有显式的显示三个点的折叠图标,这时就需要强制显示Overflow了。解决方法是使用反射机制,改变ActionBar属性,关于反射机制,请查看文章:http://www.cnblogs.com/bingoidea/archive/2009/06/21/1507889.html
- //这里原作者采取了一种比较高级的方式————即反射
- //关于反射这里简单引用一下
- //http://www.cnblogs.com/bingoidea/archive/2009/06/21/1507889.html
- //在这里的作用,简单地说就是可以通过秘术来获取本身不可能访问地到的属性和方法
- private void setOverflowButtonAlways() throws Exception{
- //获取到ViewConfiutation
- ViewConfiguration configuration=ViewConfiguration.get(this);
- //获取field
- Field menuKey=ViewConfiguration.class.getDeclaredField("sHasPermanetMenuKey");
- //使得这个私有属性可以被访问
- menuKey.setAccessible(true);
- //该变configuration中这个field的值
- menuKey.setBoolean(configuration, false);
- }
4、【显示Overflow选项的图标】
知识补充:在Android中,菜单被分为如下三种:选项菜单(OptionsMenu)、上下文菜单(ContextMenu)和子菜单(SubMenu),这里用的是OptionsMenu
- public boolean onCreateOptionsMenu(Menu menu):使用此方法调用OptionsMenu 。
- public boolean onOptionsItemSelected(MenuItem item):选中菜单项后发生的动作。
- public void onOptionsMenuClosed(Menu menu):菜单关闭后发生的动作。
- public boolean onPrepareOptionsMenu(Menu menu):选项菜单显示之前onPrepareOptionsMenu方法会被调用,可以用此方法来根据打当时的情况调整菜单。
- public boolean onMenuOpened(int featureId, Menu menu):单打开后发生的动作。
如果你点击一下overflow按钮去查看隐藏的Action按钮,你会发现这部分Action按钮都是只显示文字不显示图标的,如下图所示:
这是官方的默认效果,Google认为隐藏在overflow中的Action按钮都应该只显示文字。当然,如果你认为这样不够美观,希望在overflow中的Action按钮也可以显示图标,我们仍然可以想办法来改变这一默认行为。
其实,overflow中的Action按钮应不应该显示图标,是由MenuBuilder这个类的setOptionalIconsVisible方法来决定的,如果我们在overflow被展开的时候给这个方法传入true,那么里面的每一个Action按钮对应的图标就都会显示出来了。调用的方法当然仍然是用反射了,代码如下所示:
- //这里同代码3也是利用了Java的反射机制去修改系统默认设置
- public boolean onMenuOpened(int featureId, Menu menu) {
- // TODO Auto-generated method stub
- if(featureId==Window.FEATURE_ACTION_BAR&&menu!=null){
- if(menu.getClass().getSimpleName().equals("MenuBuilder")){
- try {
- //同样先获取到需要调用的method
- Method m=menu.getClass().
- getDeclaredMethod("setOptionalIconsVisible",Boolean.TYPE);
- //设为可访问
- m.setAccessible(true);
- //调用方法
- m.invoke(menu,true);
- } catch (Exception e) {
- // TODO Auto-generated catch block
- e.printStackTrace();
- }
- }
- }
- return super.onMenuOpened(featureId, menu);
- }
可以看到,这里我们重写了一个onMenuOpened()方法,当overflow被展开的时候就会回调这个方法,接着在这个方法的内部通过返回反射的方法将MenuBuilder的setOptionalIconsVisible变量设置为true就可以了。现在重新运行一下代码,就可以正常显示选项的图标了。
二、ViewPager+Fragment组件
1、【主界面中间XML文件布局】
在XML布局中间界面实现左右滑动的效果,需要用到ViewPager+Fragment组件,可以使用ViewPager标签,并将layout_height设置为0dp。这样在后来再在底部添加底部图标时,ViewPager都将占据剩余的空间。XML代码如下面所示(PS:android:layout_height="0dp"的意思是,待其他控件的高度确定好了后,所剩的高度空间全部留给0dp的控件)
关于ViewPager+Fragment的使用,请查看相关博文:http://blog.163.com/shexinyang@126/blog/static/13673931220157552844552/
- <android.support.v4.view.ViewPager
- android:id="@+id/id_viewpager"
- android:layout_width="match_parent"
- android:layout_height="0dp"
- android:layout_weight="1" >
- </android.support.v4.view.ViewPager>
在XML实现了ViewPager布局,显示需要组合到Fragment组件中,
未完~更新中……
【参考文章】
【Android ActionBar完全解析】http://blog.csdn.net/guolin_blog/article/details/18234477 (五星推荐)
【修改Overflow按钮的图标为加号 】http://blog.csdn.net/guyuealian/article/details/51721167
【仿制微信6.0界面一】http://blog.csdn.net/u012759878/article/details/44780091
【仿制微信6.0界面二】http://blog.csdn.net/u012759878/article/details/44781893
【ViewPager+Fragment基本使用方法】http://blog.csdn.net/huahuadashen/article/details/12789603
【 Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager】http://blog.csdn.net/lmj623565791/article/details/24740977 和 http://www.imooc.com/view/264(五星推荐)
Android微信界面的设计相关推荐
- android注册界面高级,Android用户注册界面简单设计
本文实例为大家分享了Android用户注册界面的设计,供大家参考,具体内容如下 I. 实例目标 设计一个用户注册界面,在其中要使用到一些基础控件,如 文本框.编辑框.按钮.复选框等控件 II. 技术分 ...
- Android微信界面
学习Android快一个月了,找个东西练练手,试着写写微信主要的四个界面. 效果图: 有色差... 首先看主界面划分,看图最直接: 主界面 activity_main.xml: <Relativ ...
- android登陆界面ui设计,UI设计师必备技能:常用字体规范
作为一个@王铎(MICU设计)带来的界面设计常用字体规范,大家看完果断收藏. 作者:王铎(MICU设计) 好长时间没发帖,净想过年了,过年哈,倒腾工作总结和年货是大事. 这几天有人问我说:" ...
- android开发界面适配设计
25学堂|APP设计|网页设计师加油站 面设计 APP设计模板 APP产品秀 UI设计干货 APP图标 Html5CSS3 APP设计教程 优秀设计 APP创业 ● UED网址导航 ● APPUI ...
- Android微信界面的制作
移动互联网开发第一课 要求完成以下需求: 1.页面具有标题"微信" 2.页面具有中间显示框 3.页面具有底部选择框,并且具有选择事件 4.页面底部选择框在进行改变的时候,我们需要中 ...
- Android 微信界面简单的侧滑效果+listview+DrawerLayout+fragment+viewpager
先写一个android.support.v4.widget.DrawerLayout的控件.里面包裹的第一个LinearLayout是主界面的里面是一个viewpager的控件用来实现QQfragme ...
- android登陆界面设计方案,011android初级篇之android登录界面的设计
设计目标 密码账户的输入 输入账户时,自动显示匹配账户 没有帐号,显示官网超链接 登录框的自动提示功能参考一下链接中的AutoCompleteTextView的使用 布局文件 android:orie ...
- Android Studio 微信界面开发——主页面框架
目录 功能说明 设计流程 核心代码详解 总结 源码开源地址(gitee) 一.功能说明 类似微信界面的设计.本次主要进行初步设计,完成微信页面的基础框架,即当点击下方按钮时,页面随之转换,分别包括&q ...
- AS作业一:APP门户界面设计(微信界面)
一.开发软件:Android studio 二.内容:实现微信界面框架设计,包含4个tab页,能实现tab页之间的点击切换 第一步:放入图标 把复制的图标粘贴放在/app/res/drawable 目 ...
最新文章
- Java多线程复习:1(进程和线程、并发和并行)
- C#编程(十二)----------函数
- java split array_Java如何循环数组并使用Split
- CMRNet++:在激光雷达地图中与地图和相机无关的单目视觉定位
- java中执行cmd命令_如何通过Java执行cmd命令
- 接到需求之后,产品经理如何高效的从“想”到“做”?
- MySql 中 case when then else end 的用法
- mybatis plug 只查id_Mybatis一对多/多对多查询时只查出了一条数据
- python分析股票数据_Python数据可视化——股票数据分析
- win c语言创建线程,初学者 CWinThread 线程类
- Object_clone
- HDU1160 FatMouse's Speed —— DP
- 开关电源适配器原理_迅为i.MX6ULL开发板原理图分析介绍
- Puppeteer + relaxed docker 方案
- 孩子们的世界很大,很大...(评刘海强日记)
- python智能决策系统_智能风控决策引擎系统可落地实现方案(三)模型引擎实现...
- ModelCoder:实现汽车四轮转向控制系统的建模仿真
- 什么是创意啊?这才是创意
- sql查询时添加一列为固定值
- AXI4协议与AXI3协议区别