博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
android之官方导航栏ActionBar(三)之高仿优酷首页
阅读量:7231 次
发布时间:2019-06-29

本文共 2813 字,大约阅读时间需要 9 分钟。

一、问题概述

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

二、Android系统ActionBar样式的定义

  首先,我们先认识一下android系统中是如何定义ActionBar样式的,这里我们以Theme.Holo.Light主题为例,通过源码我们可以看到在该主题中关于ActionBar的样式定义如下:

  在如上众多的属性中,需要我们重点关注的样式属性主要有如下几个:

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的布局文件,一个用于登陆菜单,一个用于其他的菜单。菜单文件如下文件具体如下:

  菜单文件中,我们让所有的菜单项都显示到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);}

  通过以上步骤,我们即可实现优酷首页的大体模样,但样式还是相差很远,下面我们通过自定义样式来完成。

  通过actionBarSize设定了ActionBar的高度,通过自定义actionBarStyle定义了ActionBar的背景,具体如下:

  通过actionButtonStyle,定义了左右内边距和最小宽度。

  通过actionBarTabStyle、actionBarTabBarStyle、actionBarTabTextStyle定义Tab相关的样式。

    

 

  想要了解更多内容的小伙伴,可以点击,亲自运行测试。

 

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

转载于:https://www.cnblogs.com/jerehedu/p/4527021.html

你可能感兴趣的文章
复习日记-Linux项目发布
查看>>
The 'Microsoft Jet OLEDB 4.0 Provider' is not registered on the local machine
查看>>
Java 基础源码 switch语句判断指定月份属于一年中的哪个季度
查看>>
12px以下字体显示问题
查看>>
小程序滚动条 无法滚动BUG 解决方案
查看>>
cs108 04 oop design
查看>>
win7 打开方式不能添加程序
查看>>
EasyUI-panel 内嵌页面上的js无法被执行
查看>>
pycharm运行input输入字符串报错 NameError: name 'xxx' is not defined
查看>>
微信小程序rpx单位
查看>>
Javascript读写CSS属性
查看>>
58.com qiyi
查看>>
ORACLE批量导入图片到BLOB字段
查看>>
OpenCl工作组
查看>>
Angular 学习笔记——$interpolate
查看>>
Javascript模块化编程之Why
查看>>
2016/4/5 对象
查看>>
[反射]通用方法 命名空间,类,对象,属性
查看>>
递归的代价
查看>>
SPOJ Problem 5699:The last digit re-visited
查看>>