分别用ToolBar和自定义导航栏实现沉浸式状态栏

一、ToolBar

1、在build.gradle中添加依赖,例如:

compile 'com.android.support:appcompat-v7:23.4.0'

2、去掉应用的ActionBar。可以是修改主题theme为“NoActionBar”,例如:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

或者不修改主题为"NoActionBar",而在主题的style下,添加:

 <item name="windowNoTitle">true</item>
 <item name="windowActionBar">false</item>

第二个属性代表是否用ActionBar代替TitleBar。

其实,刚学的时候,感觉很纳闷,怎么又多了个TitleBar?后来查了很久才发现,3.0以前,状态栏下面的是标题栏(只能显示标题等少量信息),3.0以后就变成了应用栏,也就是ActionBar。

另外,我测试的时候,activity是继承于AppCompatActivity,主题是AppCompat类型的。这种情况下,必须要像上面那样写才有效果,少写或值不同的话,要么没效果,要么报错。

最后,上面两个属性的说明可在android.R.attr这个类中查看。

3、在xml中为ToolBar添加属性

 android:fitsSystemWindows="true"
 android:minHeight="?attr/actionBarSize"

fitsSystemWindows是ToolBar实现沉浸式状态栏的关键,其大概情况是,如果设为true,就会调整这个view去留一些空间给系统窗口,如果不设置或设为false,ToolBar就会和状态栏重叠在一起。

而第二个属性中,它的值全写是"?android:attr/actionBarSize",其意思是引用当前主题中的actionBarSize这个属性。更多相关说明可查看官方文档中Accessing Resources的部分。

上面两个属性可在android.view.View这个类中查看。

4、在java中添加判断sdk版本的代码并在用户的系统是4.4及以上时设置状态栏为透明

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
 getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}

无论是ToolBar,还是自定义导航栏,这个操作都是实现沉浸式状态栏的关键。

因为设置状态栏为透明的这个属性,要4.4以上才能使用,所以4.4以下的系统是不能够实现沉浸式状态栏的。而在4.4到5.0的系统中,状态栏是全透明的,也就是它的颜色会跟你的ToolBar和自定义导航栏的颜色一样。而在5.0以上的系统中,则是半透明的,也就看起来会比较深暗。

而我在6.0的系统上测试时,发现这一步没设置和设置了的,从效果上看,区别就是没设置时状态栏颜色浅一点,而且ToolBar的padding top为0,而设置了的颜色就深一点,padding top为状态栏的高度。具体有什么影响,还不清楚。但这会让自定义导航的外观变形,它会增加状态栏的高度,但又没有让这部分与状态栏重叠,就导致效果变形。

5、最后在java中添加

setSupportActionBar(mToolbar);

ToolBar的布局代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/tool_bar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="@color/colorPrimary"
 android:elevation="4dp"
 android:fitsSystemWindows="true"
 android:minHeight="?android:attr/actionBarSize"
 app:title="ToolBar"
 app:subtitle="toolbar"/>

效果图(Android 6.0):

二、自定义导航栏TopBar

1、设置窗口为无标题,上面第2步中的两个方法都可以实现,或者是在java中添加如下代码:

requestWindowFeature(Window.FEATURE_NO_TITLE);

注意在添加这句代码时,确保是在加载布局内容之前,也就是onCreate的setContentView之前。在《Android群英传》“Android控件架构”,这一节中解释了为什么requestWindowFeature()需要在setContentView()之前。

另外,我发现如果该activity是继承AppCompatActivity的话,只写上面的这句代码是没有变化的,显示的还是ActionBar。但如果是继承FragmentActivity的话,就有效果,也就说上面第2步中的第二个方法,只添加其中任意一个属性都是可以的。至于是什么原因,我还没弄清楚。

2、同上面第4步,判断系统版本并按需设置状态栏为透明

3、获取状态栏的高度

protected int getStatusHeight() {
 try {
 Class<?> c = Class.forName("com.android.internal.R$dimen"); // 获得与字符串对应的Class对象
 Object object = c.newInstance(); // 创建这个Class的实例对象
 Field field = c.getField("status_bar_height"); // 拿到字符串对应的变量
 int x = Integer.parseInt(field.get(object).toString()); // 通过这个实例对象拿到这个变量的值,再转换类型,最后转为整型,变为一个资源id
 return getResources().getDimensionPixelSize(x);
 } catch (Exception e) {
 e.printStackTrace();
 }
 return 0;
}

这部分代码是利用Java的反射机制来实现的,因为这个internal包默认会被sdk/platforms/android-version中的android.jar给移除掉,所以无法直接调用或查看这个包中的类。如果要使用的话,可以借助这个开源项目https://github.com/anggrayudi/android-hidden-api

4、获取自定义TopBar的高度并修改布局参数

protected void setStatusBar() {
 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
 final ViewGroup viewGroup = (ViewGroup) findViewById(R.id.top_bar);
 final int statusHeight = getStatusHeight();
 viewGroup.post(new Runnable() {
  @Override
  public void run() {
  int topBarHeight = viewGroup.getHeight();
  LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) viewGroup.getLayoutParams();
  layoutParams.height = statusHeight + topBarHeight;
  viewGroup.setLayoutParams(layoutParams);
  }
 });
 }
}

因为在include这个TopBar的布局文件中,其父布局是LinearLayout,而TopBar的父布局是RelativeLayout,所以这里先要转成ViewGroup,等getLayoutParams时,再转成LinearLayout.LayoutParams。

TopBar的布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/top_bar"
 android:layout_width="match_parent"
 android:layout_height="49dp"
 android:background="@color/colorPrimary"
 android:gravity="bottom">
 <RelativeLayout
 android:layout_width="match_parent"
 android:layout_height="49dp">
 <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerInParent="true"
  android:text="@string/app_name"
  android:textSize="24sp"
  android:textColor="#ffffff"/>
 </RelativeLayout>
</RelativeLayout>

因为这个布局的高度会在代码中动态地修改,即49dp加上状态栏的高度,所以只有一个层级的结构的话,那导航栏的内容就会往上偏。所以要嵌套多一层来维持导航栏的高度,同时在最外层的布局中,添加android:gravity="bottom"这个属性来保证导航栏不往上偏。

效果图(Android 6.0):

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

(0)

相关推荐

  • Android5.0+ CollapsingToolbarLayout使用详解

    CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView.Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端). 使用CollapsingToolbarLayout: <android.support.design.wid

  • Android自定义Toolbar使用方法详解

    本篇文章介绍: 如何使用Toolbar; 自定义Toolbar; 先来看一看效果,了解一下toolbar: 布局文件: <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@co

  • 微软IE Developer Toolbar安装使用简要图文说明

    微软IE Developer Toolbar是微软专门为Web开发人员设计的一款免费产品,该产品让开发人员能够深入探索和理解Web页面,帮助开发者更好地创建Web应用.安装后可以在IE中快速分析网页的软件.该工具条可集成在IE窗口,或以浮动窗口形式存在.和IE Developer Toolbar功能相似的产品在FireFox下有:Web Developer Toolbar和Firebug,功能都比较强劲. 和其它应用程序一样,下载完IE Developer Toolbar之后,双击程序运行安装,

  • iOS应用中使用Toolbar工具栏方式切换视图的方法详解

    关于UIToolbar ToolBar工具栏是视图View的属性,可以在工具栏上添加工具栏按钮Bar Button Item(可以是自定义的Custom.也可以是系统自带的BarButtonSystemItem ),视图控制器可以通过工具栏项对视图中内容进行操作. 注意事项: 在导航栏控制器中会有一个UIToolBar实例,但默认是隐藏的,如果需要显示,需要通过这个方法将其打开: 在这里需要注意的是,与UINavigationBar类似,导航控制器拥有且只拥有一个UIToolBar实例,但UIT

  • Toolbar制作菜单条过程详解

    文章来源:互联网 作者:ggg82/CSDN 现在许多用户界面都使用工具栏制作菜单条,小弟最近对此感兴趣,便从网上求助,可是得到的帮助大多是BCGControlBar的源代码或者是SizableRebar的源代码,对于只希望是自己的界面具有该功能的朋友来说,这也许是不错的选择,只要看一下demo,然后直接调用别人的类库就可以了,但对于我等对此话题感兴趣,希望弄懂其来龙去脉的读者来说,直接看这些没有详细解释的源代码,要从中弄出个所以然来,实不是件容易的是,至少对于像我这样的菜鸟来说是这样的,本文出

  • jquery toolbar与网页浮动工具条具体实现代码

    jquery 实现toolbar与网页浮动工具条jQuery实现方法 /* 基本StructureWe'll更新index.php教程的HTML代码和对新闻联播style.css教程中的CSS代码. 我们建立了一个固定的面板(ID为工具栏组)两个浮动方面,我们将在第二个步骤与他们的图标和提示气泡(左),一个快速菜单和"隐藏按钮列表"(添加到隐藏工具栏). 我们还可以期待一个"显示按钮",它是有用的,当面板隐藏,我们要重新激活它.基于这个原因,我们添加id为toolb

  • Java Swing中的工具栏(JToolBar)和分割面版(JSplitPane)组件使用案例

    一:工具栏(JToolBar) 代码示例: 复制代码 代码如下: import javax.swing.*; //工具栏的使用案例 public class JToolBarDemo2_jigloo extends javax.swing.JFrame { private JToolBar myJToolBar;  private JButton jB_file;  private JButton jB_edit;  private JButton jB_tools;  private JBut

  • Android自定义ActionProvider ToolBar实现Menu小红点

    今天的几个目标: 1. 自定义ActionProvider 2. Toolbar ActionBar自定义Menu 3. Toolbar ActionBar 右侧Menu添加角标(Toolbar ActionBar Menu添加小红点) 源代码在文章末尾. -------------------------------------------------------------------------------- 效果预览 自定义Menu后不影响原生MD的任何效果.可以通过外部来控制显示的文字

  • 深入理解Android 5.0中的Toolbar

    环境说明: Android Studio 2.0 V7包版本:com.android.support:appcompat-v7:23.4.0 compileSdkVersion 23 buildToolsVersion "24.0.0" Toolbar 引入使用 XML布局中加入: <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="ma

  • iOS中的导航栏UINavigationBar与工具栏UIToolBar要点解析

    一.导航栏UINavigationBar 1.导航栏的使用 在iOS开发中,我们通常会使用导航控制器,导航控制器中封装了一个UINavigationBar,实际上,我们也可以在不使用导航控制器的前提下,单独使用导航栏,在UINavigationBar中,也有许多我们可以定制的属性,用起来十分方便. 2.UINavigationBar的创建和风格类型 导航栏继承于UIView,所以我们可以像创建普通视图那样创建导航栏,比如我们创建一个高度为80的导航栏,将其放在ViewController的头部,

随机推荐