Android immersive status bar implementation, android immersive status bar implementation

Android immersive status bar implementation, android immersive status bar implementation
The traditional mobile phone status bar is black, and some are quite different from the mobile phone's main interface. In this way, the visual width is sacrificed to a certain extent, and the interface area is reduced.
The status bar and the main interface of the immersive mode are completely integrated and have different visual feelings in the design.

Let's look at the two pictures first, and we can easily see the difference:

In Android 4.4, the transparent status bar and navigation bar feature were added. Thanks to this new feature, we can start to follow the trend, the interface code for implementing the immersive Status Bar of Android is actually very simple.

/*** Interface ** @ 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 ();}}

Note that the setImmerseLayout () method is implemented in 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);    }}

Use window. setFlags (WindowManager. LayoutParams. FLAG_TRANSLUCENT_STATUS, WindowManager. LayoutParams. FLAG_TRANSLUCENT_STATUS); or window. addFlags (WindowManager. LayoutParams. FLAG_TRANSLUCENT_STATUS );
Can make the status bar transparent, but the key is the following two lines of code, if there is no such two lines, it will be like this
So what are the principles of these two lines of magic code? Let's take a look at the getStatusBarHeight method in ScreenUtil.

/*** Gets the height of the status bar. Use the Resource object (this method is recommended) ** @ return returns the pixel value of the status bar height. */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 ;}

Here we get the height of the status bar, and then we can set the padding attribute of common_back to view. setPadding (0, statusBarHeight, 0, 0) is used to achieve the ultimate effect. However, you need to pay attention to the details here. First, you should understand the meaning of padding: margin, let's take a look at the layout file of common_back. In activity_about.xml, we use the common_back referenced by include.

 <include        android:id="@+id/common_back"        layout="@layout/common_back" />

The common_back layout is as follows:

<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>

Here we use a layer of FrameLayout to wrap RelativeLayout. What is the xuanjicang here? In fact, it is used to facilitate the above two lines of magic code, in this way, we can set RelativeLayout to the height of the status bar relative to the FrameLayout padding, which perfectly achieves the immersive status bar and ensures that the relative position of the navigation bar remains unchanged.
Here there is a common_back as a benchmark to control the height to reach the height of the status bar. If an activity has only one background image or does not use a space similar to the navigation bar as the benchmark, how can we implement the immersive status bar, for example, when this status is reached, we only need to set it in the code.

   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);*/        }    }

Then add these two sentences to the layout file of the current activity: android: fitsSystemWindows = "true" android: clipToPadding = "true"
At this time, the background of the status bar is integrated with the overall background of the Activity.

Summary:

Based on the above method introduction, we can achieve the immersive experience of the status bar and navigation bar as well as the status bar and the page background.

In fact, we can also see some tips for code encapsulation: for example, let all our activities inherit BaseActivity, like

SetImmerseLayout (findViewById (R. id. common_back); initBackButton (); setTitleBar (R. string. durian_about); such operations save time and effort!
Welcome to brick and comment!
Today's blog is written here. Hurry up and go home, or it will be raining again!
Yesterday was too late, did not upload demo, now attach Demo https://github.com/feifei003603/ImmerseLayoutDemo.git

How does Android 5.0 extend the layout content to the status bar?

Supplement: This is just the first part of my work. There must be many shortcomings and many problems have not been taken into account. I think we can take it for reference. I think it is relatively low. Please let it go.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.