after studying the first two articles, I think we all have a relatively deep understanding of ActionBar. The only missing thing is that we have only learned theoretical knowledge in front of us, although the knowledge points have been mastered, but it is hard to say that it will be difficult to lose the chain when it comes to the actual project. So, don't worry, I will lead you into the practical application of ActionBar in this article, and combine theory with practice perfectly.

if you haven't read my first two articles, it is suggested to first read the Android ActionBar to fully parse the best navigation bar (top) and Android fully parsed with the official recommended best navigation bar (below).

believes that WeChat will be considered the most popular application on mobile phones. Almost everyone has their own mobile phone installed. In addition to its very powerful functionality, WeChat has a pretty beautiful interface, and its ActionBar makes people look at a pleasing sense, as shown below:

as a technical benchmarking in mobile applications, we should learn a lot to WeChat, so the theme of today's real battle is to imitate the implementation of the WeChat main interface.

first creates a new Android project named WeChatSample. Since the ActionBar is to be implemented, the first step is to edit the main.xml file in the menu directory, and the code is shown below:

 < menu xmlns:android= "" xmlns:tools= " tools". NActivity "> < item android:id=" @+id/action_search "android:actionViewClass=" android.widget.SearchView "android:icon=" @drawable/actionbar_search_icon "android:showAsAction=." Us "android:actionProviderClass=" com.example.wechatsample.PlusActionProvider "android:icon=" @drawable/actionbar_add_icon "android:showAsAction=" ifRoom "android:title=" @string/action_plus "/> < item. Tle= "@string/action_album" /> < item android:id= "@+id/action_collection" android:icon= "@drawable/ofm_collect_icon" android:title= "@string/action_collection" />. < item android:id= "@+id/action_settings" android:icon= "@drawable/ofm_setting_icon" android:title= "@string/action_settings" /> < item android:id=. The meaning of each attribute in this document has been explained in the first two articles, and I will not repeat it here. It is important to note that < item> the icon icons specified in the label are all I have prepared in advance, the specified title text is defined in string.xml, and finally I will attach the source code, and you can find these icons and words in the source code. 

to observe the main.xml above, you will find that there is a custom Action Provider, called PlusActionProvider. This is mainly used to simulate the submenu of the added number in WeChat, and then we will implement the class:

 public class PlusActionProvider extends ActionProvider {private Context context; public PlusActionProvider);}} @Override public View onCreateActionView () {return null;} @Override public void onPrepareSubMenu (SubMenu subMenu) {}; Listener () {@Override public Boolean onMenuItemClick (MenuItem item) {return true;}}); subMenu.add (context.getString (R.string.plus_add_friend)) TemClick (MenuItem item) {return false;}}); subMenu.add (context.getString (R.string.plus_video_chat)).SetIcon (R.drawable.ofm_video_icon).SetOnMenuItemClickListener (New} {} {} {};} }); subMenu.add (context.getString (R.string.plus_scan)).SetIcon (R.drawable.ofm_qrcode_icon).SetOnMenuItemClickListener (New OnMenuItemClickListener () {@Override public Boolean onMenuItemClick}); ).SetIcon (R.drawable.ofm_camera_icon).SetOnMenuItemClickListener (New OnMenuItemClickListener () {@Override public Boolean onMenuItemClick (MenuItem item) {} {} {} {} {} {}} {} I have already introduced the method of tion Provider in the last article, I believe you should feel very simple and easy to understand when you look at this class. Here we define five submenus in PlusActionProvider, each of which specifies a title and an icon that corresponds to the five submenus in WeChat. In addition, although a click event is defined for each submenu, the implementation in the click piece is empty, because this article just imitates the implementation of the WeChat interface, and the function will not be discussed. 

then modifies the code in MainActivity, as shown below:

 public class MainActivity extends Activity {@Override protected); } @Override public Boolean onCreateOptionsMenu (Menu menu) {getMenuInflater ().Inflate (, menu); return true; {} {} {} {{} {} {{}. GetSimpleName ().Equals ("MenuBuilder")) {try {Method M = menu.getClass ().GetDeclaredMethod ("setOptionalIconsVisible", Boolean.TYPE); m.setAccessible (true);} TOverflowShowingAlways {() {try {ViewConfiguration config = ViewConfiguration.get (this); Field menuKeyField = ViewConfiguration.class.GetDeclaredField ("sHasPermanentMenuKey"); StackTrace ();}}} 

code is not long, and all you are familiar with, the main.xml file is loaded in the onCreateOptionsMenu () method, the onMenuOpened () method is used to display the Action button icons hidden in the overflow, and the setOverflowShowingAlways () method shields the physical Menu key. However, on the phone with physical Menu keys, the overflow button will not show up.

now we have finished the ActionBar interface, but if you run it now, the effect is far worse than WeChat, because we haven't made a fine tune in the color and size of the font, so we still need to self - determine the sense of ActionBar. The styles.xml file is modified as follows:

 < resources xmlns:android= "" > < style name= "AppBaseTheme". < item name= "android:itemBackground" > @drawable/actionbar_bg_selector< /item> < item name= android:actionBarItemBackground. "Android:actionOverflowButtonStyle" > @style/WeChatActionButtonOverflow< /item> < /style> < style name= "WeChatActionBar" parent= "@android:style/Widget.Holo.ActionBar". E/WeChatActionBarTitleText< /item> < /style> < style name= "WeChatActionBarTitleText" parent= "@android:style/TextAppearance.Holo.Widget.ActionBar.Title" > < style name= "WeChatActionBarOverflow" parent= "@android:style/Widget.ActionButton.Overflow" > < item name= "android:textSize". Me= "android:src" > @drawable/actionbar_more_icon< /item> < /style> < /resources> 

. I easily adjusted the background color of the ActionBar, the color and size of the title text, the background color of the submenu, and so on, making the whole style of WeChat identical to all the pictures used in it. And I put it in the drawable folder in advance. Custom ActionBar style method I introduced in the last article, unfamiliar friends can refer to it again. At the end of

, a slight modification is needed in AndroidManifest.xml, as shown below:

 < application android:allowBackup= "true" android:icon= "@drawable/ic_launcher". < activity android:name= "com.example.wechatsample.MainActivity" android:icon= "@drawable/logo" android:label= "@string/app_name" > < /activity> < A icon attribute. Now run the program, as shown in the following figure: 

to see,

This concludes the body part