教程分享:如何實(shí)現(xiàn)Android沉浸式狀態(tài)欄——教你讓你的狀態(tài)欄變個(gè)色幻碱!

一贼穆、概述

近期注意到QQ新版使用了沉浸式狀態(tài)欄,ok坯临,先聲明一下:本篇博客效果下圖:

關(guān)于這個(gè)狀態(tài)欄變色到底叫「Immersive Mode」/「Translucent Bars」有興趣可以去了解下。

恩恋昼,接下來正題看靠。

首先只有大于等于4.4版本支持這個(gè)半透明狀態(tài)欄的效果,但是4.4和5.0的顯示效果有一定的差異液肌,所有本篇博文內(nèi)容為:

如何實(shí)現(xiàn)半透明狀態(tài)欄效果在大于4.4版本之上挟炬。

如何讓4.4的效果與5.0的效果盡可能一致。

看了不少參考文章嗦哆,都介紹到這個(gè)庫(kù)谤祖,大家可以了解:SystemBarTint。

不過本篇博文并未基于此庫(kù)老速,自己想了個(gè)hack粥喜,對(duì)于此庫(kù)源碼有空再看了。

二橘券、效果圖

先貼下效果圖额湘,以便和實(shí)現(xiàn)過程中做下對(duì)比

4.4 模擬器

5.x 真機(jī)

ok卿吐,有了效果圖之后就開始看實(shí)現(xiàn)了。

三锋华、實(shí)現(xiàn)半透明狀態(tài)欄

因?yàn)楸纠褂昧薔avigationView嗡官,所以布局代碼稍多,當(dāng)然如果你不需要毯焕,可以自己進(jìn)行篩減衍腥。

注意引入相關(guān)依賴:

Java代碼

compile'com.android.support:appcompat-v7:22.2.1'

compile'com.android.support:support-v4:22.2.1'

compile'com.android.support:design:22.2.0'

(一)colors.xml 和 styles.xml

首先我們定義幾個(gè)顏色:

res/values/color.xml

XML/HTML代碼

#FF03A9F4

#FF0288D1

@color/primary_dark

下面定義幾個(gè)styles.xml

注意文件夾的路徑:

values/styles.xml

XML/HTML代碼

@color/primary

@color/primary_dark

#FF4081

values-v19

XML/HTML代碼

true

ok,這個(gè)沒撒說的纳猫。注意我們的主題是基于NoActionBar的婆咸,android:windowTranslucentStatus這個(gè)屬性是v19開始引入的。

(二)布局文件

activity_main.xml

XML/HTML代碼

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

>

android:id="@+id/id_main_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/id_toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="?attr/colorPrimary"

android:fitsSystemWindows="true"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

android:id="@+id/id_tv_content"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

android:gravity="center"

android:text="HelloWorld"

android:textSize="30sp"/>

android:id="@+id/id_nv_menu"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="start"

android:fitsSystemWindows="true"

app:headerLayout="@layout/header_just_username"

app:menu="@menu/menu_drawer"

/>

DrawerLayout內(nèi)部一個(gè)LinearLayout作為內(nèi)容區(qū)域续担,一個(gè)NavigationView作為菜單擅耽。

注意下Toolbar的高度設(shè)置為wrap_content。

然后我們的NavigationView中又依賴一個(gè)布局文件和一個(gè)menu的文件物遇。

header_just_username.xml

XML/HTML代碼

android:layout_width="match_parent"

android:layout_height="192dp"

android:background="?attr/colorPrimaryDark"

android:orientation="vertical"

android:padding="16dp"

android:fitsSystemWindows="true"

android:theme="@style/ThemeOverlay.AppCompat.Dark">

android:id="@+id/id_link"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_marginBottom="16dp"

android:text="http://blog.csdn.net/lmj623565791"/>

android:id="@+id/id_username"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_above="@id/id_link"

android:text="Zhang?Hongyang"/>

android:layout_width="72dp"

android:layout_height="72dp"

android:layout_above="@id/id_username"

android:layout_marginBottom="16dp"

android:src="@mipmap/ic_launcher"/>

menu的文件就不貼了乖仇,更加詳細(xì)的可以去參考Android 自己實(shí)現(xiàn) NavigationView [Design Support Library(1)]。

大體看完布局文件以后询兴,有幾個(gè)點(diǎn)要特別注意:

??ToolBar高度設(shè)置為wrap_content

??ToolBar添加屬性android:fitsSystemWindows="true"

??header_just_username.xml的跟布局RelativeLayout乃沙,添加屬性android:fitsSystemWindows="true"

android:fitsSystemWindows這個(gè)屬性,主要是通過調(diào)整當(dāng)前設(shè)置這個(gè)屬性的view的padding去為我們的status_bar留下空間诗舰。

根據(jù)上面的解釋警儒,如果你不寫,那么狀態(tài)欄和Toolbar就會(huì)有擠一塊的感覺了眶根,類似會(huì)這樣:

ok蜀铲,最后看下代碼。

(三)Activity的代碼

Java代碼

package?com.zhy.colorfulstatusbar;

import?android.os.Bundle;

import?android.support.v7.app.AppCompatActivity;

import?android.support.v7.widget.Toolbar;

publicclass?MainActivityextends?AppCompatActivity

{

@Override

protectedvoid?onCreate(Bundle?savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar?toolbar?=?(Toolbar)?findViewById(R.id.id_toolbar);

setSupportActionBar(toolbar);

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

//StatusBarCompat.compat(this);

}

}

沒撒說的属百,就是setSupportActionBar记劝。

那么現(xiàn)在4.4的效果圖是:

其實(shí)還不錯(cuò),有個(gè)漸變的效果族扰。

現(xiàn)在5.x的效果:

可以看到5.x默認(rèn)并非是一個(gè)漸變的效果厌丑,類似是一個(gè)深一點(diǎn)的顏色。

再看看我們md的規(guī)范

狀態(tài)欄應(yīng)該是一個(gè)比Toolbar背景色渔呵,稍微深一點(diǎn)的顏色怒竿。

這么看來,我們還是有必要去為4.4做點(diǎn)適配工作扩氢,讓其竟可能和5.x顯示效果一致耕驰,或者說盡可能符合md的規(guī)范。

四录豺、調(diào)整4.4的顯示方案

那么問題來了耍属?如何做呢托嚣?

咱們這么看,4.4之后加入windowTranslucentStatus的屬性之后厚骗,也就是我們可以用到狀態(tài)欄的區(qū)域了示启。

既然我們可以用到這塊區(qū)域,那么我們只要在根布局去設(shè)置一個(gè)與狀態(tài)欄等高的View领舰,設(shè)置背景色為我們期望的顏色就可以了夫嗓。

于是有了以下的代碼:

Java代碼

package?com.zhy.colorfulstatusbar;

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;

/**

*?Created?by?zhy?on?15/9/21.

*/

publicclass?StatusBarCompat

{

privatestaticfinalint?INVALID_VAL?=?-1;

privatestaticfinalint?COLOR_DEFAULT?=?Color.parseColor("#20000000");

@TargetApi(Build.VERSION_CODES.LOLLIPOP)

publicstaticvoid?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);

}

}

publicstaticvoid?compat(Activity?activity)

{

compat(activity,?INVALID_VAL);

}

publicstaticint?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;

}

}

代碼的思路很簡(jiǎn)單,根據(jù)Activity找到android.R.content冲秽,在其中添加一個(gè)View(高度為statusbarHeight舍咖,背景色為我們?cè)O(shè)置的顏色,默認(rèn)為半透明的黑色)锉桑。

那么只需要在Activity里面去寫上:

Java代碼

StatusBarCompat.compat(this);

就可以了排霉。

如果你希望自己設(shè)置狀態(tài)看顏色,那么就用這個(gè)方法:

Java代碼

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

這樣的話我們就解決了4.4到5.x的適配問題民轴,一行代碼解決攻柠,感覺還是不錯(cuò)的。

最后提一下后裸,對(duì)于5.0由于提供了setStatusBarColor去設(shè)置狀態(tài)欄顏色瑰钮,但是這個(gè)方法不能在主題中設(shè)置windowTranslucentStatus屬性。所以微驶,可以編寫一個(gè)value-v21文件夾浪谴,里面styles.xml寫入:

XML/HTML代碼

其實(shí)就是不要有windowTranslucentStatus屬性。

接下來因苹,對(duì)于默認(rèn)的效果就不測(cè)試了苟耻,參考上面的效果圖。

我們測(cè)試個(gè)設(shè)置狀態(tài)欄顏色的扶檐,我們這里設(shè)置個(gè)紅色凶杖。

4.4 模擬器

5.x 真機(jī)

ok,這樣就結(jié)束啦~~

友情推薦:

《愛加密》Android apk加密保護(hù)視頻教程剪輯:http://www.ijiami.cn/Video?v=3

源碼地址:https://github.com/hongyangAndroid/ColorfulStatusBar

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蘸秘,一起剝皮案震驚了整個(gè)濱河市官卡,隨后出現(xiàn)的幾起案子蝗茁,更是在濱河造成了極大的恐慌醋虏,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,126評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件哮翘,死亡現(xiàn)場(chǎng)離奇詭異颈嚼,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)阻课,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來抹恳,“玉大人署驻,你說我怎么就攤上這事∑柯欤” “怎么了宣吱?”我有些...
    開封第一講書人閱讀 152,445評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵窃这,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我征候,道長(zhǎng)杭攻,這世上最難降的妖魔是什么倍奢? 我笑而不...
    開封第一講書人閱讀 55,185評(píng)論 1 278
  • 正文 為了忘掉前任朴上,我火速辦了婚禮,結(jié)果婚禮上卒煞,老公的妹妹穿的比我還像新娘痪宰。我一直安慰自己畔裕,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評(píng)論 5 371
  • 文/花漫 我一把揭開白布具练。 她就那樣靜靜地躺著扛点,像睡著了一般岂丘。 火紅的嫁衣襯著肌膚如雪奥帘。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 48,970評(píng)論 1 284
  • 那天扔茅,我揣著相機(jī)與錄音秸苗,去河邊找鬼惊楼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛店读,可吹牛的內(nèi)容都是我干的屯断。 我是一名探鬼主播侣诺,決...
    沈念sama閱讀 38,276評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼趴久,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼搔确!你這毒婦竟也來了膳算?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,927評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤华匾,失蹤者是張志新(化名)和其女友劉穎蜘拉,沒想到半個(gè)月后旭旭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體印颤,經(jīng)...
    沈念sama閱讀 43,400評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡年局,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評(píng)論 2 323
  • 正文 我和宋清朗相戀三年矢否,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赖欣。...
    茶點(diǎn)故事閱讀 37,997評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡顶吮,死狀恐怖悴了,靈堂內(nèi)的尸體忽然破棺而出湃交,到底是詐尸還是另有隱情藤巢,我是刑警寧澤,帶...
    沈念sama閱讀 33,646評(píng)論 4 322
  • 正文 年R本政府宣布才沧,位于F島的核電站糜工,受9級(jí)特大地震影響捌木,放射性物質(zhì)發(fā)生泄漏嫉戚。R本人自食惡果不足惜彬檀,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評(píng)論 3 307
  • 文/蒙蒙 一窍帝、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧疯坤,春花似錦压怠、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)刊懈。三九已至娃闲,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間卷哩,已是汗流浹背将谊。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評(píng)論 1 260
  • 我被黑心中介騙來泰國(guó)打工尊浓, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留纯衍,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,423評(píng)論 2 352
  • 正文 我出身青樓瓦堵,卻偏偏與公主長(zhǎng)得像菇用,于是被迫代替她去往敵國(guó)和親惋鸥。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容