Android微信界面的设计

我会带着你远行 2022-09-22 11:40 223阅读 0赞

# Android微信界面的设计 #

【[尊重][Link 1] [原创，转载请注明出处][Link 1] 】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

![Center][]

### 一、ActionBar,搜索框SearchView，Overflow的实现 ###

1. 取消微信标题栏图标的显示   
     2. 改变Overflow按钮（即界面右上角的省略号）的图标为加号   
     3.由于在某些机型上自带菜单键，所以2中的Overflow按钮有可能被隐藏，所以需要强行设置起显示   
     4.在OverflowButton展开之后，各个选项上是没有图标的。这里需要修改为显示图标。

**1、【 取消微信标题栏图标的显示】**

**\[html\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****resources****>**    
2.          
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

![Center 1][]

**\[java\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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按钮都是只显示文字不显示图标的，如下图所示：

![Center 2][]

这是官方的默认效果，Google认为隐藏在overflow中的Action按钮都应该只显示文字。当然，如果你认为这样不够美观，希望在overflow中的Action按钮也可以显示图标，我们仍然可以想办法来改变这一默认行为。  
        其实，overflow中的Action按钮应不应该显示图标，是由MenuBuilder这个类的setOptionalIconsVisible方法来决定的，如果我们在overflow被展开的时候给这个方法传入true，那么里面的每一个Action按钮对应的图标就都会显示出来了。调用的方法当然仍然是用反射了，代码如下所示：

**\[java\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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.         \}  
21.         **return** **super**.onMenuOpened(featureId, menu);  
22.     \}

可以看到，这里我们重写了一个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/

**\[html\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

【 Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager】http://blog.csdn.net/lmj623565791/article/details/24740977 和 http://www.imooc.com/view/264（五星推荐）

[Link 1]: http://blog.csdn.net/guyuealian/article/details/51777792
[Center]: /images/20220721/8e86b49f7f9749048838890e1c05790c.png
[view plain]: http://blog.csdn.net/guyuealian/article/details/51721592#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/1731221
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/1731221/fork
[Center 1]: /images/20220721/b81a1f0504404cfe9d6f94d924d8ac9f.png
[Center 2]: /images/20220721/4139383754914b8f8e3a37d740948191.png