android之官方導航欄ActionBar(三)之高仿優酷首頁

一、問題概述

         通過上兩篇文章，我們對如何使用ActionBar大致都已經有了認識。在實際應用中，我們更多的是定制ActionBar，那么就需要我們重寫或者定義一些樣式來修飾ActionBar，來滿足具體的需要。我們就以優酷首頁為例，一起學習下ActionBar的綜合應用。

二、Android系統ActionBar樣式的定義

　　首先，我們先認識一下android系統中是如何定義ActionBar樣式的，這里我們以Theme.Holo.Light主題為例，通過源碼我們可以看到在該主題中關於ActionBar的樣式定義如下：

<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>

　　在如上眾多的屬性中，需要我們重點關注的樣式屬性主要有如下幾個：

1、actionBarStyle：該屬性定義了ActionBar的主要樣式，包括ActionBar背景、標題樣式、分隔符等等。具體的屬性如下：titleTextStyle、background、backgroundSplit、divider。在這里不在貼源碼了，大家可自行查看。

2、actionBarSize：定義ActoinBar的高度

3、actionButtonStyle：用於定義Action item button的樣式，主要屬性有background、paddingStart、paddingEnd、minWidth等。

4、actionBarTabStyle：用於定義ActionBar上的Tabs的樣式。

5、actionBarTabBarStyle：用於定義Tab下方細條的樣式。

6、actionBarTabTextStyle：用於定義Tab上文字的樣式。

三、案例實現

　　下面我們就結合之前的知識和上面的樣式一步一步完成本文的案例，優酷首頁。

　　首先，我們將標題隱藏並設置Logo，可通過代碼進行設置，如下所示：

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

　　第二步按照上篇文章的步驟完成Tab導航的添加，在這里就不在貼代碼了。

　　第三步編寫menu文件，在這里大家要注意的是overflow區的菜單沒法自定義布局，點擊overflow溢出的菜單，我是使用了PopupWindow實現的。在PopupWindow中我添加了一個ListView，並為ListView添加了兩種Item的布局文件，一個用於登陸菜單，一個用於其他的菜單。菜單文件如下文件具體如下：

<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="搜索" />
    <item
        android:id="@+id/action_game"
        android:icon="@drawable/btn_game_icon"
        android:orderInCategory="2"
        android:showAsAction="always"
        android:title="游戲" />
    <item
        android:id="@+id/action_recommend"
        android:icon="@drawable/btn_recommend"
        android:orderInCategory="3"
        android:showAsAction="always"
        android:title="市場" />

    <item
        android:id="@+id/action_more"
        android:icon="@drawable/btn_more_bg"
        android:orderInCategory="4"
        android:showAsAction="always"
        android:title="更多" />
</menu>

　　菜單文件中，我們讓所有的菜單項都顯示到ActionBar上。

　　彈出PopuWindow菜單的方法如下：

        public void showPopMenu(){
        //獲取狀態欄高度
        Rect frame = new Rect();
        getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
        //計算偏移量,50dp為我們設置的actionbar的高度，默認情況下Tab的高度和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);
        //設置彈出動畫
        popupWindow.setAnimationStyle(android.R.style.Animation_Dialog);
        popupWindow.showAtLocation(parentView, Gravity.RIGHT|Gravity.TOP,offsetX,offsetY);
}

　　通過以上步驟，我們即可實現優酷首頁的大體模樣，但樣式還是相差很遠，下面我們通過自定義樣式來完成。

<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>

　　通過actionBarSize設定了ActionBar的高度，通過自定義actionBarStyle定義了ActionBar的背景，具體如下：

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

　　通過actionButtonStyle，定義了左右內邊距和最小寬度。

<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>

　　通過actionBarTabStyle、actionBarTabBarStyle、actionBarTabTextStyle定義Tab相關的樣式。

    <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>

 

　　想要了解更多內容的小伙伴，可以點擊查看源碼，親自運行測試。

 

作者： 傑瑞教育
出處： http://www.cnblogs.com/jerehedu/ 
本文版權歸煙台傑瑞教育科技有限公司和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。