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/
本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
android之官方导航栏ActionBar(三)之高仿优酷首页的更多相关文章
- Android之官方导航栏ActionBar
一.ActionBar概述 ActionBar是android3.0以后新增的组件,主要用于标示应用程序以及用户所处的位置并提供相关操作以及全局的导航功能.下面我们就看看如何使用ActionBar,真 ...
- Android官方导航栏ActionBar(二)—— Action View、Action Provider、Navigation Tabs的详细用法
在上一篇文章(Android之官方导航栏ActionBar)中,我们介绍了ActionBar各组成部分的基本应用.ActionBar除了提供Action Buttons外,还提供了多种导航方式如 Ac ...
- 高仿优酷Android客户端图片左右滑动(自动切换)
本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和门户网站都有类似的实现: 具体思路: 1. 工程中需要添加android-support-v4.jar,才能 ...
- Android之官方导航栏之Toolbar(Toolbar+DrawerLayout+ViewPager+PagerSlidingTabStrip)
通过前几篇文章,我们对Android的导航栏有了一定的了解认识,本次文章将对Toolbar进行综合应用,主要结合DrawerLayout.ViewPager.PagerSlidingTabStrip一 ...
- android MIPI屏 导航栏丢失
/**************************************************************************** * android MIPI屏 导航栏丢失 ...
- Android应用底部导航栏(选项卡)实例
现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...
- Android 修改底部导航栏navigationbar的颜色
Android 修改底部导航栏navigationbar的颜色 getWindow().setNavigationBarColor(Color.BLUE); //写法一 getWindow().set ...
- Android 打造炫目的圆形菜单 秒秒钟高仿建行圆形菜单
原文:Android 打造炫目的圆形菜单 秒秒钟高仿建行圆形菜单 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43131133, ...
- 仿优酷Android客户端图片左右滑动(自动滑动)
最终效果: 页面布局main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayou ...
随机推荐
- linux 终端上网设置
原网址: https://www.aliyun.com/jiaocheng/215068.html 摘要:第一步,需要安装一个名为w3m的软件工具,打开终端,输入如下命令sudoapt-getinst ...
- 《剑指offer》-链表找环入口
题目描述 一个链表中包含环,请找出该链表的环的入口结点. 初步想法是每个节点做几个标记,表示是否被访问过,那么遍历链表的时候就知道哪个被访问到了.但是不会实现. 另一个直觉是判断链表有环的算法中出现过 ...
- ctsc2018
day1: 8:20分还不知道考场在哪给ccf差评 8:30开始看题 第一题感觉是个模拟啊 很烦 瞄了一眼第二题第三题题意挺简单的啊感觉还不错 然后开始仔细看t1 然后我发现好像可以退狮子 应该是个数 ...
- Asp.Net Core 2.0 项目实战(4)ADO.NET操作数据库封装、 EF Core操作及实例
Asp.Net Core 2.0 项目实战(1) NCMVC开源下载了 Asp.Net Core 2.0 项目实战(2)NCMVC一个基于Net Core2.0搭建的角色权限管理开发框架 Asp.Ne ...
- Codeforces 524E Rooks and Rectangles 线段树
区域安全的check方法就是, 每行都有哨兵或者每列都有哨兵,然后我们用y建线段树, 维护在每个y上的哨兵的x的最值就好啦. #include<bits/stdc++.h> #define ...
- HDU 2222 Keywords Search (AC自动机)(模板题)
<题目链接> 题目大意: 给你一些单词,和一个字符串,问你这个字符串中含有多少个上面的单词. 解题分析: 这是多模匹配问题,如果用KMP的话,对每一个单词,都跑一遍KMP,那么当单词数量非 ...
- 洛谷 P1433 吃奶酪【DFS】+剪枝
题目链接:https://www.luogu.org/problemnew/show/P1433 题目描述 房间里放着n块奶酪.一只小老鼠要把它们都吃掉,问至少要跑多少距离?老鼠一开始在(0,0)点处 ...
- 如何使用 Git LFS 提交大文件?
参考资料: An open source Git extension for versioning large files Git LFS的使用 如何使用 Git LFS 提交大文件? Git LFS ...
- muduo网络库架构总结
目录 muduo网络库简介 muduo网络库模块组成 Recator反应器 EventLoop的两个组件 TimerQueue定时器 Eventfd Connector和Acceptor连接器和监听器 ...
- Java内存管理-程序运行过程(一)
勿在流沙住高台,出来混迟早要还的. 做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 相信在做Java开发的伙伴一定知道 JVM(Java Virtual Machine( ...