android沉浸式状态栏实现
2015-07-29 21:20
561 查看
传统的手机状态栏是呈现出黑色条状的,有的和手机主界面有很明显的区别。这样就在一定程度上牺牲了视觉宽度,界面面积变小。
沉浸模式的状态栏和主界面完全融为了一体,在设计上有不同的视觉感受。
我们先上两张图,很容易看出区别:
Android在4.4的时候增加了透明状态栏与导航栏的功能,依托于这个新特性,我们可以开始跟随潮流,实现Android的沉浸式状态栏
其实上图展示的这个关于界面的代码非常简单
使用
window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
或者
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
都可以使状态栏透明,但是关键是下面这两行代码,如果没有这两行,会是这样
那么这两行神奇的代码的原理是什么?
我们先看一下ScreenUtil中的getStatusBarHeight方法
这里是获得状态栏的高度,然后我们就可以通过设置common_back的padding属性
即:view.setPadding(0, statusBarHeight, 0, 0)来达到终极效果
但是这里还是需要注意细节的,首先大家应该理解padding的含义:内边距
那么再看一下common_back的布局文件
在activity_about.xml中我们是使用include引用的common_back
common_back的布局如下:
这里我们使用了一层FrameLayout包裹住RelativeLayout,这里有什么玄机那,其实这里就是为了
方便上面那两行神奇的代码起作用,这样我们就能设置RelativeLayout相对于FrameLayout的内边距为状态栏的高度了
也就完美的达到了沉浸式状态栏的目的,而且保证导航栏的相对位置不变。
这里存在一个common_back作为一个基准来控制高度达到状态栏的高度,如果一个activity只有一个背景图片或者不以类似导航栏的空间作为基准的话,怎么实现沉浸式状态栏,例如达到这种状态
我们只需要在代码这样设置
然后在当前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的大神请放过
沉浸模式的状态栏和主界面完全融为了一体,在设计上有不同的视觉感受。
我们先上两张图,很容易看出区别:
Android在4.4的时候增加了透明状态栏与导航栏的功能,依托于这个新特性,我们可以开始跟随潮流,实现Android的沉浸式状态栏
其实上图展示的这个关于界面的代码非常简单
/** * 关于界面 * * @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中实现的
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方法
/** * 用于获取状态栏的高度。 使用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
<include android:id="@+id/common_back" layout="@layout/common_back" />
common_back的布局如下:
<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只有一个背景图片或者不以类似导航栏的空间作为基准的话,怎么实现沉浸式状态栏,例如达到这种状态
我们只需要在代码这样设置
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的大神请放过
相关文章推荐
- android四个组件知识总结
- android 杂记2:单位 屏幕适配
- 记录学习MVP in Android
- Android自定义XY(对角线)动画
- Android ORMLite 框架初步学习
- android开发之merge结合include优化布局
- android开发之merge结合include优化布局
- android开发之merge结合include优化布局
- android开发之merge结合include优化布局
- Android 多线程下载 仿下载助手
- 我的Android进阶之旅------>Android无第三方Jar包的源代报错:The current class path entry belongs to container ...的解决方法
- 设置android屏幕全屏
- android开发布局优化之ViewStub
- android开发布局优化之ViewStub
- android开发布局优化之ViewStub
- android开发布局优化之ViewStub
- Android平台使用GDBServer 调试Native C代码
- android相关目录的存取方式与函数解析---全
- 深入理解Android的startservice和bindservice
- android 的权限小记