[Android] about the system toolbar and full screen immersion mode, android immersion

Source: Internet
Author: User

[Android] about the system toolbar and full screen immersion mode, android immersion

 

I have written several related articles about System Bars:

[Android] Get the height of the Status Bar and Navigation Bar at the top of the system
[Android] Status Bar
[Android] locking the screen

These three articles are written in order. They are originally only project applications and do not need to be further investigated. It is good to find and use the methods. With some in-depth design of the application, you always want a better interface and experience. Therefore, some things cannot just end with knowing the method, but you have to study it in depth. Through this process, I think that at the application level, it is very easy to implement a function, but if you want to achieve it well, you need to understand the designer's design ideas and the methods provided. The most direct way to understand the idea of a designer is to view the document. Of course, after reading the documentation, You can further look at how the Android source code is implemented, that is, entering the Framework layer from the Application layer. After you are familiar with the Framework, you can use the knowledge of the Linux kernel to understand the implementation of the Android underlying layer. Well, put attention to the application layer first. After all, this is the simplest.

System Bars includes three Bars:

  • Status bar, that is, a bar at the top that displays time, power, notifications, and other information.
  • Navigation Bar, which contains the back key, home key, and recent key at the bottom
  • Action bar. You can add bar such as search and menu at the top of the program.

The operation on the System Bar is to get the height, status, and set the display/hide status. The first two have been written before. This time, we will write the details of the hidden bar.

 

Address: http://www.cnblogs.com/rossoneri/p/4418770.html

 

Remove system Toolbar

Fade (dim-do not know this translation is not appropriate) the toolbar effect is that the icons on the status bar and navigation bar are converted into a light gray dot. This means that the focus of the user can be focused on the content to be displayed in the program, so as to avoid distracting the user from too many things on the screen.

It may not make much sense to say so, but in fact, the user experience is accumulated in a little detail from various aspects. Sometimes, when comparing several apps, a user will obviously like which one doesn't like which one, but will not list the specific gaps. Most of the reasons are as follows. In addition, since this function has the meaning of its existence, you can understand how it is implemented.

Note that this method is only applicable to version 4.0 and later. When used, the size of the application content will not change, but the icons on the two bar will fade. Once you touch the bar area, all the icons will appear and will not disappear.

The method is simple. Set system flag to SYSTEM_UI_FLAG_LOW_PROFILE.

getActivity().getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE);

Note that the flag will be cleared once the bar is touched, so the icon will not fade after the touch ends. If you need to continue to implement the desalination effect, you can use View. OnSystemUiVisibilityChangeListener to listen for status changes and then process them.

If you want to actively clear the current system ui flag by using the code in some cases, you can use:

getActivity().getWindow().getDecorView().setSystemUiVisibility(0);

After reading the previous article, you can know that 0 represents the default status, that is, the flag displayed for bar normally, that is:

public static final int SYSTEM_UI_FLAG_VISIBLE = 0;

 

Hide Status Bar

In fact, there are not a lot of desalination uses, but there are a lot of hidden Status Bar. Because it can release more display space and provide a better user experience.

The following two figures show that hiding the status bar makes the program more intuitive and concise, and looks more comfortable.

 

Note: The picture on the left contains the action bar. If you do not display the status bar, you should also hide the action bar. This is a suggestion in the design field.

Setting method:

  • 4.1 and later versions:
  • You can use the setSystemUiVisibility () mentioned above to set the UI flags at the individual view level. These flags take effect in the window.

    View decorView = getWindow().getDecorView();// Hide the status bar.int uiOptions = View.SYSTEM_UI_FLAG_FULLSCREEN;decorView.setSystemUiVisibility(uiOptions);// Remember that you should never show the action bar if the// status bar is hidden, so hide that too if necessary.ActionBar actionBar = getActionBar();actionBar.hide();

     

    Note:

    • Once the configured flag is cleared, the application needs to reset the flag to hide the bar. Add listener for processing.
    • The Code for flag setting has different effects in different places. For example, if you set a hidden flag in the onCreate () method of the activity, press the Home key, and the status bar will be displayed again, and then open the application. The status bar will remain displayed. If you need to hide it, you need to set it in the onResume () or onWindowFocusChanged () method.
    • The setSystemUiVisibility () method is valid only when it is set in the visible view. For example, setting View. gone does not work.
    • Switching the view will clear the flag of the current view

     

    Display the program content behind the Status Bar

    This problem has been encountered in previous articles and has plagued me for a long time. Later I discovered that the program can be displayed behind the status bar, the advantage is that the content size of the program does not change with the display and hiding of the status bar.

    To achieve this effect, you only need to set SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN, and use SYSTEM_UI_FLAG_LAYOUT_STABLE to ensure that the size remains unchanged.

    When you use this approach, it becomes your responsibility to ensure that critical parts of your app's UI (for example, the built-in controls in a Maps application) don't end up getting covered by system bars. this cocould make your app unusable. in most cases you can handle this by adding the android: fitsSystemWindows attribute to your XML layout file, set to true. this adjusts the padding of the parent ViewGroup to leave space for the system windows. this is sufficient for most applications. in some cases, however, you may need to modify the default padding to get the desired layout for your app. to directly manipulate how your content lays out relative to the system bars (which occupy a space known as the window's "content insets"), override fitSystemWindows (Rect insets ). the fitSystemWindows () method is called by the view hierarchy when the content insets for a window have changed, to allow the window to adjust its content accordingly. by overriding this method you can handle the insets (and hence your app's layout) however you want.It's good to know about it.

     

    Hide Navigation Bar

    As a design suggestion, you should also hide the status bar while hiding the navigation bar (of course, you must also hide the action bar when hiding the status bar ), of course, the screen space can be hidden or kept reachable at any time, so as to provide a better user experience.

    Use SYSTEM_UI_FLAG_HIDE_NAVIGATION in version 4.0 and later to hide both the status bar and navigation bar.

    View decorView = getWindow().getDecorView();// Hide both the navigation bar and the status bar.// SYSTEM_UI_FLAG_FULLSCREEN is only available on Android 4.1 and higher, but as a general rule, you should design your app to hide the status bar whenever you hide the navigation bar.int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION              | View.SYSTEM_UI_FLAG_FULLSCREEN;decorView.setSystemUiVisibility(uiOptions);

    For more information, see hide status bar.

    Of course, since the program content can be displayed behind the status bar, you can set the same effect on the Navigation bar. Use SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION and SYSTEM_UI_FLAG_LAYOUT_STABLE.

     

    Full Screen immersion Mode

    This is the newly added mode in version 4.4. Set the flag to SYSTEM_UI_FLAG_IMMERSIVE and SYSTEM_UI_FLAG_IMMERSIVE_STICKY. Often used with SYSTEM_UI_FLAG_HIDE_NAVIGATION and SYSTEM_UI_FLAG_FULLSCREEN.

    (Supplement: FLAG_IMMERSIVE must be used with FLAG_HIDE_NAVIGATION and FLAG_FULLSCREEN. The former uses the hidden bar and the latter uses the hidden bar)

    The effect of this mode is to hide the upper and lower bars, and click events within the bar range will not be called out, which provides great convenience for program operations. You will ask, what should I do if I want to use the bar function since the click event will not call the bar? This is also very simple. Place your finger in the bar area. If it is in the status bar area, the finger slides down, and vice versa, it slides up, so that the two bars can be pulled out. This operation is actually to clear SYSTEM_UI_FLAG_HIDE_NAVIGATION and SYSTEM_UI_FLAG_FULLSCREEN, so it will be visible, and the corresponding Listener will be triggered.

    As mentioned above, there are two types of IMMERSIVE and IMMERSIVE_STICKY. The former is to call the bar and it will not disappear. The latter is to call the bar and then disappear in a few seconds. The latter does not trigger the Listener.

    In addition, setting FULLSCREEN will make the background translucent when the status bar is displayed. In normal conditions, the background of the status bar is black. See:

    Figure 1: normal. Figure 2: a prompt is displayed when you enter immersive full-screen mode for the first time.

     

    Selection of IMMERSIVE and IMMERSIVE_STICKY:

    • We recommend that you use the IMMERSIVE logo in combination with SYSTEM_UI_FLAG_FULLSCREEN and SYSTEM_UI_FLAG_HIDE_NAVIGATION for reading books, magazines, or news software. This is because you may frequently need UI buttons and do not want to be disturbed when browsing the content.
    • If you want the user to experience the immersive mode, use the STICKY flag.
    • If there is little user interaction like a video player, don't use IMMERSIVE. The previously written content can meet your needs.

      

    When IMMERSIVE labels are used, hidden bars are always displayed. Therefore, you need to set some labels to keep the size of the software content unchanged, such as SYSTEM_UI_FLAG_HIDE_NAVIGATION and SYSTEM_UI_FLAG_LAYOUT_STABLE. Also, you must pay attention to the hiding action.

    // This snippet hides the system bars.private void hideSystemUI() {    // Set the IMMERSIVE flag.    // Set the content to appear under the system bars so that the content    // doesn't resize when the system bars hide and show.    mDecorView.setSystemUiVisibility(            View.SYSTEM_UI_FLAG_LAYOUT_STABLE            | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN            | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // hide nav bar            | View.SYSTEM_UI_FLAG_FULLSCREEN // hide status bar            | View.SYSTEM_UI_FLAG_IMMERSIVE);}// This snippet shows the system bars. It does this by removing all the flags// except for the ones that make the content appear under the system bars.private void showSystemUI() {    mDecorView.setSystemUiVisibility(            View.SYSTEM_UI_FLAG_LAYOUT_STABLE            | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);}

    The following figure shows how to set IMMERSIVE_STICKY when the program window receives the focus. In fact, you can combine the methods mentioned above to achieve good results.

    @Overridepublic void onWindowFocusChanged(boolean hasFocus) {        super.onWindowFocusChanged(hasFocus);    if (hasFocus) {        decorView.setSystemUiVisibility(                View.SYSTEM_UI_FLAG_LAYOUT_STABLE                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN                | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION                | View.SYSTEM_UI_FLAG_FULLSCREEN                | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);}}

     

    Response to system toolbar changes

    Register a View. OnSystemUiVisibilityChangeListener to synchronize the interface changes. You can add the following code in the onCreate () method:

    View decorView = getWindow().getDecorView();decorView.setOnSystemUiVisibilityChangeListener        (new View.OnSystemUiVisibilityChangeListener() {    @Override    public void onSystemUiVisibilityChange(int visibility) {        // Note that system bars will only be "visible" if none of the        // LOW_PROFILE, HIDE_NAVIGATION, or FULLSCREEN flags are set.        if ((visibility & View.SYSTEM_UI_FLAG_FULLSCREEN) == 0) {            // TODO: The system bars are visible. Make any desired            // adjustments to your UI, such as showing the action bar or            // other navigational controls.        } else {            // TODO: The system bars are NOT visible. Make any desired            // adjustments to your UI, such as hiding the action bar or            // other navigational controls.        }    }});

     

    The above may be an error of understanding or an error I have not found in the test. If you have read the error, please leave feedback. Thank you.

     

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.