转载

android之官方导航栏ActionBar(三)之高仿优酷首页

一、问题概述

通过上两篇文章,我们对如何使用ActionBar大致都已经有了认识。在实际应用中,我们更多的是定制ActionBar,那么就需要我们重写或者定义一些样式来修饰ActionBar,来满足具体的需要。我们就以优酷首页为例,一起学习下ActionBar的综合应用。

android之官方导航栏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/

本文版权归 烟台杰瑞教育科技有限公司 和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

正文到此结束
Loading...