今天來寫一個類似于qq空間的那種沉浸式效果。先來看看qq空間的這種效果

我們看到，頭部局上拉的時候有個頭布局的透明是從0變化到1，當你下拉的時候，頭部局透明度又從1變化到0了。始終效果看起來還是不錯的，當然這種效果要配合透明狀態(tài)欄才好看。而且我們可以再很多應用各種會看到這種廣告遮住頭布局的方式。比如160的軟件。

看起來效果還是挺酷炫的?，F(xiàn)在我們就來講講他的實現(xiàn)方式吧。首先來看下demo實現(xiàn)的效果圖

居然說到了透明狀態(tài)欄，也說一下關(guān)于透明狀態(tài)欄和沉浸式狀態(tài)欄吧。我們首先說一下他的概念。

1.沉浸式全屏模式
隱藏status bar（狀態(tài)欄）使屏幕全屏，讓Activity接收所有的（整個屏幕的）觸摸事件。相當于就是隱藏狀態(tài)欄，讓手機瀏覽進入全屏模式


2.透明化系統(tǒng)狀態(tài)欄
透明化系統(tǒng)狀態(tài)欄，使得布局侵入系統(tǒng)欄的后面，必須啟用fitsSystemWindows屬性來調(diào)整布局才不至于被系統(tǒng)欄覆蓋。

透明狀態(tài)欄的意思是指布局從狀態(tài)欄開始。然后狀態(tài)欄的一些東西比如電量那些基本信息會覆蓋在布局上面。但透明狀態(tài)欄是android 4.4及以上版本才有這種效果，4.4以下是不支持透明狀態(tài)欄的。我們先看下不設(shè)置透明狀態(tài)欄的效果。

布局文件是這樣的

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
? ? android:orientation="vertical"
? ? android:layout_width="match_parent"
? ? android:layout_height="match_parent"
? ? android:background="@color/title_bg_color"
? ? >
? ? <TextView
? ? ? ? android:id="@+id/ll_tab_top_search_parent"
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="50dp"
? ? ? ? android:background="@color/colorPrimary"
? ? ? ? android:gravity="center"
? ? ? ? android:orientation="horizontal"
? ? ? ? android:paddingBottom="9dp"
? ? ? ? android:paddingTop="10dp"
? ?/>

</LinearLayout>

效果圖：

此時沒有設(shè)置狀態(tài)欄，當我們設(shè)置透明狀態(tài)欄的時候，會不一樣。來看下設(shè)置透明狀態(tài)欄的效果

設(shè)置透明狀態(tài)欄中的兩種方式

1.style文件中設(shè)置如下屬性

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

然后在manifiest文件設(shè)置activity的theme屬性中引用它，就可以了

2.代碼中設(shè)置

? //api大于19時設(shè)置才有效果

??if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
? ? ? ? ? ? getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
? ? ? ? ? ? ? ? ? ? | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
? ? ? ? ? ? getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

來解釋一下這幾種設(shè)置中的含義吧，大家參照一下下面的屬性對照。

setSystemUiVisibility這個方法參數(shù)表示的狀態(tài)比較多,具體如下：


? ? 1. View.SYSTEM_UI_FLAG_VISIBLE：顯示狀態(tài)欄，Activity不全屏顯示(恢復到有狀態(tài)的正常情況)。


? ? 2. View.INVISIBLE：隱藏狀態(tài)欄，同時Activity會伸展全屏顯示。


? ? 3. View.SYSTEM_UI_FLAG_FULLSCREEN：Activity全屏顯示，且狀態(tài)欄被隱藏覆蓋掉。


? ? 4. View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN：Activity全屏顯示，但狀態(tài)欄不會被隱藏覆蓋，狀態(tài)欄依然可見，Activity頂端布局部分會被狀態(tài)遮住。


? ? 5. View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION：效果同View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN


? ? 6. View.SYSTEM_UI_LAYOUT_FLAGS：效果同View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN


? ? 7. View.SYSTEM_UI_FLAG_HIDE_NAVIGATION：隱藏虛擬按鍵(導航欄)。有些手機會用虛擬按鍵來代替物理按鍵。


? ? 8. View.SYSTEM_UI_FLAG_LOW_PROFILE：狀態(tài)欄顯示處于低能顯示狀態(tài)(low profile模式)，狀態(tài)欄上一些圖標顯示會被隱藏。


* window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);


? Flag表明這個窗口負責繪制系統(tǒng)狀態(tài)欄標題欄的背景。如果設(shè)置,系統(tǒng)bar繪制成透明背景,在這個窗口相應的地方會填充{@link Window#getStatusBarColor()}和 ? ? ? {@link Window#getNavigationBarColor()}對應的顏色。

但是大家有沒有注意到，有時候布局內(nèi)容從狀態(tài)欄開始排布會很奇怪，比如內(nèi)容布局的東西會被狀態(tài)欄的信息覆蓋。此時你想要的效果可能只是讓狀態(tài)欄變個顏色。這時候我們就需要這個屬性了。將這個屬性設(shè)置在根布局。

?android:fitsSystemWindows="true"

這時候狀態(tài)欄的顏色就會跟隨主布局。而且內(nèi)容布局將不會從狀態(tài)欄開始排布，將會從狀態(tài)欄之下開始排布。我們看下效果。

這才是我們想要的效果。當然有的人會說我想自定義狀態(tài)顏色。當然可以。不過4.4系統(tǒng)沒有方法自定義狀態(tài)欄的顏色。5.1以上有方法可以設(shè)置狀態(tài)欄的顏色，等會我會說。不過有個很好的開源庫幫我們實現(xiàn)了。我們可以用它來自定義狀態(tài)欄的顏色。就是SystemBarTinManger。關(guān)于這個開源庫的使用方法也很簡單。只需要導包使用就行，使用它的前提要前提是先要設(shè)置透明狀態(tài)欄。有興趣的大家去網(wǎng)上看看使用方法就行了，很簡單的。接下來我們看下5.0之后設(shè)置狀態(tài)欄顏色的方法。

1.在Manifest文件中配置Activity的theme，設(shè)置狀態(tài)欄顏色，主題顏色等。

<style name="AppBaseTheme" parent="android:ThemeOverlay.Material.Dark.ActionBar"> ?

? ? ? ? <!-- 隱藏系統(tǒng)標題欄 --> ?
? ? ? ? <item name="android:windowNoTitle">true</item> ?
??
? ? ? ? <!-- Main theme colors --> ?
? ? ? ? <!-- App主題顏色（滑動陰影等） ? your app's branding color (for the app bar)--> ?
? ? ? ? <item name="android:colorPrimary">#FF6600</item> ?
??
? ? ? ? <!-- 狀態(tài)欄顏色 ? darker variant of colorPrimary (for status bar, contextual app bars) --> ?
? ? ? ? <item name="android:colorPrimaryDark">#e86053</item> ?
??
? ? ? ? <!-- 控件主題樣式（例如EditText，CheckBox，RadioButton等） ?theme UI controls like checkboxes and text fields --> ?
? ? ? ? <item name="android:colorAccent">#BFDF0F</item> ?
??
??
? ? ? ? <!-- 系統(tǒng)默認控件樣式 --> ?
? ? ? ? <!-- 點擊時顏色 --> ?
? ? ? ? <!--<item name="android:colorControlHighlight">#0000FF</item>--> ?
? ? ? ? <!-- 正常狀態(tài)下顏色 --> ?
? ? ? ? <!--<item name="android:colorControlNormal">#FF0000</item>--> ?
? ? ? ? <!-- 選中時顏色 --> ?
? ? ? ? <!--<item name="android:colorControlActivated">#00FF00</item>--> ?
??
? ? </style>?

然后在文件中設(shè)置相應顏色即可。?

2.下面是一個設(shè)置系統(tǒng)工具欄的比較通用的代碼：

if(VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) {

Windowwindow = getWindow();

//清除系統(tǒng)提供的默認保護色，After LOLLIPOP not translucent status bar

window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS

| WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

//設(shè)置系統(tǒng)UI的顯示方式

window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

| View.SYSTEM_UI_FLAG_LAYOUT_STABLE);

//添加屬性可以自定義設(shè)置系統(tǒng)工具欄顏色

window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

window.setStatusBarColor(color_status_bar);

window.setNavigationBarColor(color_navigation_bar);

}

其中g(shù)etWindow.setStatusBarColor()要5.0以上才有效果。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?好的，狀態(tài)欄的知識就先說到這里了。我們來看看今天demo的實現(xiàn)吧。

1.實現(xiàn)原理

? ?其實實現(xiàn)原理還是挺簡單的。我們用FrameLayout作為根布局，然后設(shè)置透明狀態(tài)欄，設(shè)置一個頭布局。用頭布局覆蓋內(nèi)容布局。接著在向下滑動或者向上滑動的時候，我們可以自行設(shè)置頭布局的透明度?？梢岳胹crollview的滑動監(jiān)聽來設(shè)置。這樣就可以看到頭部局若隱若現(xiàn)的效果啦。

布局文件：

<?xml version="1.0" encoding="utf-8"?>

封裝的幫助器類：

package com.example.administrator.mystatusbar;

import android.content.Context;

import android.graphics.Color;

import android.graphics.drawable.Drawable;

import android.os.Build;

import android.os.Bundle;

import android.util.Log;

import android.view.View;

import android.view.ViewGroup;

import android.view.ViewTreeObserver;

import java.lang.reflect.Field;

public class ImmersiveHelper {

private Context mContext;

private int mAlpha;

private View mStatusBar;

private View mContentView;

private ObservableScrollView mScrollView;

private int mStatusHeight;

private int mTotalHeight;

private boolean isImmersived;

private ObservableScrollView.ScrollViewListener listener;

public ImmersiveHelper(Context mContext, View mStatusBar, final View mContentView, ObservableScrollView mScrollView) {

this.mContext = mContext;

this.mStatusBar = mStatusBar;

this.mContentView = mContentView;

this.mScrollView = mScrollView;

}

public void init(final Runnable runnable){

mStatusHeight = setStatusViewHeight(mContext,mStatusBar);

mContentView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {

@Override

public boolean onPreDraw() {

if (mContentView.getMeasuredHeight() != 0){

mTotalHeight = mStatusHeight + mContentView.getMeasuredHeight();

runnable.run();

}

mContentView.getViewTreeObserver().removeOnPreDrawListener(this);

return false;

}

});

}

public void onRestoreData(Bundle bundle){

mTotalHeight = bundle.getInt("totalHeight");

}

public void onSaveData(Bundle bundle){

bundle.putInt("totalHeight",mTotalHeight);

}

public boolean isImmersived() {

return isImmersived;

}

public int getTotalHeight() {

return mTotalHeight;

}

/**

* 設(shè)置當前沉浸的狀態(tài)

*/

public void setImmversive(boolean isOpen, final Runnable runnable){

if(isOpen){

if(!isImmersived) {

mContentView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {

@Override

public boolean onPreDraw() {

int immerseHeight = mContext.getResources().getDisplayMetrics().widthPixels / 2 - mContentView.getMeasuredHeight() - mStatusHeight;

listener = setImmersiveEnabled(mScrollView, mStatusBar, mContentView, immerseHeight);

logD("setImmersive-->true");

isImmersived = true;

if(null != runnable){

runnable.run();

}

mScrollView.scrollTo(0,0);

mScrollView.invalidate();

mContentView.getViewTreeObserver().removeOnPreDrawListener(this);

return false;

}

});

}

}else if(isImmersived){

mScrollView.scrollTo(0,0);

mScrollView.invalidate();

mScrollView.removeScrollViewListener(listener);

mAlpha = 255;

mStatusBar.getBackground().mutate().setAlpha(mAlpha);

mContentView.getBackground().mutate().setAlpha(mAlpha);

logD("setImmersive-->false");

isImmersived = false;

if(null != runnable){

runnable.run();

}

}

}

/**

* 設(shè)置沉浸式交互

* @param height 沉浸的總高度

*/

public ObservableScrollView.ScrollViewListener setImmersiveEnabled(ObservableScrollView scrollView, final View status, final View content, final int height){

mAlpha = 0;

content.getBackground().mutate().setAlpha(mAlpha);

status.getBackground().mutate().setAlpha(mAlpha);

ObservableScrollView.ScrollViewListener listener = new ObservableScrollView.ScrollViewListener() {

@Override

public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) {

int alpha = Math.max(0,Math.min(255,(int) (255 * (scrollView.getScrollY()) * 1.0f / height)));

if(mAlpha != alpha) {

content.getBackground().mutate().setAlpha(alpha);

status.getBackground().mutate().setAlpha(alpha);

mAlpha = alpha;

}

}

};

scrollView.addScrollViewListener(listener);

return listener;

}

private void logD(String text){

Log.d("ImmersiveHelper", text);

}

/**

* 設(shè)置需要充當狀態(tài)欄的視圖高度

* @param viewStatus 視圖

*/

public static int setStatusViewHeight(Context mContext,View viewStatus){

int statusHeight = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT?getStatusBarHeight(mContext):0;

ViewGroup.LayoutParams params = viewStatus.getLayoutParams();

if(statusHeight != params.height) {

params.height = statusHeight;

viewStatus.requestLayout();

}

return statusHeight;

}

/**

* 獲取狀態(tài)欄高度

*

* @param context

* @return

*/

public static int getStatusBarHeight(Context context) {

/*Rect rect = new Rect();

activity.getWindow().getDecorView().getWindowVisibleDisplayFrame(rect);

return rect.top;*/

try {

Class c = Class.forName("com.android.internal.R$dimen");

Object obj = c.newInstance();

Field field = c.getField("status_bar_height");

int x = Integer.parseInt(field.get(obj).toString());

int y = context.getResources().getDimensionPixelSize(x);

return y;

} catch (Exception e) {

e.printStackTrace();

}

return 0;

}

}

使用類:

emptypackage com.example.administrator.mystatusbar;

import android.annotation.TargetApi;

import android.app.Activity;

import android.os.Build;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.view.View;

import android.view.Window;

import android.view.WindowManager;

import android.widget.FrameLayout;

import android.widget.LinearLayout;

import android.os.Handler;

public class MyStatusBar extends Activity {

ObservableScrollView scrollView;

LinearLayout contentView;

View stabarView;

MyStatusBar mContext;

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.status_bar);

mContext = this;

initView();

}

private void initView(){

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE

| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

}

scrollView = (ObservableScrollView) findViewById(R.id.scrollView);

contentView = (LinearLayout) findViewById(R.id.ll_tab_top_search_parent);

stabarView = findViewById(R.id.view_status);

final ImmersiveHelper immersiveHelper = new ImmersiveHelper(mContext,stabarView,contentView,scrollView);

immersiveHelper.init(new Runnable() {

@Override

public void run() {

FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) scrollView.getLayoutParams();

params.topMargin = immersiveHelper.getTotalHeight();

scrollView.requestLayout();

}

});

new Handler().postDelayed(new Runnable() {

@Override

public void run() {

immersiveHelper.setImmversive(true, new Runnable() {

@Override

public void run() {

if(immersiveHelper.isImmersived()){

FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) scrollView.getLayoutParams();

params.topMargin = 0;

scrollView.requestLayout();

}else{

FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) scrollView.getLayoutParams();

params.topMargin = immersiveHelper.getTotalHeight();

scrollView.requestLayout();

}

}

});

}

},3000);

}

}

關(guān)鍵代碼就是這個方法了 public ObservableScrollView.ScrollViewListener setImmersiveEnabled(ObservableScrollView scrollView, final View status, final View content, final int height){
? ? ? ? mAlpha = 0;
? ? ? ? content.getBackground().mutate().setAlpha(mAlpha);
? ? ? ? status.getBackground().mutate().setAlpha(mAlpha);
? ? ? ? ObservableScrollView.ScrollViewListener listener = new ObservableScrollView.ScrollViewListener() {
? ? ? ? ? ? @Override
? ? ? ? ? ? public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) {
? ? ? ? ? ? ? ? int alpha = Math.max(0,Math.min(255,(int) (255 * (scrollView.getScrollY()) * 1.0f / height)));
? ? ? ? ? ? ? ? if(mAlpha != alpha) {
? ? ? ? ? ? ? ? ? ? content.getBackground().mutate().setAlpha(alpha);
? ? ? ? ? ? ? ? ? ? status.getBackground().mutate().setAlpha(alpha);
? ? ? ? ? ? ? ? ? ? mAlpha = alpha;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? scrollView.addScrollViewListener(listener);
? ? ? ? return listener;
? ? }

這里就是根據(jù)滑動監(jiān)聽自由設(shè)置頭布局的透明實現(xiàn)的。 當然里面還有方法時自行控制是否需要這樣的效果的。如果不需要，我們可以讓內(nèi)容布局從頭布局下面開始排列。里面還做了4.4以下的處理。大家可以看看里面的實現(xiàn)。應該可以看懂的.... 今天的博客寫到這里，項目地址：下次給上..

總結(jié)

以上是生活随笔為你收集整理的Android --- 详细介绍透明式状态栏和沉浸式状态栏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。