zoukankan      html  css  js  c++  java
  • Android 沉浸式状态栏小马甲

    效果图

    • android 5.0 以上

    这里写图片描述

    • android 4.4 API 19

    这里写图片描述

    以上都是原生安卓系统的效果,具体到国内的各种各样改过的系统可能会有细微差别,测试过小米和华为的机器效果基本一样。

    实现

    1.修改主题属性

    方法一:

    在values-v19文件夹下声明AppTheme为透明状态栏,代码如下

    1 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    2     <!-- Customize your theme here. -->
    3     <item name="android:windowTranslucentStatus">true</item>
    4 </style>

    方法二:但是实际测试中发现在国产某些rom上,xml声明的会不起作用,在代码里直接声明更有效。在onCreate方法下声明。 

     1    @Override
     2      protected void onCreate(Bundle savedInstanceState) {
     3           super.onCreate(savedInstanceState); 
    5
    super.setContentView(R.layout.activity_base); 6 // 经测试在代码里直接声明透明状态栏更有效 7 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { 8 WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes(); 9 localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags); 10 } 11 }
    2.设置fitsSystemWindows属性

    如果你想让一个View的图像显示在状态栏下,那么就在View的XML布局文件中添加如下属性

    1 android:fitsSystemWindows="true"

    例子1
    这里我设置了在:AppBarLayout

    注意如果你在同一个布局中添加了多个这个属性,那么一般只有最外层View的这个 android:fitsSystemWindows="true” 属性生效

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <android.support.design.widget.CoordinatorLayout
     3     xmlns:android="http://schemas.android.com/apk/res/android"
     4     xmlns:app="http://schemas.android.com/apk/res-auto"
     5     xmlns:tools="http://schemas.android.com/tools"
     6     android:layout_width="match_parent"
     7     android:layout_height="match_parent"
     8     app:layout_behavior="@string/appbar_scrolling_view_behavior">
     9 
    10     <android.support.design.widget.AppBarLayout
    11         android:layout_width="match_parent"
    12         android:layout_height="wrap_content"
    13         android:fitsSystemWindows="true">
    14 
    15         <android.support.v7.widget.Toolbar
    16             android:id="@+id/toolbar"
    17             android:layout_width="match_parent"
    18             android:layout_height="wrap_content"
    19             android:background="@color/colorPrimary"
    20             android:minHeight="?attr/actionBarSize"
    21             android:paddingTop="25dp"
    22             app:layout_scrollFlags="scroll|enterAlways"
    23             app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    24             app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
    25 
    26     </android.support.design.widget.AppBarLayout>
    27 </android.support.design.widget.CoordinatorLayout>

     例子2

    在Activity的布局文件中把android:fitsSystemWindows设置为true

    虽然不加android:fitsSystemWindows属性也会改变状态栏的背景,但是出现的结果是不同的,不明白的话可以看例2的图比较直观。

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     3     xmlns:tools="http://schemas.android.com/tools"
     4     android:layout_width="match_parent"
     5     android:layout_height="match_parent"
     6     android:fitsSystemWindows="true"
     7     android:orientation="vertical"
     8     tools:context="wxt.example.com.as20.MainActivity"
     9     android:background="#FF4081">
    10 
    11     <TextView
    12         android:layout_width="wrap_content"
    13         android:layout_height="wrap_content"
    14         android:text="Hello World!" />
    15     <Button
    16         android:onClick="open"
    17         android:layout_width="wrap_content"
    18         android:layout_height="wrap_content"
    19         android:text="打开"/>
    20 
    21 </LinearLayout>

    这个是个LinearLayout布局,我们把android:fitsSystemWindows属性在里面设置。如果background是一种颜色的话,他会在整个屏幕上都是这种颜色。 那么我们把android:fitsSystemWindows属性去掉之后呢,两者有什么差别呢?

    加了android:fitsSystemWindows属性的界面(左) 不加android:fitsSystemWindows属性的界面(右)

    3.调整View高度

    上面两步都是统一的,这一步就比较有针对性了,对不同布局和API版本都会有所微调,主要是顶部View的高度。
    如果你像我一样基本使用原生控件,那么一般情况下是调整ToolBar(ActionBar)的高度。你需要给Toolbar加上系统状态栏的高度,因为如果你设置了前面两步,那么ToolBar会上移到状态栏下面,如图

    这里写图片描述

    方法一:我比较喜欢的处理方式是在XML中定义高度,那么就需要写一些分离区分版本的XML文件。目前的话安卓手机端除6.0的系统状态栏是24dp,其它都是25dp。

    1 android:paddingTop="25dp"

    方法二:是在java代码中改变高度,注意需要判断安卓版本,样例如下:
    (具体获取状态栏高度的代码可以到后面的参考资料中看,也可以在Demo中看源码)

     1 mToolbar = (Toolbar) findViewById(R.id.toolbar);
     2         
     3 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
     4 {
     5     mToolbar.getLayoutParams().height = getAppBarHeight();
     6     mToolbar.setPadding(mToolbar.getPaddingLeft(),
     7             getStatusBarHeight(),
     8             mToolbar.getPaddingRight(),
     9             mToolbar.getPaddingBottom());
    10 }
    11 
    12 setSupportActionBar(mToolbar);

    参考资料

    Android 沉浸式状态栏完美实现

    薄荷TOOLBAR(ACTIONBAR)的适配方案

    Android中 4.4-5.0 系统状态栏颜色的修改。实现Translucent System Bar

    Demo下载

    【GitHub】

  • 相关阅读:
    介绍一个axios调试好用的工具:axios-mock-adapter
    Promise使用时应注意的问题
    如何把js的代码写的更加容易维护(一)--面向对象编程
    一个简单的javascript节流器实现
    使用gulp和bable实现实时编译ES6代码
    javascript闭包的使用--按钮切换
    js求数组的最大值--奇技淫巧和笨方法
    Canvas绘图优化之使用位图--基于createjs库
    通过chrome浏览器分析网页加载时间
    阿里云ECS服务器折腾记(一):小白入门遇到的各类问题
  • 原文地址:https://www.cnblogs.com/abao0/p/6938844.html
Copyright © 2011-2022 走看看