2. 程式人生 > >Android沉浸式瀏覽圖片

Android沉浸式瀏覽圖片

阿新 • • 發佈：2019-01-11

Android沉浸式瀏覽圖片

一、目標

沉浸式瀏覽圖片

二、體驗地址

神馬筆記最新版本：【神馬筆記Version1.1.0_beta.apk】

三、需求分析

圖片瀏覽分為2個層次

  1. 瀏覽層

  2. 操作層

  • 瀏覽層

圖片瀏覽層用於檢視圖片，使用者通過雙擊，多點操作，移動檢視圖片。瀏覽層為全屏模式，圖片的頂部和底部可能被操作層所遮擋。

  • 操作層

操作層提供了圖片相關或其他操作，目前需要實現的是返回前一介面，檢視圖片列表。可以隱藏操作層從而提供使用者沉浸式檢視圖片的體驗。

四、準備工作

1. 實現全屏

有2種方式可以實現全屏。

  1. windowFullscreen
  2. SystemUI

windowFullscreen將Window設定為全屏，從而實現全屏模式。

Android提供了一種更好的方式來實現全屏，使用SystemUI。

對於圖片檢視，相關的SystemUI有2個，頂部的狀態列Status，底部的導航欄Navigation。SystemUI提供了使用Status及Navigation背後控制元件的功能，及將應用的控制元件區域延伸到系統控制元件之下。

SystemUI提供了3個Flag來實現這個功能。

  • SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

    使控制元件區域延伸到Status之下。

  • SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

    使控制元件區域延伸到Navigation之下。

  • SYSTEM_UI_FLAG_LAYOUT_STABLE

    使介面保持穩定，不會因切換SystemUI可見性或者Activity切換導致佈局變化。

設定這3個Flag只是延伸了控制元件的空間，Status和Navigation依然是可見的。

2. 控制可見性

SystemUI提供了另外2個Flag使用者控制Status和Navigation的可見性。

  • SYSTEM_UI_FLAG_FULLSCREEN

隱藏Status，預設為顯示

  • SYSTEM_UI_FLAG_HIDE_NAVIGATION

隱藏Navigation，預設為顯示

3. 設定樣式風格

SystemUI提供了2個Flag用於設定Status和Navigation的風格。

  • SYSTEM_UI_FLAG_LIGHT_STATUS_BAR

將Status設定為明亮風格，通常顯示為白底黑色按鈕。預設為深色，黑底白色按鈕。

  • SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR

將Navigation設定為明亮風格，通常顯示為白底黑色按鈕。預設為深色，黑底白色按鈕。

注意，這2個Flag控制的是Status和Navigation按鈕的樣式，背景可以獨立設定。

4. 設定背景顏色

在styles.xml資源中可以設定以下的樣式風格。

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

<item name="android:windowTranslucentStatus">false</item>
<item name="android:statusBarColor">@android:color/black</item>

<item name="android:windowTranslucentNavigation">false</item>
<item name="android:navigationBarColor">@android:color/black</item>
  • windowDrawsSystemBarBackgrounds

繪製Status及Navigation背景

  • windowTranslucentStatus

設定Status為半透明狀態，預設為true

  • statusBarColor

設定Status的背景顏色

  • windowTranslucentNavigation

設定Navigation為半透明狀態，預設為true

  • navigationBarColor

設定Navigation的背景顏色

5. 實現沉浸式全屏

SystemUI提供另外3個Flag來完成沉浸模式。

  • SYSTEM_UI_FLAG_IMMERSIVE

設定為沉浸模式，使用者從底部或底部向螢幕內滑動，或者Window焦點發生變化時，會顯示Status及Navigation，並且一直顯示，直到重新被隱藏。顯示Status及Navigation不會影響佈局。

預設狀態下，會進行重新佈局

  • SYSTEM_UI_FLAG_IMMERSIVE_STICKY

設定為粘性沉浸模式，與SYSTEM_UI_FLAG_IMMERSIVE的區別在於，Status或Navigation在一段時間後會自動隱藏。

  • SYSTEM_UI_FLAG_LOW_PROFILE

降低Status的明亮度，弱化Status顯示。具體機型實現有差異，視具體機型而定。

6. SystemUI FLAG

  1. 預設為可見
  • SYSTEM_UI_FLAG_VISIBLE
  1. 控制佈局，能否延伸到SystemUI的空間
  • SYSTEM_UI_FLAG_LAYOUT_STABLE
  • SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
  • SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
  1. SystemUI的樣式
  • SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
  • SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
  1. 控制SystemUI可見性
  • SYSTEM_UI_FLAG_HIDE_NAVIGATION
  • SYSTEM_UI_FLAG_FULLSCREEN
  1. 實現沉浸式全屏
  • SYSTEM_UI_FLAG_IMMERSIVE
  • SYSTEM_UI_FLAG_IMMERSIVE_STICKY
  • SYSTEM_UI_FLAG_LOW_PROFILE

7. 處理SystemUI空間

當我們設定SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN、SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION、SYSTEM_UI_FLAG_LAYOUT_STABLE將控制元件延伸到Status及Navigation的區域後，控制元件中的內容會被Status及Navigation遮擋，如同使用FrameLayout一樣。

View提供了2個方法來處理SystemUI控制元件問題。

public WindowInsets dispatchApplyWindowInsets(WindowInsets insets); 
public WindowInsets onApplyWindowInsets(WindowInsets insets);

並且提供了預設處理方式，也可以在佈局檔案中設定fitSystemWindows屬性。

public void setFitsSystemWindows(boolean fitSystemWindows) {
    setFlags(fitSystemWindows ? FITS_SYSTEM_WINDOWS : 0, FITS_SYSTEM_WINDOWS);
}

private boolean fitSystemWindowsInt(Rect insets) {
    if ((mViewFlags & FITS_SYSTEM_WINDOWS) == FITS_SYSTEM_WINDOWS) {
        mUserPaddingStart = UNDEFINED_PADDING;
        mUserPaddingEnd = UNDEFINED_PADDING;
        Rect localInsets = sThreadLocal.get();
        if (localInsets == null) {
            localInsets = new Rect();
            sThreadLocal.set(localInsets);
        }
        boolean res = computeFitSystemWindows(insets, localInsets);
        mUserPaddingLeftInitial = localInsets.left;
        mUserPaddingRightInitial = localInsets.right;
        internalSetPadding(localInsets.left, localInsets.top,
                           localInsets.right, localInsets.bottom);
        return res;
    }
    return false;
}

ViewGroup過載了其中一個方法。

一旦WindowInsets被標誌為Consumed，將不再傳遞給下一個控制元件。

@Override
public WindowInsets dispatchApplyWindowInsets(WindowInsets insets) {
    insets = super.dispatchApplyWindowInsets(insets);
    if (!insets.isConsumed()) {
        final int count = getChildCount();
        for (int i = 0; i < count; i++) {
            insets = getChildAt(i).dispatchApplyWindowInsets(insets);
            if (insets.isConsumed()) {
                break;
            }
        }
    }
    return insets;
}

五、組合起來

1. 設定初始狀態

int flags = View.SYSTEM_UI_FLAG_VISIBLE;
flags |= View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN;
flags |= View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION;
flags |= View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
flags |= View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;

view.setSystemUiVisibility(flags);

2. 處理SystemUI控制元件

getView().setOnApplyWindowInsetsListener((v, insets) -> {
    titleBar.setPadding(0, insets.getSystemWindowInsetTop(), 0, 0);
    bottomBar.setPadding(0, 0, 0, insets.getSystemWindowInsetBottom());

    return insets.consumeSystemWindowInsets();
});

3. 過渡效果

使用TransitionDrawable來切換全屏/非全屏下的背景。

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

    <item android:drawable="@drawable/anc_shape_texture_paper"></item>

    <item>
        <color android:color="@android:color/black"/>
    </item>

</transition>

預設為非全屏狀態，顯示為紙張紋理的背景。

全屏狀態下，切換到黑色背景。

4. 切換SystemUI可見性

void setActionVisible(boolean value) {

    if (!(isActionVisible() ^ value)) {
        return;
    }

    this.actionVisible = value;

    {
        if (value) {
            titleBar.animate().translationY(0);
            bottomBar.animate().translationY(0);

            TransitionDrawable d = (TransitionDrawable) (getView().getBackground());
            d.reverseTransition(getResources().getInteger(android.R.integer.config_shortAnimTime));

        } else {
            titleBar.animate().translationY(-titleBar.getHeight());
            bottomBar.animate().translationY(bottomBar.getHeight());

            TransitionDrawable d = (TransitionDrawable) (getView().getBackground());
            d.startTransition(getResources().getInteger(android.R.integer.config_shortAnimTime));
        }
    }

    {
        View view = this.getView();
        int flags = view.getSystemUiVisibility();

        if (value) {
            flags &= (~View.SYSTEM_UI_FLAG_FULLSCREEN);
            flags &= (~View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
        } else {
            flags |= (View.SYSTEM_UI_FLAG_FULLSCREEN);
            flags |= (View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
        }

        view.setSystemUiVisibility(flags);
    }

}

六、Final

完成以上所有步驟之後，完美的圖片沉浸式檢視功能終於大功告成。

BUT，Android碎片化問題總能給我們帶來問題。

Android 9.0開始支援劉海屏，但國產手機廠商如小米在Android 8.1已經開始出現劉海屏。

我手上的測試機紅米6 Pro就是一臺有著劉海屏的Android 8.1手機。

在紅米6 Pro上切換全屏/非全屏時會出現圖片跳躍的問題，除小米自帶的圖片應用外，快圖瀏覽、相簿管家都會出現跳躍的問題。

臨時的處理辦法，關閉MIUI的劉海屏功能。

<meta-data
           android:name="notch.config"
           android:value="none"/>

相關推薦

Android沉浸式瀏覽圖片

Android沉浸式瀏覽圖片 一、目標 二、體驗地址 三、需求分析 四、準備工作 1. 實現全屏 2. 控制可見性 3. 設定樣式風格 4. 設定背景顏色 5. 實現沉浸式

Android沉浸式（固定顏色、圖片沉底）

一、圖片沉底 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { // 透明狀態列 getWindow().addFlags(WindowManager.LayoutParams.FL

android 沉浸式狀態列(像ios那樣的狀態列與應用統一顏色樣式)

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Android 沉浸式狀態列完美解決方案

現在搜尋Android 沉浸式狀態列，真的是一堆一堆，寫的特別多，但是真正用的舒服的真沒有，在這裡自己整理一下開發記錄   注意，在使用這個步驟過程之前，請把之前設定的程式碼註釋一下 把佈局帶有android:fitsSystemWindows註釋掉 style檔案中凡是在style.xml

Android 沉浸式通知欄

Android沉浸式通知欄的兩種方式 一， requestWindowFeature(Window.FEATURE_NO_TITLE);// 不顯示標題 Window window = getWindow(); if (Build.VERSION.SDK_INT >= Build

Android 沉浸式狀態列3

之前寫過兩種方式的沉浸式狀態列 https://blog.csdn.net/QiY6010/article/details/72883287；https://blog.csdn.net/QiY6010/article/details/78678911 今天介紹的是一個狀態列庫barlibra

Android沉浸式狀態列

之前一直沒怎麼去研究這方面的，最近有個專案，讓我在沉浸式裡面真的沉浸死了，雖然學習了很多，但是還是個沉浸式菜鳥，這裡也就記錄一些遇到的問題和分享下相關經驗吧 需求： 這裡是一個側滑頁面和主頁面，這個佈局必須是佔滿全屏的 另外一種 需要實現這樣的效果，也就是不會頂上去

Android 沉浸式全面詳解(這一篇文章就夠了)

方法一:通過設定Theme主題設定狀態列透明 因為 API21 之後（也就是 android 5.0 之後）的狀態列，會預設覆蓋一層半透明遮罩。且為了保持4.4以前系統正常使用，故需要三份 style 檔案，即預設的values（不設定狀態列透明）、values-v19、v

Android 沉浸式狀態列攻略 讓你的狀態列變色吧

                     一、概述近期注意到QQ新版使用了沉浸式狀態列，ok，先宣告一下：本篇部落格效果下圖：關於這個狀態列變色到底叫「Immersive Mode」/「Translucent Bars」有興趣可以去 為什麼在國內會有很多使用者把 ｢透明欄｣（Translucent Bars）

Android沉浸式狀態列與EditText問題【沉浸式狀態列實現及遇到的坑】

Android4.4以前的版本，狀態列都是一塊黑色的，個人認為還是比較醜的。自4.4開始，Android已經支援透明狀態列了（俗稱沉浸式狀態列）。個人認為支援沉浸式狀態列的app逼格還是比較高的，為了緊跟潮流，我們專案中也準備加入沉浸式狀態列。在實現沉浸式狀態列的過程中踩了不

Android 沉浸式體驗

安卓沉浸式體驗是一個很早就提出的概念，對此本人對其的理解其實是頁面UI變化的平滑性的體驗，不是那種突兀的跳轉，也有人說這個最早的解釋是頁面全屏，讓頁面內容充滿螢幕，但隨著時間的演變大部分情況下，沉浸式體驗可以狹隘的理解為，手機狀態列和app標題欄顏色相同，本文就簡單介紹一種平

android 沉浸式狀態列 像ios那樣的狀態列與應用統一顏色樣式

這個特性是andorid4.4支援的，最少要api19才可以使用。下面介紹一下使用的方法，非常得簡單：   [java]  view plain copy  

Android 沉浸式狀態列-字型顏色與背景顏色修改實現與相容

沉浸式狀態列究其根本就是將佈局內容延伸到狀態列中，讓狀態列覆蓋在佈局上或者隱藏。 實現 首先，要修改狀態列android版本至少要在4.4以上，並且在4.4是不能讓狀態列透明的，只能達到一種半透明的陰影背景，而在5.x的版本中，是可以修改背景顏色但無法修

Android沉浸式通知欄的一個開源庫SystemBarTint簡單使用，android沉浸式狀態列

SystemBarTint專案地址：https://github.com/jgilfelt/SystemBarTint 使用：public class BaseActivity extends App

Android沉浸式與SearchView的坑

Android開發雖然不算多難，但其中確實包含了這樣那樣的坑，我今天要說的這個坑可能很少人會遇到，不過萬一呢。。。 一開始是我想在專案的toolbar上新增谷歌原生支援的搜尋功能，但是怎麼弄都不對，鍵盤彈出以後搜尋框會自動消失，如下圖所示，可能比較亂，將就看看

Android沉浸式狀態列及導航欄實現

Android在4.4版本以後開始出現狀態列及導航欄透明化 實現程式碼如下 If (Build.Version.Sdk_Int >= Build.Version_Codes.Kitkat)

Android沉浸式狀態列SystemBarTint的使用方法

什麼是沉浸式狀態列 Android從4.4開始支援這種顯示效果，直接看對比圖： 從上圖可以看到左邊淘寶APP最頂部的狀態列背景是黑色的，而右邊的360手機助手那個位置不是黑色，就是用了沉浸式狀態列這種效果。 SystemBarTint的使用 那麼

Android 沉浸式模式與常見狀態列和導航欄效果

官方稱沉浸式狀態列為沉浸式模式。什麼是沉浸式？沉浸式就是讓人專注當前的(由設計者營造)情境下感到愉悅和滿足，而忘記真實的情境。什麼是Android中的沉浸式？當啟用該模式，應用程式的介面將佔據整個螢幕，自動隱藏系統的狀態列和導航欄，讓應用程式內容可以在最大顯示範圍呈現，增加大屏體驗，而當需要檢視通知的時候只需

另外兩種android沉浸式狀態列實現思路

http://www.jianshu.com/p/b100b64544f3 關於沉浸式狀態列相信大家都不陌生，IOS系統很早就有，android5.0及以後版本都支援給狀態列著色，而目前android主流版本還是4.4，網上通用實現4.4（API19）沉浸式狀態

Android沉浸式狀態列的實現

1.沉浸式狀態列的介紹      話說跟著潮流走，最近多款app都實現了狀態列和標題欄的顏色一致或者漸變，美其名曰"沉浸式狀態列"。這個沉浸式狀態列只有在API大於或等於的android版本手機，以下的版本統統不相容，不要問我為什麼。  現在來看看沉浸式狀態列的神奇效果，在