《android之官方导航栏ActionBar之高仿优酷首页.docx》由会员分享，可在线阅读，更多相关《android之官方导航栏ActionBar之高仿优酷首页.docx（11页珍藏版）》请在三一办公上搜索。
1、android之官方导航栏ActionBar之高仿优酷首页 烟台杰瑞教育科技有限公司(Android开发培训部) 版权所有 android之官方导航栏ActionBar(三)之高仿优酷首页 一、问题概述 通过上两篇文章，我们对如何使用ActionBar大致都已经有了认识。在实际应用中，我们更多的是定制ActionBar，那么就需要我们重写或者定义一些样式来修饰ActionBar，来满足具体的需要。我们就以优酷首页为例，一起学习下ActionBar的综合应用。 二、Android系统ActionBar样式的定义 首先，我们先认识一下android系统中是如何定义ActionBar样式的，这里我们
2、以Theme.Holo.Light主题为例，通过源码我们可以看到在该主题中关于ActionBar的样式定义如下： drawable/ab_solid_shadow_holo -杰瑞教育( ) 专注IT技能培训 打造一流人才服务平台- 烟台杰瑞教育科技有限公司(Android开发培训部) 版权所有 style/Widget.Holo.Light.ActionBar.Solid.Inverse style/Theme.Holo null style/Widget.Holo.Spinner.DropDown.ActionBar style/Widget.Holo.ActionButton style
3、/Widget.Holo.ActionButton.Overflow drawable/cab_background_top_holo_dark drawable/cab_background_bottom_holo_dark drawable/ic_cab_done_holo_dark drawable/ic_ab_back_holo_dark style/Widget.Holo.Light.ActionBar.TabView.Inverse style/Widget.Holo.Light.ActionBar.TabBar.Inverse style/Widget.Holo.Light.Ac
4、tionBar.TabText.Inverse drawable/list_divider_holo_dark drawable/item_background_holo_dark ?attr/textColorPrimaryInverse style/Widget.Holo.Light.ActionMode.Inverse style/Widget.Holo.ActionButton.CloseMode style/Widget.Holo.PopupWindow.ActionMode drawable/ic_menu_cut_holo_dark drawable/ic_menu_copy_h
5、olo_dark drawable/ic_menu_paste_holo_dark drawable/ic_menu_selectall_holo_dark drawable/ic_menu_share_holo_dark drawable/ic_menu_find_holo_dark drawable/ic_menu_search_holo_dark -杰瑞教育( ) 专注IT技能培训 打造一流人才服务平台- 烟台杰瑞教育科技有限公司(Android开发培训部) 版权所有 在如上众多的属性中，需要我们重点关注的样式属性主要有如下几个： 1、actionBarStyle：该属性定义了Actio
6、nBar的主要样式，包括ActionBar背景、标题样式、分隔符等等。具体的属性如下：titleTextStyle、background、backgroundSplit、divider。在这里不在贴源码了，大家可自行查看。 2、actionBarSize：定义ActoinBar的高度 3、actionButtonStyle：用于定义Action item button的样式，主要属性有background、paddingStart、paddingEnd、minWidth等。 4、actionBarTabStyle：用于定义ActionBar上的Tabs的样式。 5、actionBarTabBa
7、rStyle：用于定义Tab下方细条的样式。 6、actionBarTabTextStyle：用于定义Tab上文字的样式。 三、案例实现 下面我们就结合之前的知识和上面的样式一步一步完成本文的案例，优酷首页。 首先，我们将标题隐藏并设置Logo，可通过代码进行设置，如下所示： ActionBar actionbar= getActionBar; actionbar.setDisplayUseLogoEnabled(true); actionbar.setDisplayShowTitleEnabled(false); actionbar.setDisplayShowHomeEnabled(tru
8、e); actionbar.setDisplayHomeAsUpEnabled(false); actionbar.setLogo(R.drawable.icon_youku); 第二步按照上篇文章的步骤完成Tab导航的添加，在这里就不在贴代码了。 第三步编写menu文件，在这里大家要注意的是overflow区的菜单没法自定义布局，点击overflow溢出的菜单，我是使用了PopupWindow实现的。在PopupWindow中我添加了一个ListView，并为ListView添加了两种Item的布局文件，一个用于登陆菜单，一个用于其他的菜单。菜单文件如下文件具体如下： -杰瑞教育( ) 专注
9、IT技能培训 打造一流人才服务平台- 烟台杰瑞教育科技有限公司(Android开发培训部) 版权所有 菜单文件中，我们让所有的菜单项都显示到ActionBar上。 弹出PopuWindow菜单的方法如下： public void showPopMenu /获取状态栏高度 Rect frame = new Rect; getWindow.getDecorView.getWindowVisibleDisplayFrame(frame); /计算偏移量,50dp为我们设置的actionbar的高度，默认情况下Tab的高度和ActionBar是一致的 int offsetY=frame.top+get
10、ActionBar.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 = ne
11、w ListAdapter(this,initListData); -杰瑞教育( ) 专注IT技能培训 打造一流人才服务平台- 烟台杰瑞教育科技有限公司(Android开发培训部) 版权所有 myList.setAdapter(adapter); PopupWindow popupWindow = new PopupWindow(popView, dip2px(160), ViewGroup.LayoutParams.WRAP_CONTENT,true); popupWindow.setBackgroundDrawable(new BitmapDrawable(getResources,(Bi
12、tmap)null); popupWindow.setOutsideTouchable(true); /设置弹出动画 popupWindow.setAnimationStyle(android.R.style.Animation_Dialog); popupWindow.showAtLocation(parentView, Gravity.RIGHT|Gravity.TOP,offsetX,offsetY); 通过以上步骤，我们即可实现优酷首页的大体模样，但样式还是相差很远，下面我们通过自定义样式来完成。 50dp style/CustomActionBarStyle style/Custom
13、ActionButtonStyle style/CustomActionOverflowStyle style/CustomActionTabViewStyle style/CustomActionTabBarStyle style/CustomActionTabTextStyle style/CustomItemTextAppearance 通过actionBarSize设定了ActionBar的高度，通过自定义actionBarStyle定义了ActionBar的背景，具体如下： drawable/actionbar_background -杰瑞教育( ) 专注IT技能培训 打造一流人才服
14、务平台- 烟台杰瑞教育科技有限公司(Android开发培训部) 版权所有 通过actionButtonStyle，定义了左右内边距和最小宽度。 0dip 0dip 30dip 通过actionBarTabStyle、actionBarTabBarStyle、actionBarTabTextStyle定义Tab相关的样式。 drawable/actionbar_tabview_bg 10dp 14sp normal color/actionbar_text_color 想要了解更多内容的小伙伴，可以点击查看源码，亲自运行测试。 作者：杰瑞教育 出处： 本文版权归烟台杰瑞教育科技有限公司所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 -杰瑞教育( ) 专注IT技能培训 打造一流人才服务平台-
