Android微信界面的設計

微信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、【 取消微信標題欄圖標的顯示】

1. //在Activity文件onCreate()方法當中添加函數調用即可
2. getActionBar().setDisplayShowHomeEnabled(false);

2、【修改Overflow按鈕的圖標為加號】

使用ActionBar時，Android系統默認給overflow是三個點的圖標，如果你想修改overflow的圖標，變成類似於微信“+”加號或者其他圖標，可這樣實現：即在values/styles.xml文件中修改和增加樣式（注意：如果你的Android項目有多個values文件，如values-v11、values-14,請全部統一修改，values-v11和values-14的區別是，系統會根據不同的系統版本選擇不同的顯示樣式）

3.  
5. @style/OverflowStyle
6.  
7.  
8. @drawable/actionbar_add_icon
9.  

 

說明：上面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

1. //這裡原作者采取了一種比較高級的方式————即反射
2. //關於反射這裡簡單引用一下
3. //http://www.cnblogs.com/bingoidea/archive/2009/06/21/1507889.html
4. //在這裡的作用，簡單地說就是可以通過秘術來獲取本身不可能訪問地到的屬性和方法
5. privatevoidsetOverflowButtonAlways()throwsException{
6. //獲取到ViewConfiutation
7. ViewConfigurationconfiguration=ViewConfiguration.get(this);
8. //獲取field
9. FieldmenuKey=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

　　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按鈕對應的圖標就都會顯示出來了。調用的方法當然仍然是用反射了，代碼如下所示：

1. //這裡同代碼3也是利用了Java的反射機制去修改系統默認設置
2. publicbooleanonMenuOpened(intfeatureId,Menumenu){
3. //TODOAuto-generatedmethodstub
4. if(featureId==Window.FEATURE_ACTION_BAR&&menu!=null){
5. if(menu.getClass().getSimpleName().equals("MenuBuilder")){
6. try{
7. //同樣先獲取到需要調用的method
8. Methodm=menu.getClass().
9. getDeclaredMethod("setOptionalIconsVisible",Boolean.TYPE);
10. //設為可訪問
11. m.setAccessible(true);
12. //調用方法
13. m.invoke(menu,true);
14. }catch(Exceptione){
15. //TODOAuto-generatedcatchblock
16. e.printStackTrace();
17. }
18.  
19. }
20. }
21. returnsuper.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的控件）

1. android:id="@+id/id_viewpager"
2. android:layout_width="match_parent"
3. android:layout_height="0dp"
4. android:layout_weight="1">

在XML實現了ViewPager布局，顯示需要組合到Fragment組件中，

未完~更新中……