【Android实战】沉浸式状态栏实现（上）

article/2025/8/24 3:55:53

传统的手机状态栏是呈现出黑色条状的，有的和手机主界面有很明显的区别。这样就在一定程度上牺牲了视觉宽度，界面面积变小。

沉浸模式的状态栏和主界面完全融为了一体，在设计上有不同的视觉感受。

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

Android在4.4的时候增加了透明状态栏与导航栏的功能，依托于这个新特性，我们可以开始跟随潮流，实现Android的沉浸式状态栏

其实上图展示的这个关于界面的代码非常简单

/*** 关于界面** @author SuS* @time 2015.07.29*/
public class AboutActivity extends BaseActivity {@Overrideprotected 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);}@Overrideprotected void onResume() {super.onResume();}@Overrideprotected void onPause() {super.onPause();}@Overrideprotected 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() {@Overridepublic 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

 <includeandroid: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" ><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="51dp" ><ImageViewandroid: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" /><TextViewandroid: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" /><ImageViewandroid: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" /><ImageViewandroid: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的整个大背景融合在一起了