735      阿裏雲  技術社區[雲棲]

actionbar詳解（二）

經過前麵兩篇文章的學習，我想大家對ActionBar都已經有一個相對較為深刻的理解了。唯一欠缺的是，前麵我們都隻是學習了理論知識而已，雖然知識點已經掌握了，但是真正投入到項目實戰當中時會不會掉鏈子還很難說。那麼不用擔心，本篇文章我就將帶領大家一起進入ActionBar的應用實戰，將理論和實踐完美結合到一起。

如果你還沒有看過我的前兩篇文章，建議先去閱讀一下 Android ActionBar完全解析，使用官方推薦的最佳導航欄(上) 和 Android ActionBar完全解析，使用官方推薦的最佳導航欄(下) 。

相信大家都會認定微信是在手機上最火的應用程序了，幾乎每個人的手機上都有安裝它。微信除了功能非常強大之外，界麵也是做得相當美觀，它的ActionBar讓人看著有一種賞心悅目的感覺，如下圖所示：

作為手機應用程序中的技術標杆，我們自然應該多多向微信學習，那麼今天實戰的主題，就是模仿微信主界麵的實現。

首先新建一個Android項目，起名叫作WeChatSample。既然是要實現ActionBar，那麼第一步當然就是編輯menu目錄下的main.xml文件了，代碼如下所示：

[html] view plaincopy

1. <menu xmlns:android="https://schemas.android.com/apk/res/android"  
2.     xmlns:tools="https://schemas.android.com/tools"  
3.     tools:context="com.example.wechatsample.MainActivity" >  
4.   
5.     <item  
6.         android:id="@+id/action_search"  
7.         android:actionViewClass="android.widget.SearchView"  
8.         android:icon="@drawable/actionbar_search_icon"  
9.         android:showAsAction="ifRoom|collapseActionView"  
10.         android:title="@string/action_search"/>  
11.     <item  
12.         android:id="@+id/action_plus"  
13.         android:actionProviderClass="com.example.wechatsample.PlusActionProvider"  
14.         android:icon="@drawable/actionbar_add_icon"  
15.         android:showAsAction="ifRoom"  
16.         android:title="@string/action_plus"/>  
17.     <item  
18.         android:id="@+id/action_album"  
19.         android:icon="@drawable/ofm_photo_icon"  
20.         android:title="@string/action_album"/>  
21.     <item  
22.         android:id="@+id/action_collection"  
23.         android:icon="@drawable/ofm_collect_icon"  
24.         android:title="@string/action_collection"/>  
25.     <item  
26.         android:id="@+id/action_card"  
27.         android:icon="@drawable/ofm_card_icon"  
28.         android:title="@string/action_card"/>  
29.     <item  
30.         android:id="@+id/action_settings"  
31.         android:icon="@drawable/ofm_setting_icon"  
32.         android:title="@string/action_settings"/>  
33.     <item  
34.         android:id="@+id/action_feed"  
35.         android:icon="@drawable/ofm_feedback_icon"  
36.         android:title="@string/action_feed"/>  
37.   
38. </menu>  

觀察上麵的main.xml，你會發現裏麵有一個自定義的Action Provider，叫作PlusActionProvider。這個主要是用於模擬微信中那個加號的子菜單的，下麵我們就來實現這個類：

[java] view plaincopy

1. public class PlusActionProvider extends ActionProvider {  
2.   
3.     private Context context;  
4.   
5.     public PlusActionProvider(Context context) {  
6.         super(context);  
7.         this.context = context;  
8.     }  
9.   
10.     @Override  
11.     public View onCreateActionView() {  
12.         return null;  
13.     }  
14.   
15.     @Override  
16.     public void onPrepareSubMenu(SubMenu subMenu) {  
17.         subMenu.clear();  
18.         subMenu.add(context.getString(R.string.plus_group_chat))  
19.                 .setIcon(R.drawable.ofm_group_chat_icon)  
20.                 .setOnMenuItemClickListener(new OnMenuItemClickListener() {  
21.                     @Override  
22.                     public boolean onMenuItemClick(MenuItem item) {  
23.                         return true;  
24.                     }  
25.                 });  
26.         subMenu.add(context.getString(R.string.plus_add_friend))  
27.                 .setIcon(R.drawable.ofm_add_icon)  
28.                 .setOnMenuItemClickListener(new OnMenuItemClickListener() {  
29.                     @Override  
30.                     public boolean onMenuItemClick(MenuItem item) {  
31.                         return false;  
32.                     }  
33.                 });  
34.         subMenu.add(context.getString(R.string.plus_video_chat))  
35.                 .setIcon(R.drawable.ofm_video_icon)  
36.                 .setOnMenuItemClickListener(new OnMenuItemClickListener() {  
37.                     @Override  
38.                     public boolean onMenuItemClick(MenuItem item) {  
39.                         return false;  
40.                     }  
41.                 });  
42.         subMenu.add(context.getString(R.string.plus_scan))  
43.                 .setIcon(R.drawable.ofm_qrcode_icon)  
44.                 .setOnMenuItemClickListener(new OnMenuItemClickListener() {  
45.                     @Override  
46.                     public boolean onMenuItemClick(MenuItem item) {  
47.                         return false;  
48.                     }  
49.                 });  
50.         subMenu.add(context.getString(R.string.plus_take_photo))  
51.                 .setIcon(R.drawable.ofm_camera_icon)  
52.                 .setOnMenuItemClickListener(new OnMenuItemClickListener() {  
53.                     @Override  
54.                     public boolean onMenuItemClick(MenuItem item) {  
55.                         return false;  
56.                     }  
57.                 });  
58.     }  
59.   
60.     @Override  
61.     public boolean hasSubMenu() {  
62.         return true;  
63.     }  
64.   
65. }  

接著修改MainActivity中的代碼，如下所示：

[java] view plaincopy

1. public class MainActivity extends Activity {  
2.   
3.     @Override  
4.     protected void onCreate(Bundle savedInstanceState) {  
5.         super.onCreate(savedInstanceState);  
6.         setContentView(R.layout.activity_main);  
7.         setOverflowShowingAlways();  
8.     }  
9.   
10.     @Override  
11.     public boolean onCreateOptionsMenu(Menu menu) {  
12.         getMenuInflater().inflate(R.menu.main, menu);  
13.         return true;  
14.     }  
15.   
16.     @Override  
17.     public boolean onMenuOpened(int featureId, Menu menu) {  
18.         if (featureId == Window.FEATURE_ACTION_BAR && menu != null) {  
19.             if (menu.getClass().getSimpleName().equals("MenuBuilder")) {  
20.                 try {  
21.                     Method m = menu.getClass().getDeclaredMethod(  
22.                             "setOptionalIconsVisible", Boolean.TYPE);  
23.                     m.setAccessible(true);  
24.                     m.invoke(menu, true);  
25.                 } catch (Exception e) {  
26.                 }  
27.             }  
28.         }  
29.         return super.onMenuOpened(featureId, menu);  
30.     }  
31.   
32.     private void setOverflowShowingAlways() {  
33.         try {  
34.             ViewConfiguration config = ViewConfiguration.get(this);  
35.             Field menuKeyField = ViewConfiguration.class  
36.                     .getDeclaredField("sHasPermanentMenuKey");  
37.             menuKeyField.setAccessible(true);  
38.             menuKeyField.setBoolean(config, false);  
39.         } catch (Exception e) {  
40.             e.printStackTrace();  
41.         }  
42.     }  
43.   
44. }  

現在我們已經把ActionBar的界麵都實現好了，但是如果你現在運行一下會發現，效果和微信還差得比較遠，因為在字體的顏色和大小等方麵我們還沒有進行微調，因此接下來我們還需要自定義ActionBar的樣子。修改styles.xml文件，代碼如下所示：

[html] view plaincopy

1. <resources xmlns:android="https://schemas.android.com/apk/res/android">  
2.   
3.     <style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">  
4.         <item name="android:actionBarStyle">@style/WeChatActionBar</item>  
5.         <item name="android:itemBackground">@drawable/actionbar_bg_selector</item>  
6.         <item name="android:actionBarItemBackground">@drawable/actionbar_bg_selector</item>  
7.         <item name="android:itemTextAppearance">@style/WeChatActionBarOverflow</item>  
8.         <item name="android:actionOverflowButtonStyle">@style/WeChatActionButtonOverflow</item>  
9.     </style>  
10.   
11.     <style name="WeChatActionBar" parent="@android:style/Widget.Holo.ActionBar">  
12.         <item name="android:background">#303537</item>  
13.         <item name="android:titleTextStyle">@style/WeChatActionBarTitleText</item>  
14.     </style>  
15.   
16.     <style name="WeChatActionBarTitleText" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">  
17.         <item name="android:textColor">#cfcfcf</item>  
18.         <item name="android:textSize">17sp</item>  
19.     </style>  
20.   
21.     <style name="WeChatActionBarOverflow" parent="@android:style/Widget.ActionButton.Overflow">  
22.         <item name="android:textSize">16sp</item>  
23.     </style>  
24.   
25.     <style name="WeChatActionButtonOverflow" parent="android:style/Widget.Holo.ActionButton.Overflow">  
26.         <item name="android:src">@drawable/actionbar_more_icon</item>  
27.     </style>  
28.   
29. </resources>  

最後，AndroidManifest.xml中還需要稍微進行一點修改，如下所示：

[html] view plaincopy

1. <application  
2.     android:allowBackup="true"  
3.     android:icon="@drawable/ic_launcher"  
4.     android:label="@string/app_name"  
5.     android:logo="@drawable/logo"  
6.     android:theme="@style/AppTheme" >  
7.     <activity  
8.         android:name="com.example.wechatsample.MainActivity"  
9.         android:icon="@drawable/logo"  
10.         android:label="@string/app_name" >  
11. <span style="white-space:pre">  </span>......  
12.     </activity>  
13. </application>  

在<applicationi>標簽中增加了一個logo屬性，在<activity>標簽中增加了一個icon屬性。現在運行一下程序，效果如下圖所示：

可以看到，我們的界麵已經和微信非常相似了，幾乎已經可以以假亂真了！哈哈，小得意一下。不過ActionBar如果可以寫成這個樣子，你在這一方麵的技術也就基本算得上是過關了。

但是這還沒有結束呢，雖說最頂部一行的ActionBar已經成功實現了，可下麵的聊天、發現、通訊錄這三個Tab我們還沒做呢。如此高端大氣上檔次的功能是不能就這麼放過的，因此下麵我們就來探究一下如何才能實現微信那樣的Tab效果。

雖說在上一篇文章當中已經講解過如何在ActionBar當中創建Tab了，但是這裏我並不準備使用它，因為它的靈活性不夠強，很難做出和微信一模一樣的Tab效果。而ActionBar Tab的替代品也很多，我們可以自己寫，也可以使用網上現有的開源框架，PagerSlidingTabStrip這個框架就挺不錯，這裏簡單和穩定起見，我們就直接使用它了。

PagerSlidingTabStrip是GitHub上的一個開源框架，由Andreas Stuetz編寫，它可以完成和ActionBar Tab基本類似的功能，不過由於是完全開源的，我們可以隨意修改其中的代碼，因而擴展性非常好。

那麼開始吧，首先需要將PagerSlidingTabStrip的源碼下載下來，並集成到我們的項目當中，PagerSlidingTabStrip的GitHub主頁地址是：https://github.com/astuetz/PagerSlidingTabStrip 。

具體集成的方法相信大家都會(和SlidingMenu，Universal-Image-Loader等都是一樣的)，這裏我就不再贅述了。需要注意的是，PagerSlidingTabStrip原生的代碼也是實現不了和微信完全一樣的效果的，需要我們在其源碼的基礎上進行修改，不過由於PagerSlidingTabStrip的源碼比較長，我就不把修改過後的代碼貼上來了，大家可以隨後下載WeChatSample的源碼，在這裏可以找到修改後的PagerSlidingTabStrip代碼。

那麼集成完了之後接著就需要來編寫功能了，修改activity_main.xml.xml(也就是MainActivity對應的布局文件)中的代碼，如下所示：

[html] view plaincopy

1. <RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"  
2.     xmlns:tools="https://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.   
6.     <com.astuetz.PagerSlidingTabStrip  
7.         android:id="@+id/tabs"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="40dp" />  
10.   
11.     <android.support.v4.view.ViewPager  
12.         android:id="@+id/pager"  
13.         android:layout_width="match_parent"  
14.         android:layout_height="wrap_content"  
15.         android:layout_below="@+id/tabs" />  
16.   
17. </RelativeLayout>  

接著創建ChatFragment、FoundFragment和ContactsFragment，分別對應著聊天、發現、通訊錄這三個界麵，Fragment中隻需放置一個TextView用於表示這個界麵即可，ChatFragment如下所示：

[java] view plaincopy

1. public class ChatFragment extends Fragment {  
2.     @Override  
3.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
4.             Bundle savedInstanceState) {  
5.         LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);  
6.         FrameLayout fl = new FrameLayout(getActivity());  
7.         fl.setLayoutParams(params);  
8.         DisplayMetrics dm = getResources().getDisplayMetrics();  
9.         final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, dm);  
10.         TextView v = new TextView(getActivity());  
11.         params.setMargins(margin, margin, margin, margin);  
12.         v.setLayoutParams(params);  
13.         v.setLayoutParams(params);  
14.         v.setGravity(Gravity.CENTER);  
15.         v.setText("聊天界麵");  
16.         v.setTextSize((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 12, dm));  
17.         fl.addView(v);  
18.         return fl;  
19.     }  
20. }  

[java] view plaincopy

1. public class FoundFragment extends Fragment {  
2.     @Override  
3.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
4.             Bundle savedInstanceState) {  
5.         LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);  
6.         FrameLayout fl = new FrameLayout(getActivity());  
7.         fl.setLayoutParams(params);  
8.         DisplayMetrics dm = getResources().getDisplayMetrics();  
9.         final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, dm);  
10.         TextView v = new TextView(getActivity());  
11.         params.setMargins(margin, margin, margin, margin);  
12.         v.setLayoutParams(params);  
13.         v.setLayoutParams(params);  
14.         v.setGravity(Gravity.CENTER);  
15.         v.setText("發現界麵");  
16.         v.setTextSize((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 12, dm));  
17.         fl.addView(v);  
18.         return fl;  
19.     }  
20. }  

[java] view plaincopy

1. public class ContactsFragment extends Fragment {  
2.     @Override  
3.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
4.             Bundle savedInstanceState) {  
5.         LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);  
6.         FrameLayout fl = new FrameLayout(getActivity());  
7.         fl.setLayoutParams(params);  
8.         DisplayMetrics dm = getResources().getDisplayMetrics();  
9.         final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, dm);  
10.         TextView v = new TextView(getActivity());  
11.         params.setMargins(margin, margin, margin, margin);  
12.         v.setLayoutParams(params);  
13.         v.setLayoutParams(params);  
14.         v.setGravity(Gravity.CENTER);  
15.         v.setText("通訊錄界麵");  
16.         v.setTextSize((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 12, dm));  
17.         fl.addView(v);  
18.         return fl;  
19.     }  
20. }  

[java] view plaincopy

1. public class MainActivity extends FragmentActivity {  
2.   
3.     /** 
4.      * 聊天界麵的Fragment 
5.      */  
6.     private ChatFragment chatFragment;  
7.   
8.     /** 
9.      * 發現界麵的Fragment 
10.      */  
11.     private FoundFragment foundFragment;  
12.   
13.     /** 
14.      * 通訊錄界麵的Fragment 
15.      */  
16.     private ContactsFragment contactsFragment;  
17.   
18.     /** 
19.      * PagerSlidingTabStrip的實例 
20.      */  
21.     private PagerSlidingTabStrip tabs;  
22.   
23.     /** 
24.      * 獲取當前屏幕的密度 
25.      */  
26.     private DisplayMetrics dm;  
27.   
28.     @Override  
29.     protected void onCreate(Bundle savedInstanceState) {  
30.         super.onCreate(savedInstanceState);  
31.         setContentView(R.layout.activity_main);  
32.         setOverflowShowingAlways();  
33.         dm = getResources().getDisplayMetrics();  
34.         ViewPager pager = (ViewPager) findViewById(R.id.pager);  
35.         tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);  
36.         pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));  
37.         tabs.setViewPager(pager);  
38.         setTabsValue();  
39.     }  
40.   
41.     /** 
42.      * 對PagerSlidingTabStrip的各項屬性進行賦值。 
43.      */  
44.     private void setTabsValue() {  
45.         // 設置Tab是自動填充滿屏幕的  
46.         tabs.setShouldExpand(true);  
47.         // 設置Tab的分割線是透明的  
48.         tabs.setDividerColor(Color.TRANSPARENT);  
49.         // 設置Tab底部線的高度  
50.         tabs.setUnderlineHeight((int) TypedValue.applyDimension(  
51.                 TypedValue.COMPLEX_UNIT_DIP, 1, dm));  
52.         // 設置Tab Indicator的高度  
53.         tabs.setIndicatorHeight((int) TypedValue.applyDimension(  
54.                 TypedValue.COMPLEX_UNIT_DIP, 4, dm));  
55.         // 設置Tab標題文字的大小  
56.         tabs.setTextSize((int) TypedValue.applyDimension(  
57.                 TypedValue.COMPLEX_UNIT_SP, 16, dm));  
58.         // 設置Tab Indicator的顏色  
59.         tabs.setIndicatorColor(Color.parseColor("#45c01a"));  
60.         // 設置選中Tab文字的顏色 (這是我自定義的一個方法)  
61.         tabs.setSelectedTextColor(Color.parseColor("#45c01a"));  
62.         // 取消點擊Tab時的背景色  
63.         tabs.setTabBackground(0);  
64.     }  
65.   
66.     public class MyPagerAdapter extends FragmentPagerAdapter {  
67.   
68.         public MyPagerAdapter(FragmentManager fm) {  
69.             super(fm);  
70.         }  
71.   
72.         private final String[] titles = { "聊天", "發現", "通訊錄" };  
73.   
74.         @Override  
75.         public CharSequence getPageTitle(int position) {  
76.             return titles[position];  
77.         }  
78.   
79.         @Override  
80.         public int getCount() {  
81.             return titles.length;  
82.         }  
83.   
84.         @Override  
85.         public Fragment getItem(int position) {  
86.             switch (position) {  
87.             case 0:  
88.                 if (chatFragment == null) {  
89.                     chatFragment = new ChatFragment();  
90.                 }  
91.                 return chatFragment;  
92.             case 1:  
93.                 if (foundFragment == null) {  
94.                     foundFragment = new FoundFragment();  
95.                 }  
96.                 return foundFragment;  
97.             case 2:  
98.                 if (contactsFragment == null) {  
99.                     contactsFragment = new ContactsFragment();  
100.                 }  
101.                 return contactsFragment;  
102.             default:  
103.                 return null;  
104.             }  
105.         }  
106.   
107.     }  
108.     ......  
109. }  

接著將ViewPager的實例設置到了PagerSlidingTabStrip中，然後調用setTabsValue()方法來對PagerSlidingTabStrip的細節進行配置，以實現和微信Tab一模一樣的效果。每個屬性的作用在代碼中都有注釋描述，這裏我就不再解釋了。其中有一點需要注意，setSelectedTextColor()這個方法是我自定義的，因為PagerSlidingTabStrip並不支持高亮顯示選中Tab那一項的標題，而微信卻有這個效果，因此我在這裏對PagerSlidingTabStrip的源碼進行了修改，如果你看的是原生的PagerSlidingTabStrip代碼，將無法找到這個方法。
好了，到這裏代碼就全部都寫完了，讓我們運行一下看看效果吧，如下圖所示：

恩，效果還是相當不錯的，標題叫高仿微信主界麵一點都不算過分吧？經過前後三篇文章的學習，我相信大家對ActionBar的技術都已經掌握的非常好了，那麼我們ActionBar係列的文章也就到此結束。

好了，今天的講解就到這裏，有疑問的朋友可以在下麵留言。

最後更新：2017-04-03 05:38:58

  上一篇： [公告]阿裏雲ECS服務升級通知

  下一篇： py 控製台標準輸入輸出