1. 程式人生 > >最全!Android 開發狀態列配色詳解

最全!Android 開發狀態列配色詳解

感覺 Android 狀態列一直是一個坑啊!! 並且國內不同 Android 的手機廠商也對狀態列做了不同的適配和修改。在此記錄以下實現不同效果的狀態列的方法

Android 4.4 之前,Android 的狀態列是黑色背景,無法修改。 Android 4.4 推出了透明狀態列的效果。 Android 5.0 提供了方法可以直接修改狀態列的顏色。

目錄:

  1. 隱藏 ActionBar
  2. 隱藏狀態列
  3. 半透明效果的狀態列(5.0 是半透明,4.4 是漸變)
  4. 透明效果狀態列 (1) 狀態列與桌面背景顏色相同 (2)狀態列與 Toolbar 背景顏色相同

1. 隱藏 ActionBar

隱藏 ActionBar 的效果

  • 方法一 在 AndroidManifest.xml 中定義
<application android:theme="@android:style/Theme.NoTitleBar”> 

效果:整個專案的 Activity 都會隱藏 ActionBar

  • 方法二 在 setContentView() 之呼叫
requestWindowFeature(Window.FEATURE.NO_TITLE) 

這個方法在「第一行程式碼」中講到過,但是使用有一個前提:必須繼承自 Activity 才有效果

  • 方法三 在 setContentView() 之呼叫
getSupportActionBar().hide(); 

繼承自 AppCompatActivity 有效果

  • 方法四 重寫一個 style,在其中新增
<item name=“windowNoTitile”>true</item>

2. 隱藏狀態列

隱藏了狀態列和 ActionBar

  • 方法一
private void hideStatusBar(){
    View decorView = getWindow().getDocorView()
    int option = View.SYSTEM_UI_FLAG_FULLSCREEN; 
    decorView.setSystemUiVisibility(option);
}
  • 方法二 在 setvContentView() 之後
getWindow
().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
  • 方法三
android:theme=“@android:style/Theme.NoTitleBar.Fullscreen”

3. 半透明效果的狀態列

5.0 的半透明效果 4.0 的半透明效果

  • 方法一
<item name=“android.windowTranslucentStatus”>true</item> 
  • 方法二
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {                
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}

4. 透明效果狀態列

4.1 狀態列與 Activity 的背景顏色相同

5.0 狀態列與 Activity 的背景顏色相同

if(Build.VERSION.SDK_INT >= 21){
    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    |View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    getWindow().setStatusBarColor(Color.TRANSPARENT)
}

注意

<item name="android:windowTranslucentStatus">false</item>

android:windowTranslucentStatus 設定為 false 不然還是半透明的效果

有些廠商的系統就算設定成半透明效果,還是會直接顯示成透明效果

4.2 狀態列與 Toolbar 顏色相同

5.0 狀態列與 Toolbar 顏色相同 Toolbar 的 xml 程式碼

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    android:id="@+id/mytoolbar"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:clipToPadding="true"
    android:minHeight="?attr/actionBarSize"
    android:paddingTop="@dimen/toolbar_padding_top"
    android:background="@color/colorToolbarBack">
</android.support.v7.widget.Toolbar>

注意: toolbar_padding_top 在 values-v19 下設定為 25dp,在 values-v21 下設定為 0dp android:fitSystemWindow=“true” 在 5.0 系統下避免 Toolbar 整體上移到狀態列的位置

在這裡補充一下 v19 和 v21的相關知識 v19 指 values-v19,是對應api19+手機型號在此呼叫。 v21 指 values-v21,是對應api21+手機型號在此呼叫。 values 對應 values-v19 和 values-v21 中沒有對應的屬性時預設在此呼叫。 要建立 values-v19 ,values-v21 需要在切換到 Project 檢視下手動建立資料夾,如圖: 手動建立 values-v19 ,values-v21 資料夾

這裡做是將 Toolbar 都背景延伸到了狀態列,Android 5.0 提供了新的方法,可以直接修改狀態列的顏色 在 v21 的 styles 檔案下新增

<item name="android:statusBarColor">#a6ae51</item>

5.0 自定義狀態列顏色

那麼 4.4 版本的怎麼實現這種效果呢?

很遺憾,4.4 目前只能做到漸變層的效果 但是根據這篇文章提供的方法,可以自定義 4.4 的狀態列顏色,儘量與 5.0 做到效果一致 左 5.0 右 4.4

package com.example.binguner.test;

import android.annotation.TargetApi;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Build;
import android.view.View;
import android.view.ViewGroup;

public class StatusBarCompat {

    private static final int INVALID_VAL = -1;
    private static final int COLOR_DEFAULT = Color.parseColor("#20000000");

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public static void compat(Activity activity, int statusColor)
    {

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
        {
            if (statusColor != INVALID_VAL)
            {
                activity.getWindow().setStatusBarColor(statusColor);
            }
            return;
        }

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP)
        {
            int color = COLOR_DEFAULT;
            ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);
            if (statusColor != INVALID_VAL)
            {
                color = statusColor;
            }
            View statusBarView = new View(activity);
            ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    getStatusBarHeight(activity));
            statusBarView.setBackgroundColor(color);
            contentView.addView(statusBarView, lp);
        }

    }

    public static void compat(Activity activity)
    {
        compat(activity, INVALID_VAL);
    }


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

使用時,注意

<item name="android:windowTranslucentStatus">true</item>

android:windowTranslucentStatus 設定為 true, 否則自定義的狀態列無法覆蓋到頂部 再在 MainActivity 中

StatusBarCompat.compat(this);

或者想自定義狀態列的顏色

StatusBarCompat.compat(this, getResources().getColor(R.color.status_bar_color));

有什麼問題或者補充的話歡迎各位留言 ?

歡迎關注我的公眾號,聚焦於前沿的 Android 開發技術。

歡迎關注我的公眾號