Android 4.4 (Kit Kat) 中的 Translucent Bars 應該在第三方應用中普及嗎？

01-11

許多第三方應用最近都對 Kit Kat 做了這個適配，這樣做真的合適嗎？

一句話: 可以用, 不可濫用.

I"ve seen lots of folks making the status bar translucent for the sole purpose of extending the action bar color higher. IMO this isn"t really the best use of translucent bars. In the tip, I wrote "the feature makes images and other content within your app feel even more immersive by letting you draw behind the status and navigation bars." This feature (at least in its current form) is really designed to make your content more immersive, not the static parts of your UI.

Translucent Bar 是 Android 對 Edge to Edge 嘗試中的一個, 也是最容易被用戶注意到的. 它的初始目的就是要最大化可視面積和淡化系統界面的存在感. 可以說這個初衷是完全沒問題的.

上圖就是正確的使用了 Translucent Bars 的例子. 他的透明欄不會影響到 UI 本身的連貫性, 也不會因為透明使系統通知變得難以辨認.

而某些應用則是為了透明而透明: 原本就是亮色的 Action Bar, 在採用了透明欄之後使得系統通知難以閱讀 (比如 JotterPad X), 這就屬於本末倒置的情況了.

另外, Translucent Bars 是可以分開使用的, 開發者視情況單獨透明通知欄或導航欄都是很明智的選擇.

如果想要更深入的了解 Translucent Bars, 可以去看看 Roman Nurik 在 Google+ 上的帖子. 為了方便上不了 G+ 的同學, 我貼一下原文:

Today』s #AndroidDev and #AndroidDesign#Protip from +Roman Nurik is about adding background protection for system UI chrome when using KitKat』s translucent decor flags.
Lots of developers are starting to explore the new 「translucent system UI styling」 feature we』ve added in Android 4.4 KitKat [1][2], and that』s great! The feature makes images and other content within your app feel even more immersive by letting you draw behind the status and navigation bars. It also automatically adds a gradient between your activity layout and the status and navigation bar contents, providing some basic background protection to ensure that system UI elements are legible.
However, sometimes the automatic gradient background isn』t sufficient—even after it"s applied, content still interferes a bit too much with the all-important system bars. In those cases, you can draw additional background protection (e.g. semitransparent black rectangles) using a custom view (or layout) that overrides the fitSystemWindows [3] method.

You can find sample code of this in the gist below, and some screenshots in the pictures attached to this post.
DrawInsetsFrameLayout.java: https://gist.github.com/romannurik/8919163
The meat of the Java code is in fitSystemWindows and onDraw. Most of the other code deals with providing additional callbacks and handling custom attributes (likeyourapp:insetBackground="#9000").
protected boolean fitSystemWindows(Rect insets) {
mInsets = new Rect(insets); // store insets
postInvalidateOnAnimation(); // redraw

return true; // consume insets
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// draw top
mTempRect.set(0, 0, getWidth(), mInsets.top);
mInsetBackground.setBounds(mTempRect);
mInsetBackground.draw(canvas);
…

// draw bottom, left, and right
}
To use this layout class:
1. Set your activity』s theme to one that turns on the translucent window decor (setwindowTranslucentStatus and windowTranslucentNavigation to true). You may also want to set windowActionBarOverlay to true and provide an action bar style that sets sets the action bar background to transparent (sinceDrawInsetsFrameLayout will draw beneath overlay action bars as well).
2. Set your activity』s layout to something like this:
&

& &
&
android:layout_w="match_parent"
android:layout_h="match_parent"
yourapp:insetBackground="#9000" /&>
&
And that"s it; now you"ll have some additional protection to ensure your overlay action bar and system bars are legible, yet content still extends to the very edges of the screen, delivering a more immersive feel.
That"s all for today"s protip; let us know in the comments if you"ve got follow-up tips or questions!

[1] New ways to build beautiful apps: Android KitKat
[2] Translucent Theme in Android by +Matt Gaunt: Gaunt Face | Matthew Gaunt
[3] fitSystemWindows: View | Android Developers

首先個人是非常喜歡這樣的處理方式的，使用 Translucent System Bar 的應用我基本上就算不用也會裝一個。有幾個非常好，比如快圖瀏覽 (QuickPic)，Muzei Live Wallpaper，Sliding Explorer，Smooth新浪微博客戶端還有Pushbullet和Google Now 。這些應用對於 Translucent System Bar 使用的很好，而另外的比如JotterPad X: Writer就是完完全全的瞎胡鬧。
先說好的例子，快圖和Muzei是圖片類應用，圖片類應用是最適宜使用 Translucent System Bar 的應用種類之一（另一為地圖類，至今沒有特別好的地圖應用支持，騰訊地圖支持狀態欄透明，下部由於有 iOS 式 tab 欄所以沒做透明 navigation bar）此類應用使用此全屏模式一來美化了圖片查看界面，二來方便了對圖片的操作（例如分享、刪除、編輯）。再說Sliding Explorer和Smooth，這兩個都是列表類應用，使用全屏可以使用戶查看的視野更寬闊，對於微博來說看到更多的信息（信息流占屏幕比重過小是目前社交網站應用的最大缺陷）。顯示更多的信息對於社交網站應用而言極端重要！
再說反例，JotterPad 本來就是淺色 Action bar，還使用 Translucent Status Bar ，搞得整個狀態欄圖標完全看不清，而且視覺效果極差！另外本身這只是一款文本編輯類應用，完全不需要這樣的全屏模式，硬加上去就是徹徹底底的瞎！胡！鬧！
因此，translucent status bar必須要在適當場合才能使用。這也是由於Android 4.4 使用了 translucent status bar 但卻沒支持讓狀態欄圖標在背景為淺色時變成黑色（像 iOS7 那樣），這直接導致很多時候使用 Translucent System Bar 效果不如不使用。正如 @NovaDNG 所說，Translucent System Bar 可以用，不可濫用。

推薦閱讀：