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、【 取消微信标题栏图标的显示】
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的区别是,系统会根据不同的系统版本选择不同的显示样式)
说明:上面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
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按钮对应的图标就都会显示出来了。调用的方法当然仍然是用反射了,代码如下所示:
可以看到,这里我们重写了一个onMenuOpened()方法,当overflow被展开的时候就会回调这个方法,接着在这个方法的内部通过返回反射的方法将MenuBuilder的setOptionalIconsVisible变量设置为true就可以了。现在重新运行一下代码,就可以正常显示选项的图标了。
二、ViewPager+Fragment组件
1、【主界面中间XML文件布局】
在XML布局中间界面实现左右滑动的效果,需要用到ViewPager+Fragment组件,可以使用ViewPager标签,并将layout_height设置为0dp。这样在后来再在底部添加底部图标时,ViewPager都将占据剩余的空间。XML代码如下面所示(PS:android:layout_height="0dp"的意思是,待其他控件的高度确定好了后,所剩的高度空间全部留给0dp的控件)
在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 (五星推荐)