preface

According to PM’s requirements, the jump of the App home page is too simple, and several new page UI needs to be redesigned. The sister soon made several plans and handed them to me and IOS. Then the helpless and painful days came again, rushing codes, fixing bugs, working overtime, and tags gathered in my mind.

Attached renderings:

Well, without teasing, let’s take a look at the requirements:

Artist’s renderings:

Self-completed renderings:

In addition to the status bar color, other functions are basically realized. Checked some data also solved this problem here to share with you:

Encapsulate the utility class StatusBarUtils

Public class StatusBarUtils {/** * change the status bar to fully transparent ** @param Activity */ @targetAPI (19) public static void transparencyBar(Activity activity) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Window window = activity.getWindow(); window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); window.setStatusBarColor(Color.TRANSPARENT); } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { Window window = activity.getWindow(); window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);  }} /** * Change the status bar color, * * @param activity * @param colorId */ public static void setStatusBarColor(activity activity, int colorId) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Window window = activity.getWindow(); // window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); window.setStatusBarColor(activity.getResources().getColor(colorId)); } //} else if (build.version.sdk_int >= build.version_codes.kitkat) {// // use the SystemBarTint library to discolor the status bar of VERSION 4.4, You need to set the status bar to transparent // transparencyBar(Activity); // SystemBarTintManager tintManager = new SystemBarTintManager(activity); // tintManager.setStatusBarTintEnabled(true); // tintManager.setStatusBarTintResource(colorId); }} /** * Status bar light mode, set the status bar black text, icon, @param Activity * @return 1:MIUUI 2:Flyme 3: Android6.0 */ public static int  StatusBarLightMode(Activity activity) { int result = 0; if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { if (MIUISetStatusBarLightMode(activity, true)) { result = 1; } else if (FlymeSetStatusBarLightMode(activity.getWindow(), true)) { result = 2; } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { activity.getWindow().getDecorView().setSystemUiVisibility (View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR); result = 3; } } return result; } /** * If the system type is known, set the black text and icon in the status bar. Android * * @param Activity * @param Type 1:MIUUI 2:Flyme 3: Android6.0 */ public static void StatusBarLightMode(Activity activity, int type) { if (type == 1) { MIUISetStatusBarLightMode(activity, true); } else if (type == 2) { FlymeSetStatusBarLightMode(activity.getWindow(), true); } else if (type == 3) { activity.getWindow().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN  | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR); }} /** * Status bar dark mode, */ public static void StatusBarDarkMode(Activity Activity, int type) { if (type == 1) { MIUISetStatusBarLightMode(activity, false); } else if (type == 2) { FlymeSetStatusBarLightMode(activity.getWindow(), false); } else if (type == 3) { activity.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE); } /** * Set the status bar icon to dark color and Meizu specific text style * can be used to determine whether the Flyme user ** @param window needs to be set * @param dark whether the status bar text and icon color is set to dark * @return Boolean returns true on success * / public static Boolean FlymeSetStatusBarLightMode (Window Window, boolean dark) { boolean result = false; if (window ! = null) { try { WindowManager.LayoutParams lp = window.getAttributes(); Field darkFlag = WindowManager.LayoutParams.class .getDeclaredField("MEIZU_FLAG_DARK_STATUS_BAR_ICON"); Field meizuFlags = WindowManager.LayoutParams.class .getDeclaredField("meizuFlags"); darkFlag.setAccessible(true); meizuFlags.setAccessible(true); int bit = darkFlag.getInt(null); int value = meizuFlags.getInt(lp); if (dark) { value |= bit; } else { value &= ~bit; } meizuFlags.setInt(lp, value); window.setAttributes(lp); result = true; } catch (Exception e) { } } return result; } @param activity @param dark Specifies whether to set the status bar text and icon color to dark. @return Boolean Returns true */ public static boolean MIUISetStatusBarLightMode(Activity activity, boolean dark) { boolean result = false; Window window = activity.getWindow(); if (window ! = null) { Class clazz = window.getClass(); try { int darkModeFlag = 0; Class layoutParams = Class.forName("android.view.MiuiWindowManager$LayoutParams"); Field field = layoutParams.getField("EXTRA_FLAG_STATUS_BAR_DARK_MODE"); darkModeFlag = field.getInt(layoutParams); Method extraFlagField = clazz.getMethod("setExtraFlags", int.class, int.class); if (dark) { extraFlagField.invoke(window, darkModeFlag, darkModeFlag); } else {extraflagfield. invoke(window, 0, darkModeFlag); } result = true; If (build.version.sdk_int >= build.version_codes.m) {// If (build.version.sdk_int >= build.version_codes.m) {// If (build.version.sdk_int >= build.version_codes.m) { So add if (dark) {activity.getwindow ().getDecorView().setSystemUIvisibility (view.system_UI_flag_layout_fullscreen | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR); } else { activity.getWindow().getDecorView() .setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE); } } } catch (Exception e) { } } return result; }}Copy the code

The second step

Set the statusBar to the onCreate() method of the Activity and the onActivityCreate() method of the Fragment during view initialization

@Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_popularity_list); initStatusBar(); // Initialize the status bar mUnbinder = butterknife. bind(this); . }Copy the code

The third step

SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN: The Activity is displayed in full screen, but the status bar is not covered by hiding. * 2. SYSTEM_UI_FLAG_LIGHT_STATUS_BAR: sets the status bar icon to black or white * 3. StatusBarUtil: changes the status bar to white. */ private void initStatusBar() { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR); StatusBarUtils.setStatusBarColor(PopularityListActivity.this, R.color.colorWhite); }}Copy the code

Git git

Utility class comments are clear and self-explanatory. Perfect solution, call it a day!! ~

Share with you

I want to work my way up

Fly forward on the blades at the highest point

Let the wind blow dry tears and sweat

I want to work my way up

Waiting for the sun to watch its face

Little days have big dreams

I have my day

Let the wind blow dry tears and sweat

One day I will have my day