Android微信界面的设计

Android微信界面的设计

【尊重原创，转载请注明出处】http://blog.csdn.net/guyuealian/article/details/51777792

微信6.0主界面：

（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、【 取消微信标题栏图标的显示】

[html] view
plain copy

  1. //在Activity文件onCreate()方法当中添加函数调用即可
  2. 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的区别是，系统会根据不同的系统版本选择不同的显示样式）

[html] view
plain copy

  1. <resources>
  2. <!--
  3. Base application theme for API 14+. This theme completely replaces
  4. AppBaseTheme from BOTH res/values/styles.xml and
  5. res/values-v11/styles.xml on API 14+ devices.
  6. -->
  7. <style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  8. <!-- API 14 theme customizations can go here. -->
  9. <item name="android:actionOverflowButtonStyle">@style/OverflowStyle</item>
  10. </style>
  11. <style name="OverflowStyle">
  12. <item name="android:src">@drawable/actionbar_add_icon</item>
  13. </style>
  14. </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

[java] view
plain copy

  1. //这里原作者采取了一种比较高级的方式————即反射
  2. //关于反射这里简单引用一下
  3. //http://www.cnblogs.com/bingoidea/archive/2009/06/21/1507889.html
  4. //在这里的作用，简单地说就是可以通过秘术来获取本身不可能访问地到的属性和方法
  5. private void setOverflowButtonAlways() throws Exception{
  6. //获取到ViewConfiutation
  7. ViewConfiguration configuration=ViewConfiguration.get(this);
  8. //获取field
  9. Field menuKey=ViewConfiguration.class.getDeclaredField("sHasPermanetMenuKey");
  10. //使得这个私有属性可以被访问
  11. menuKey.setAccessible(true);
  12. //该变configuration中这个field的值
  13. menuKey.setBoolean(configuration, false);
  14. }

4、【显示Overflow选项的图标】

知识补充：在Android中，菜单被分为如下三种：选项菜单（OptionsMenu）、上下文菜单（ContextMenu）和子菜单（SubMenu），这里用的是OptionsMenu

  1. 　　public boolean onCreateOptionsMenu(Menu menu)：使用此方法调用OptionsMenu　。
  2. 　　public boolean onOptionsItemSelected(MenuItem item)：选中菜单项后发生的动作。
  3. 　　public void onOptionsMenuClosed(Menu menu):菜单关闭后发生的动作。
  4. 　　public boolean onPrepareOptionsMenu(Menu menu)：选项菜单显示之前onPrepareOptionsMenu方法会被调用，可以用此方法来根据打当时的情况调整菜单。
  5. 　　public boolean onMenuOpened(int featureId, Menu menu)：单打开后发生的动作。

如果你点击一下overflow按钮去查看隐藏的Action按钮，你会发现这部分Action按钮都是只显示文字不显示图标的，如下图所示：

这是官方的默认效果，Google认为隐藏在overflow中的Action按钮都应该只显示文字。当然，如果你认为这样不够美观，希望在overflow中的Action按钮也可以显示图标，我们仍然可以想办法来改变这一默认行为。

其实，overflow中的Action按钮应不应该显示图标，是由MenuBuilder这个类的setOptionalIconsVisible方法来决定的，如果我们在overflow被展开的时候给这个方法传入true，那么里面的每一个Action按钮对应的图标就都会显示出来了。调用的方法当然仍然是用反射了，代码如下所示：

[java] view
plain copy

  1. //这里同代码3也是利用了Java的反射机制去修改系统默认设置
  2. public boolean onMenuOpened(int featureId, Menu menu) {
  3. // TODO Auto-generated method stub
  4. if(featureId==Window.FEATURE_ACTION_BAR&&menu!=null){
  5. if(menu.getClass().getSimpleName().equals("MenuBuilder")){
  6. try {
  7. //同样先获取到需要调用的method
  8. Method m=menu.getClass().
  9. getDeclaredMethod("setOptionalIconsVisible",Boolean.TYPE);
  10. //设为可访问
  11. m.setAccessible(true);
  12. //调用方法
  13. m.invoke(menu,true);
  14. } catch (Exception e) {
  15. // TODO Auto-generated catch block
  16. e.printStackTrace();
  17. }
  18. }
  19. }
  20. return super.onMenuOpened(featureId, menu);
  21. }

可以看到，这里我们重写了一个onMenuOpened()方法，当overflow被展开的时候就会回调这个方法，接着在这个方法的内部通过返回反射的方法将MenuBuilder的setOptionalIconsVisible变量设置为true就可以了。现在重新运行一下代码，就可以正常显示选项的图标了。

二、ViewPager+Fragment组件

1、【主界面中间XML文件布局】

在XML布局中间界面实现左右滑动的效果，需要用到ViewPager+Fragment组件，可以使用ViewPager标签，并将layout_height设置为0dp。这样在后来再在底部添加底部图标时，ViewPager都将占据剩余的空间。XML代码如下面所示（PS：android:layout_height="0dp"的意思是，待其他控件的高度确定好了后，所剩的高度空间全部留给0dp的控件）

[html] view
plain copy

  1. <android.support.v4.view.ViewPager
  2. android:id="@+id/id_viewpager"
  3. android:layout_width="match_parent"
  4. android:layout_height="0dp"
  5. android:layout_weight="1" >
  6. </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 （五星推荐）

时间： 2024-10-13 16:13:18

Android微信界面的设计的相关文章

Android——微信界面（简易版）

前面我们简单的介绍了一下android的五大布局,那么现在我们来实践一下,写一个简单的微信界面 首先,我们新建一个weixin.xml的linnerlayout布局 我们日常使用的微信,从简单的方面来说我可一分成三个内容,头部标签栏,中间显示信息栏,还有一个底部.那么我们就按照这个来先建一个页面 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="

Android典型界面设计——ViewPage+Fragment实现区域顶部tab滑动切换

一.问题描述 本系列将结合案例应用,陆续向大家介绍一些Android典型界面的设计,首先说说tab导航,导航分为一层和两层(底部区块+区域内头部导航),主要实现方案有RadioGroup+ViewPage+Fragment.Viewpager Indicator.ActionBar Tabs.FragmentTabHost+Fragment等,下面我们先采用RadioGroup+ViewPage+Fragment实现区域头部导航. 如图所示: 二.案例主要组件 1.先看一下MainActivit

Android ActionBar应用实战，高仿微信主界面的设计

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了.唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是真正投入到项目实战当中时会不会掉链子还很难说.那么不用担心,本篇文章我就将带领大家一起进入ActionBar的应用实战,将理论和实践完美结合到一起. 如果你还没有看过我的前两篇文章,建议先去阅读一下 Andr

Android菜鸟成长记8 -- 布局实践（微信界面的编写）

前面我们简单的介绍了一下android的五大布局,那么现在我们来实践一下,写一个简单的微信界面 首先,我们新建一个weixin.xml的linnerlayout布局 我们日常使用的微信,从简单的方面来说我可一分成三个内容,头部标签栏,中间显示信息栏,还有一个底部.那么我们就按照这个来先建一个页面 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="

【转】android 欢迎界面翻页成效，仿微信第一次登陆介绍翻页界面

android 欢迎界面翻页效果,仿微信第一次登陆介绍翻页界面 本实例做的相对比较简单主要是对翻页控件的使用,有时候想要做一些功能是主要是先了解下是否有现成的控件可以使用,做起来比较简单不用费太大的劲去找别的资料,或者别的办法设计.有空多读读android API了解熟悉了做什么都比较容易.(注意:ViewPager用于实现多页面的切换效果,该类存在于Google的兼容包里面,所以在引用时记得在BuilldPath中加入“android-support-v4.jar” 如果sdk是4.0及以上的

本例为模仿微信聊天界面UI设计，文字发送以及语言录制UI(转载)

首页 资讯 精华 论坛 问答 博客 专栏 群组 更多 ▼ 您还未登录 ! 登录 注册 机遇&速度 博客 微博 相册 收藏 留言 关于我 android 仿微信聊天界面,以及语音录制功能 博客分类: android 录音 android 录音android 仿微信聊天界面android 仿微信录音UIandroidandroid 语音 本例为模仿微信聊天界面UI设计,文字发送以及语言录制UI. 1先看效果图:     第一:chat.xml设计 Xml代码   <?xml version=&q

Android ActionBar仿微信界面

ActionBar仿微信界面 1.学习了别人的两篇关于ActionBar博客,在结合别人的文章来仿造一下微信的界面: 思路如下:1).利用ActionBar生成界面的头部,在用ActionBar的ActionProvider时候要注意引入的包一定是android.view.ActionProvider,不能是android.support.v4.view.ActionProvider 2),切换的Title可以参考之前之前一篇文章利用RadioGroup来做,这里是利用一个开源的项目PagerS

看大家android界面设计是拿Android Design UI Kit设计的，不直接在eclipse里设计，但是UI KIT怎么用呢

============问题描述============ Android 4.4 Design UI Kit (Nexus 4 version)打开十psd格式的,看网上说吧psd里面自己需要用到的东西保存为png格式,然后是要把png格式的图片当做android控件的背景使用? 其他类似的工具呢? ============解决方案1============ 一切不问是不是就问为什么的都是耍流氓,不知道你是怎么得出"android界面设计是拿Android Design UI Kit设计的,不直

Android典型界面设计-访网易新闻实现双导航tab切换

一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客Android典型界面设计2(FragmentTabHost+Fragment实现底部tab切换)基础之上和Android典型界面设计1(ViewPage+Fragment实现区域顶部tab滑动切换)整合应用实现.查看两篇博客请点击:http://www.cnblogs.com/jerehedu/p