Http://service.ap-southeast-1.maxcompute.aliyun-inc.com/api

Http://service.ap-southeast-1.maxcompute.aliyun-inc.com/api

I. Problem Overview

Through the last two articles, we have a general understanding of how to use ActionBar. In practical applications, we need to customize ActionBar, so we need to rewrite or define some styles to modify ActionBar to meet specific needs. Take Youku homepage as an example to learn the comprehensive application of ActionBar.

Ii. Android system ActionBar style Definition

First, let's take a look at how the ActionBar style is defined in the android system. Here we use Theme. holo. the Light topic is used as an example. The source code shows that the ActionBar style definition in this topic is as follows:

<style name="Theme.Holo.Light.DarkActionBar">        <item name="windowContentOverlay">@drawable/ab_solid_shadow_holo</item>        <item name="actionBarStyle">@style/Widget.Holo.Light.ActionBar.Solid.Inverse</item>        <item name="actionBarWidgetTheme">@style/Theme.Holo</item>        <item name="actionBarTheme">@null</item>        <item name="actionDropDownStyle">@style/Widget.Holo.Spinner.DropDown.ActionBar</item>        <item name="actionButtonStyle">@style/Widget.Holo.ActionButton</item>        <item name="actionOverflowButtonStyle">@style/Widget.Holo.ActionButton.Overflow</item>        <item name="actionModeBackground">@drawable/cab_background_top_holo_dark</item>        <item name="actionModeSplitBackground">@drawable/cab_background_bottom_holo_dark</item>        <item name="actionModeCloseDrawable">@drawable/ic_cab_done_holo_dark</item>        <item name="homeAsUpIndicator">@drawable/ic_ab_back_holo_dark</item>        <item name="actionBarTabStyle">@style/Widget.Holo.Light.ActionBar.TabView.Inverse</item>        <item name="actionBarTabBarStyle">@style/Widget.Holo.Light.ActionBar.TabBar.Inverse</item>        <item name="actionBarTabTextStyle">@style/Widget.Holo.Light.ActionBar.TabText.Inverse</item>        <item name="actionBarDivider">@drawable/list_divider_holo_dark</item>        <item name="actionBarItemBackground">@drawable/item_background_holo_dark</item>        <item name="actionMenuTextColor">?attr/textColorPrimaryInverse</item>        <item name="actionModeStyle">@style/Widget.Holo.Light.ActionMode.Inverse</item>        <item name="actionModeCloseButtonStyle">@style/Widget.Holo.ActionButton.CloseMode</item>        <item name="actionModePopupWindowStyle">@style/Widget.Holo.PopupWindow.ActionMode</item>        <item name="actionModeCutDrawable">@drawable/ic_menu_cut_holo_dark</item>        <item name="actionModeCopyDrawable">@drawable/ic_menu_copy_holo_dark</item>        <item name="actionModePasteDrawable">@drawable/ic_menu_paste_holo_dark</item>        <item name="actionModeSelectAllDrawable">@drawable/ic_menu_selectall_holo_dark</item>        <item name="actionModeShareDrawable">@drawable/ic_menu_share_holo_dark</item>        <item name="actionModeFindDrawable">@drawable/ic_menu_find_holo_dark</item>        <item name="actionModeWebSearchDrawable">@drawable/ic_menu_search_holo_dark</item></style>

Among the many attributes above, we need to focus on the following style attributes:

1. actionBarStyle: This attribute defines the main style of the ActionBar, including the ActionBar background, title style, separator, and so on. The specific attributes are as follows: titleTextStyle, background, backgroundSplit, and divider. The source code is not posted here. You can view it on your own.
2. actionBarSize: defines the height of ActoinBar
3. actionButtonStyle: defines the style of the Action item button. Its main attributes include background, paddingStart, paddingEnd, and minWidth.
4. actionBarTabStyle: defines the Tabs style on the ActionBar.
5. actionBarTabBarStyle: defines the style of the entries under the Tab.
6. actionBarTabTextStyle: defines the style of text on a Tab.

Iii. Case implementation

Next we will combine the previous knowledge and the above style to complete the case of this article step by step, Youku homepage.

First, you can hide the title and set the Logo. You can set the Logo using the Code as follows:

  ActionBar actionbar= getActionBar();  actionbar.setDisplayUseLogoEnabled(true);  actionbar.setDisplayShowTitleEnabled(false);  actionbar.setDisplayShowHomeEnabled(true);  actionbar.setDisplayHomeAsUpEnabled(false);  actionbar.setLogo(R.drawable.icon_youku);

Step 2: follow the steps in the previous article to add the Tab navigation. No code is pasted here.

The third step is to compile the menu file. Here, you should note that the menu in the overflow area cannot be customized. Click the overflow menu and I implemented it using PopupWindow. In PopupWindow, I added a ListView and added two layout files for the ListView, one for login menu and the other for other menus. The menu file is as follows:

<Menu xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" tools: context = ". mainActivity "> <item android: id =" @ + id/action_search "android: icon =" @ drawable/btn_game_search "android: showAsAction =" always "android: title = "Search"/> <item android: id = "@ + id/action_game" android: icon = "@ drawable/btn_game_icon" android: orderInCategory = "2" android: showAsAction = "always" android: title = "game"/> <item android: id = "@ + id/action_recommend" android: icon = "@ drawable/btn_recommend" android: orderInCategory = "3" android: showAsAction = "always" android: title = "market"/> <item android: id = "@ + id/action_more" android: icon = "@ drawable/btn_more_bg" android: orderInCategory = "4" android: showAsAction = "always" android: title = "more"/> </menu>

In the menu file, all menu items are displayed on the ActionBar.

The PopuWindow menu is displayed as follows:

Public void showPopMenu () {// obtain the status bar height Rect frame = new Rect (); getWindow (). getDecorView (). getWindowVisibleDisplayFrame (frame); // calculates the offset. 50dp sets the height of the actionbar. By default, the height of the Tab is the same as that of the ActionBar. int offsetY = frame. top + getActionBar (). getHeight ()-dip2px (50); int offsetX = dip2px (10); View parentView = LayoutInflater. from (this ). inflate (R. layout. activity_main, null); View popView = LayoutInflater. from (this ). inflate (R. layout. pop_layout, null); ListView myList = (ListView) popView. findViewById (R. id. mylist); ListAdapter adapter = new ListAdapter (this, initListData (); myList. setAdapter (adapter); PopupWindow popupWindow = new PopupWindow (popView, dip2px (160), ViewGroup. layoutParams. WRAP_CONTENT, true); popupWindow. setBackgroundDrawable (new BitmapDrawable (getResources (), (Bitmap) null); popupWindow. setOutsideTouchable (true); // sets the pop-up animation popupWindow. setAnimationStyle (android. r. style. animation_Dialog); popupWindow. showAtLocation (parentView, Gravity. RIGHT | Gravity. TOP, offsetX, offsetY );}

Through the above steps, we can achieve the general appearance of the Youku homepage, but the style is still quite different. Below we will do it through custom styles.

<style name="AppTheme" parent="android:Theme.Holo.Light">        <!-- Customize your theme here. -->        <item name="android:actionBarSize">50dp</item>        <item name="android:actionBarStyle">@style/CustomActionBarStyle</item>        <item name="android:actionButtonStyle">@style/CustomActionButtonStyle</item>        <item name="android:actionOverflowButtonStyle">@style/CustomActionOverflowStyle</item>        <item name="android:actionBarTabStyle">@style/CustomActionTabViewStyle</item>        <item name="android:actionBarTabBarStyle">@style/CustomActionTabBarStyle</item>        <item name="android:actionBarTabTextStyle">@style/CustomActionTabTextStyle</item>        <item name="android:itemTextAppearance">@style/CustomItemTextAppearance</item>    </style>

The height of the ActionBar is set through actionBarSize, and the background of the ActionBar is defined by custom actionBarStyle, as follows:

<style name="CustomActionBarStyle" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">    <item name="android:background">@drawable/actionbar_background</item></style>

ActionButtonStyle defines the Left and Right padding and the minimum width.

<style name="CustomActionButtonStyle" parent="@android:style/Widget.Holo.ActionButton">        <item name="android:paddingLeft">0dip</item>        <item name="android:paddingRight">0dip</item>        <item name="android:minWidth">30dip</item></style>

Use actionBarTabStyle, actionBarTabBarStyle, and actionBarTabTextStyle to define Tab-related styles.

    <style name="CustomActionTabBarStyle" parent="@android:style/Widget.Holo.ActionBar.TabBar">        <item name="android:background">@drawable/actionbar_tabview_bg</item>        <item name="android:dividerPadding">10dp</item>    </style>    <style name="CustomActionTabTextStyle" parent="@android:style/Widget.Holo.Light.ActionBar.TabText">        <item name="android:textSize">14sp</item>        <item name="android:textStyle">normal</item>        <item name="android:textColor">@color/actionbar_text_color</item>    </style>

 

For more information, clickView Source CodeRun the test in person.

 

Author: Jerry Education
Source: http://www.cnblogs.com/jerehedu/
The copyright of this article belongs to Yantai Jerry Education Technology Co., Ltd. and the blog Park. You are welcome to repost it. However, you must keep this statement without the author's consent and provide the original article connection on the article page, otherwise, you are entitled to pursue legal liability.