android沉浸式状态栏实现

最新推荐文章于 2019-09-18 17:41:08 发布
最新推荐文章于 2019-09-18 17:41:08 发布
阅读量1.7k 收藏 1
点赞数 2
分类专栏： android 文章标签： android开发 android android应用

版权声明，转载此处：http://blog.csdn.net/s003603u/article/details/47133723

传统的手机状态栏是呈现出黑色条状的，有的和手机主界面有很明显的区别。这样就在一定程度上牺牲了视觉宽度，界面面积变小。
沉浸模式的状态栏和主界面完全融为了一体，在设计上有不同的视觉感受。

我们先上两张图，很容易看出区别：


Android在4.4的时候增加了透明状态栏与导航栏的功能，依托于这个新特性，我们可以开始跟随潮流，实现Android的沉浸式状态栏
其实上图展示的这个关于界面的代码非常简单
[java] view plain copy print ?
  1. /**
  2. * 关于界面
  3. *
  4. * @author SuS
  5. * @time 2015.07.29
  6. */
  7. public class AboutActivity extends BaseActivity {
  9. @Override
  10. protected void onCreate(Bundle savedInstanceState) {
  11. super.onCreate(savedInstanceState);
  12. this.setContentView(R.layout.activity_about);
  14. setImmerseLayout(findViewById(R.id.common_back));
  16. initBackButton();
  17. setTitleBar(R.string.durian_about);
  18. }
  20. @Override
  21. protected void onResume() {
  22. super.onResume();
  23. }
  25. @Override
  26. protected void onPause() {
  27. super.onPause();
  28. }
  30. @Override
  31. protected void onDestroy() {
  32. super.onDestroy();
  33. }
  35. } 
/**
 * 关于界面
 *
 * @author SuS
 * @time 2015.07.29
 */
public class AboutActivity extends BaseActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.activity_about);

        setImmerseLayout(findViewById(R.id.common_back));

        initBackButton();
        setTitleBar(R.string.durian_about);
    }

    @Override
    protected void onResume() {
        super.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }

}
现在请注意setImmerseLayout（）这个方法，这个方法是在BaseActivity中实现的
[java] view plain copy print ?
  1. public class BaseActivity extends FragmentActivity {
  2. private static final String TAG = "BaseActivity";
  4. ...............
  6. public void initBackButton() {
  7. ImageView backButton = (ImageView) this.findViewById(R.id.durian_back_image);
  8. backButton.setOnClickListener(new View.OnClickListener() {
  9. @Override
  10. public void onClick(View v) {
  11. finishActivity();
  12. }
  13. });
  14. }
  16. protected void setImmerseLayout(View view) {
  17. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  18. Window window = getWindow();
  19. /*window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
  20. WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);*/
  21. window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
  23. int statusBarHeight = ScreenUtil.getStatusBarHeight(this.getBaseContext());
  24. view.setPadding(0, statusBarHeight, 0, 0);
  25. }
  26. }
  28. public void finishActivity() {
  29. finish();
  30. overridePendingTransition(R.anim.push_right_in, R.anim.push_right_out);
  31. }
  33. public void setTitleBar(int id) {
  34. TextView tvName = (TextView) findViewById(R.id.durian_title_text);
  35. tvName.setText(id);
  36. }
  37. } 
public class BaseActivity extends FragmentActivity {
    private static final String TAG = "BaseActivity";

  ...............
   
    public void initBackButton() {
        ImageView backButton = (ImageView) this.findViewById(R.id.durian_back_image);
        backButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finishActivity();
            }
        });
    }
   
    protected void setImmerseLayout(View view) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                Window window = getWindow();
                /*window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);*/
                window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

            int statusBarHeight = ScreenUtil.getStatusBarHeight(this.getBaseContext());
            view.setPadding(0, statusBarHeight, 0, 0);
        }
    }
   
    public void finishActivity() {
        finish();
        overridePendingTransition(R.anim.push_right_in, R.anim.push_right_out);
    }
   
    public void setTitleBar(int id) {
        TextView tvName = (TextView) findViewById(R.id.durian_title_text);
        tvName.setText(id);
    }
}
使用
window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
或者
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
都可以使状态栏透明，但是关键是下面这两行代码，如果没有这两行，会是这样

那么这两行神奇的代码的原理是什么？
我们先看一下ScreenUtil中的getStatusBarHeight方法
[java] view plain copy print ?
  1. /**
  2. * 用于获取状态栏的高度。 使用Resource对象获取（推荐这种方式）
  3. *
  4. * @return 返回状态栏高度的像素值。
  5. */
  6. public static int getStatusBarHeight(Context context) {
  7. int result = 0;
  8. int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen",
  9. "android");
  10. if (resourceId > 0) {
  11. result = context.getResources().getDimensionPixelSize(resourceId);
  12. }
  13. return result;
  14. } 
  /**
     * 用于获取状态栏的高度。 使用Resource对象获取（推荐这种方式）
     *
     * @return 返回状态栏高度的像素值。
     */
    public static int getStatusBarHeight(Context context) {
        int result = 0;
        int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen",
                "android");
        if (resourceId > 0) {
            result = context.getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }

这里是获得状态栏的高度，然后我们就可以通过设置common_back的padding属性
即：view.setPadding(0, statusBarHeight, 0, 0)来达到终极效果
但是这里还是需要注意细节的，首先大家应该理解padding的含义：内边距
那么再看一下common_back的布局文件
在activity_about.xml中我们是使用include引用的common_back

[html] view plain copy print ?
  1. <include
  2. android:id="@+id/common_back"
  3. layout="@layout/common_back" /> 
 <include
        android:id="@+id/common_back"
        layout="@layout/common_back" />

common_back的布局如下：
[html] view plain copy print ?
  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:id="@+id/durian_head_layout"
  4. android:layout_width="match_parent"
  5. android:layout_height="wrap_content"
  6. android:background="@color/common_top_bg" >
  8. <RelativeLayout
  9. android:layout_width="match_parent"
  10. android:layout_height="51dp" >
  12. <ImageView
  13. android:id="@+id/durian_back_image"
  14. android:layout_width="wrap_content"
  15. android:layout_height="wrap_content"
  16. android:layout_centerVertical="true"
  17. android:layout_marginLeft="18dp"
  18. android:padding="5dp"
  19. android:src="@drawable/btn_back_selector" />
  21. <TextView
  22. android:id="@+id/durian_title_text"
  23. android:layout_width="wrap_content"
  24. android:layout_height="wrap_content"
  25. android:layout_centerInParent="true"
  26. android:textColor="@color/common_text_black"
  27. android:textSize="18sp" />
  29. <ImageView
  30. android:id="@+id/durian_titlebar_image1"
  31. android:layout_width="51dp"
  32. android:layout_height="51dp"
  33. android:layout_alignParentRight="true"
  34. android:layout_centerVertical="true"
  35. android:scaleType="centerInside"
  36. android:visibility="gone" />
  38. <ImageView
  39. android:id="@+id/durian_titlebar_image2"
  40. android:layout_width="51dp"
  41. android:layout_height="51dp"
  42. android:layout_centerVertical="true"
  43. android:layout_toLeftOf="@id/durian_titlebar_image1"
  44. android:scaleType="centerInside"
  45. android:visibility="gone" />
  46. </RelativeLayout>
  48. </FrameLayout> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/durian_head_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/common_top_bg" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="51dp" >

        <ImageView
            android:id="@+id/durian_back_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="18dp"
            android:padding="5dp"
            android:src="@drawable/btn_back_selector" />

        <TextView
            android:id="@+id/durian_title_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textColor="@color/common_text_black"
            android:textSize="18sp" />

        <ImageView
            android:id="@+id/durian_titlebar_image1"
            android:layout_width="51dp"
            android:layout_height="51dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:scaleType="centerInside"
            android:visibility="gone" />

        <ImageView
            android:id="@+id/durian_titlebar_image2"
            android:layout_width="51dp"
            android:layout_height="51dp"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@id/durian_titlebar_image1"
            android:scaleType="centerInside"
            android:visibility="gone" />
    </RelativeLayout>

</FrameLayout>

这里我们使用了一层FrameLayout包裹住RelativeLayout，这里有什么玄机那，其实这里就是为了
方便上面那两行神奇的代码起作用，这样我们就能设置RelativeLayout相对于FrameLayout的内边距为状态栏的高度了
也就完美的达到了沉浸式状态栏的目的，而且保证导航栏的相对位置不变。

这里存在一个common_back作为一个基准来控制高度达到状态栏的高度，如果一个activity只有一个背景图片或者不以类似导航栏的空间作为基准的话，怎么实现沉浸式状态栏，例如达到这种状态
我们只需要在代码这样设置
[java] view plain copy print ?
  1. protected void setImmerseLayout(View view) {
  2. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  3. Window window = getWindow();
  4. /*window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
  5. WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);*/
  6. window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
  8. /* int statusBarHeight = ScreenUtil.getStatusBarHeight(this.getBaseContext());
  9. view.setPadding(0, statusBarHeight, 0, 0);*/
  10. }
  11. } 
   protected void setImmerseLayout(View view) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                Window window = getWindow();
                /*window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);*/
                window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

           /* int statusBarHeight = ScreenUtil.getStatusBarHeight(this.getBaseContext());
            view.setPadding(0, statusBarHeight, 0, 0);*/
        }
    }

然后在当前activity的布局文件中加入这两句话
android:fitsSystemWindows="true"
android:clipToPadding="true"

这时候状态栏的背景与Activity的整个大背景融合在一起了


总结：

基于以上的方法介绍，我们可以实现状态栏与导航栏以及状态栏与页面大背景的沉浸式体验。

其实上面也可以看出代码封装的一些技巧：如让我们所有的activity继承BaseActivity，这样像

setImmerseLayout(findViewById(R.id.common_back));
initBackButton();
setTitleBar(R.string.durian_about);
诸如此类的操作实现起来省时省力了！

欢迎拍砖 、评论！

今天的博客就写到这里了，抓紧回家了，要不外面又要下大雨了！

昨天太晚了，没有上传demo，现在附上
Demo 下载地址 https://github.com/feifei003603/ImmerseLayoutDemo.git

Android 5.0 如何实现将布局的内容延伸到状态栏实?

补充：这个只是我刚开始搞这部分内容，肯定存在很多不足，也有很多问题没有考虑到，觉得可以参考的就拿去，觉得比较low的大神请放过

i_a_jun
关注
专栏目录
沉浸式状态栏Demo
09-29
沉浸式状态栏Demo，配合本人原创博文：http://blog.csdn.net/c_m_l/article/details/48782593
Android沉浸式状态栏demo代码
06-11
主要介绍了Android沉浸式状态栏实现示例,小编觉得挺不错的,现在分享给大家下载,也给大家做个参考
【Android实战】沉浸式状态栏实现（上）
s003603u的专栏
07-29 7960
Android在4.4的时候增加了透明状态栏与导航栏的功能，依托于这个新特性，我们可以开始跟随潮流，实现Android的沉浸式状态栏
Android App 沉浸式状态栏解决方案
weixin_30315905的博客
02-17 260
伴随着 Android 5.0 发布的 Material Design，让 Android 应用告别了以前的工程师审美，迎来了全新的界面，灵动的交互，也让越来越多的 App 开始遵从 material design 设计原则，不再是以前拿着iOS设计稿，做着Android开发。本文就其中的沉浸式状态栏这一特性，描述其兼容到4.4的实现，以及一些使用中的小细节。 前言 在4.4之前状态栏一直是黑...
Android 沉浸式状态栏
xiangxiongfly
09-18 6828
这事可以借助Palette库识别状态栏区域的颜色，如果是浅色将状态栏图标的颜色改为黑色，否则改为白色。将FrameLayout替换为CoordinatorLayout布局。属性不生效，而使用CoordinatorLayout 布局时才能生效。当状态栏图标的颜色和背景图颜色非常接近时，会导致部分内容看不清的情况。可以使用CollapsingToolbarLayout控件解决。状态栏部分没有被颜色，说明沉浸式效果没有达到。为什么根布局是FrameLayout时，图片并有延伸到状态栏区域。...
Android沉浸式状态栏实现示例
08-31
总的来说，实现Android沉浸式状态栏涉及多个步骤，包括设置透明状态栏、处理导航栏颜色、以及调整布局以适应系统窗口。开发者需要根据目标设备的Android版本选择合适的实现方法，以保证兼容性和视觉效果。通过上述...
Android沉浸式状态栏实现
09-02
在Android开发中，沉浸式状态栏...总的来说，Android沉浸式状态栏的实现涉及对系统窗口属性的调整、布局的适配以及状态栏颜色的定制。通过正确地组合这些步骤，开发者可以为用户提供更加美观和一致的应用体验。
另外两种 Android 沉浸式状态栏实现思路1
08-03
本文将介绍两种额外的Android沉浸式状态栏实现思路。 首先，我们来看传统的实现方法，通常依赖于设置状态栏透明和自定义颜色。这需要在`onCreate()`方法中添加以下代码： ```java if (Build.VERSION.SDK_INT >= ...
另外两种Android沉浸式状态栏实现思路
01-20
总结来说，虽然Android 5.0及以上版本提供了原生的支持，但在Android 4.4及以下版本，开发者需要通过一些技巧来实现沉浸式状态栏。通过自定义状态栏视图和使用视图动画，可以更好地解决特殊场景下的问题，提供更优秀...
沉浸式状态栏在fragment中的使用
05-17
现在我们借助一些flag或者一些第三方的库比如SystemBarTintManager，但是如果Activity有嵌套的fragment,每个fragment的沉浸式要求不同有的要求状态栏标题栏一致，有的要求全屏 有的要求颜色渐变 这种我们需要设置activity全屏 然后自定义一个状态栏
利用fragmentation实现多Activity和多Fragment实现,并完美解决沉浸式状态栏
09-28
利用fragmentation实现多Activity和多Fragment实现,并完美解决沉浸式状态栏
一个Activity中多个Fragment实现沉浸式状态栏的解决方法
08-31
主要介绍了一个Activity中多个Fragment实现沉浸式状态栏解决方法，对于解决这个问题要分为两部分，具体内容详情，大家参考下本文吧
Android 沉浸式状态栏(亲测好用)
01-28
Android 沉浸式状态栏，包括普通沉浸式与图片沉浸式，亲测好用！
沉浸式Activity色值或图片状态栏，沉浸式Fragment色值状态栏
04-10
android沉浸式色值和图片的状态栏例子，包括Activity和fragment的沉浸式
android -------- 沉浸式状态栏和沉浸式导航栏（ImmersionBar）
chengjie212232的博客
09-05 1633
android 4.4以上沉浸式状态栏和沉浸式导航栏管理，包括状态栏字体颜色，适用于Activity、Fragment、DialogFragment、Dialog，并且适配刘海屏，适配软键盘弹出等问题 　　 　　ImmersionBar -- android 4.4以上沉浸式实现 　　 　　直...
Android沉浸式状态栏
小海编码日记
04-13 645
新建项目，并新建 Abstarct BaseActivity继承自AppCompatActivity新建虚方法：public abstract void initView(Bundle saved); public abstract void initData();打开build.gradle文件，加入沉浸式状态栏依赖如下：compile 'com.readystatesoftware.sy
Android沉浸式状态栏的简单实现
刘小猪宝宝的博客
12-30 495
Android沉浸式状态栏的简单实现 作为一个小菜鸟，开发过程中遇到不会的问题，总是去网上找各种demo。由于本人比较懒，所以一般没有做笔记的习惯，可是每次遇到相同问题时都要去找博客，感觉很麻烦，所以就抽空闲时间把自己开发过程中遇到的一些问题和大家分享一下，既可以记笔记又能帮助小伙伴们，这不是一举两得吗O(∩_∩)O哈哈~。本人开发时间不太长，可能考虑问题不是太全面，希望各位大神们给出合理的意见
Android Fragment 实现状态栏透明（沉浸式）
龙衣
12-25 5641
来两张效果图对比一下 第一张图是实现了透明状态栏的效果，第二张图是未实现透明状状态栏。如果还看不出区别，那么请打开手机淘宝和任一手机银行App对比顶部的颜色。 现在好多手机已经是全面屏了，如果我们的应用在顶部还是多出来这么一块黑条，那多不美观啊（APP 主题色是黑色的略过） 那么如何实现？我这里由于项目集成了 statusbarutil所以直接就参考了他例子中的代码来实现了。 Status...
Android沉浸式状态栏实现方法探索
"这篇文章主要探讨了两种额外的Android沉浸式状态栏实现方法，适用于Android 4.4（API 19）及以上的版本，特别是针对目前仍为主流的Android 4.4系统。沉浸式状态栏是让应用界面延伸到状态栏下方，提供更无缝的视觉...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值