Translucent System Bars-4.4新特性

分類:技術 時間:2016-10-24

概念

Google官方文檔4.4APIs_KITKAT

該特性是在Android 4.4 KITKAT版本(API_19)中引入的新特性。

也就是我們說的 透明欄 ,國內一般稱之為 沉浸式頂欄。在 Android 4.4 還是在 Android 5.0 上, Translucent 「透明」 的特質都能體現得非常清楚.

介紹

Android 4.4之前,我們打開手機app,總是能看到系統頂部那條黑乎乎的通知欄,顯得非常不和諧。于是Android 4.4開始,便引入了Translucent System Bar的系特性,用于彌補系統通知欄突兀之處。

我們先來看看 Translucent System Bar 新特性引入后,發生了什么樣的變化。

可以看到系統的通知欄和app界面融為一體。

兩種實現方式

大致說明

工程目錄:

注意事項

  • 主要的操作都在style.xml 和 AndroidManifest.xml 中,Activity里面沒有任何涉及到Translucent System Bar設置的代碼,所以可以忽略不看。
  • ColorTranslucentBarActivity 和 ImageTranslucentBarActivity 分別用于展示兩種不同實現方式的效果。 其中*2是繼承TranslucentBarActitity2,在父類中設置了setFitsSystemWindows(true)屬性,布局文件中可以省略了。
  • 要在Activity中使用 Translucent System Bar 特性,首先需要到AndroidManifest中為指定的Activity設置Theme。但是需要注意的是,我們不能直接在values/style.xml直接去自定義 Translucet System Bar 的Theme,因為改特性僅兼容 Android 4.4 開始的平臺,所以直接在values/style.xml聲明引入,工程會報錯。有些開發者朋友會在代碼中去判斷SDK的版本,然后再用代碼設置Theme。雖然同樣可以實現效果,但個人并不推崇這種做法。我所采取的方法則是建立多個SDK版本的values文件夾,系統會根據SDK的版本選擇合適的Theme進行設置。大家可以看到上面我的工程里面有values、values-v19、values-v21。

背景圖片延伸至系統欄

三步設置

第一步:設置不同版本下style.xml

在values、values-v19、values-v21的style.xml都設置一個 Translucent System Bar 風格的Theme。

values/style.xml

lt;style name=quot;ImageTranslucentThemequot; parent=quot;AppThemequot;gt;
        lt;!--Android 4.4之前的版本上運行,直接跟隨系統主題--gt;
    lt;/stylegt;

values-v19/style.xml

lt;!--Android 4.4 --gt;

    lt;!--ImageTranslucentTheme--gt;
    lt;style name=quot;ImageTranslucentThemequot;  parent=quot;Theme.AppCompat.Light.DarkActionBarquot;gt;
        lt;item name=quot;android:windowTranslucentStatusquot;gt;truelt;/itemgt;
        lt;item name=quot;android:windowTranslucentNavigationquot;gt;truelt;/itemgt;
    lt;/stylegt;

values-v21/style.xml

lt;!--Android 5.0以上版本--gt;

    lt;!--ImageTranslucentTheme--gt;
    lt;style name=quot;ImageTranslucentThemequot; parent=quot;Theme.AppCompat.Light.DarkActionBarquot;gt;
        lt;item name=quot;android:windowTranslucentStatusquot;gt;falselt;/itemgt;
        lt;item name=quot;android:windowTranslucentNavigationquot;gt;truelt;/itemgt;
        lt;!--Android 5.x開始需要把顏色設置透明,否則導航欄會呈現系統默認的淺灰色--gt;
        lt;item name=quot;android:statusBarColorquot;gt;@android:color/transparentlt;/itemgt;
    lt;/stylegt;

上面需要注意的地方是,無論你在哪個SDK版本的values目錄下,設置了主題,都應該在最基本的values下設置一個同名的主題。這樣才能確保你的app能夠正常運行在 Android 4.4 以下的設備。否則,肯定會報找不到Theme的錯誤。

第二步:在AndroidManifest.xml中對指定Activity的theme進行設置

lt;!-- ImageTranslucentBarActivity --gt;
        lt;activity
            android:name=quot;.translucentbar.ImageTranslucentBarActivityquot;
            android:label=quot;@string/image_translucent_barquot;
            android:theme=quot;@style/ImageTranslucentThemequot; /gt;
        lt;!-- 第二種方式,在抽象類中通過代碼的方式fitsSystemWindows=true --gt;
        lt;activity
            android:name=quot;.translucentbar.ImageTranslucentBarActivity2quot;
            android:label=quot;@string/image_translucent_barquot;
            android:theme=quot;@style/ImageTranslucentThemequot; /gt;

第三步:在Activity的布局文件中設置背景圖片,同時,需要把android:fitsSystemWindows設置為true

lt;?xml version=quot;1.0quot; encoding=quot;utf-8quot;?gt;
lt;RelativeLayout xmlns:android=quot;http://schemas.android.com/apk/res/androidquot;
    android:layout_width=quot;match_parentquot;
    android:layout_height=quot;match_parentquot;
    android:background=quot;@mipmap/imgquot;
    android:fitsSystemWindows=quot;truequot;gt;


    lt;TextView
        android:layout_width=quot;match_parentquot;
        android:layout_height=quot;wrap_contentquot;
        android:text=quot;第一種方式繼承父類BaseActivity的實現方式,布局文件根目錄下需要設置fitsSystemWindows=true quot;
        android:textColor=quot;@color/color_redquot;
        android:layout_margin=quot;10dpquot;
        android:textSize=quot;20spquot; /gt;

lt;/RelativeLayoutgt;

到此,第一種實現方式完成,系統欄會被背景圖填充了。效果如下:

APP的Tab欄和系統導航欄分開來設置。

由于它的TAB欄是純色的,所以只要把系統通知欄的顏色設置成和TAB欄一樣的即可,實現方式上比第一種要簡單的多。同樣需要在不同SDK版本的values下,創建一個同名的Theme。

第一步 在不同SDK版本中的style.xml創建主題

values/style.xml

lt;style name=quot;ColorTranslucentThemequot; parent=quot;AppThemequot;gt;
        lt;!--Android 4.4之前的版本上運行,直接跟隨系統主題--gt;
    lt;/stylegt;

values-v19/style.xml

lt;!--Android 4.4 --gt;

     lt;!--ColorTranslucentTheme--gt;
    lt;style name=quot;ColorTranslucentThemequot; parent=quot;Theme.AppCompat.Light.DarkActionBarquot;gt;
        lt;item name=quot;android:windowTranslucentStatusquot;gt;truelt;/itemgt;
        lt;item name=quot;android:windowTranslucentNavigationquot;gt;truelt;/itemgt;
    lt;/stylegt;

values-v21/style.xml

lt;!--Android 5.0以上版本--gt;

  lt;!--ColorTranslucentTheme--gt;
    lt;style name=quot;ColorTranslucentThemequot; parent=quot;Theme.AppCompat.Light.DarkActionBarquot;gt;
        lt;item name=quot;android:windowTranslucentStatusquot;gt;falselt;/itemgt;
        lt;item name=quot;android:windowTranslucentNavigationquot;gt;truelt;/itemgt;
        lt;item name=quot;android:statusBarColorquot;gt;@color/color_31c27clt;/itemgt;
    lt;/stylegt;

values-v21/style.xml中的android:statusBarColor,設置成透明色也可以實現相同的效果

lt;item name=quot;android:statusBarColorquot;gt;@android:color/transparentlt;/itemgt;

第二步: ColorTranslucentBarActivity的布局文件activity_color_translucent_bar.xml中設置Tab欄的顏色

lt;?xml version=quot;1.0quot; encoding=quot;utf-8quot;?gt;
lt;LinearLayout xmlns:android=quot;http://schemas.android.com/apk/res/androidquot;
    android:layout_width=quot;match_parentquot;
    android:layout_height=quot;match_parentquot;
    android:fitsSystemWindows=quot;truequot;
    android:orientation=quot;verticalquot;gt;

    lt;RelativeLayout
        android:layout_width=quot;match_parentquot;
        android:layout_height=quot;55dpquot;
        android:background=quot;@color/color_31c27cquot;gt;

        lt;TextView
            android:layout_width=quot;wrap_contentquot;
            android:layout_height=quot;wrap_contentquot;
            android:layout_centerInParent=quot;truequot;
            android:text=quot;QQ Musicquot;
            android:textColor=quot;@android:color/whitequot;
            android:textSize=quot;20spquot; /gt;

    lt;/RelativeLayoutgt;
lt;/LinearLayoutgt;

說明: 上述設置話,會在真機上出現頂部變成黑白漸變的bug,建議采用下面的方式:

第一步:去到 ColorTranslucentBarActivity 的布局文件中,將布局劃分成為標題布局和內容布局兩部分;

第二步:將 ColorTranslucentBarActivity 的根布局顏色設置與標題布局的顏色一致,并將內容布局設置為白色;

lt;?xml version=quot;1.0quot; encoding=quot;utf-8quot;?gt;
lt;LinearLayout xmlns:android=quot;http://schemas.android.com/apk/res/androidquot;
    android:layout_width=quot;match_parentquot;
    android:layout_height=quot;match_parentquot;
    android:background=quot;@color/color_31c27cquot;
    android:fitsSystemWindows=quot;truequot;
    android:orientation=quot;verticalquot;gt;

    lt;!--標題布局--gt;
    lt;RelativeLayout
        android:layout_width=quot;match_parentquot;
        android:layout_height=quot;55dpquot;
        android:background=quot;@color/color_31c27cquot;gt;

        lt;TextView
            android:layout_width=quot;wrap_contentquot;
            android:layout_height=quot;wrap_contentquot;
            android:layout_centerInParent=quot;truequot;
            android:text=quot;QQ Musicquot;
            android:textColor=quot;@android:color/whitequot;
            android:textSize=quot;20spquot; /gt;

    lt;/RelativeLayoutgt;

    lt;!--內容布局--gt;
    lt;LinearLayout
        android:layout_width=quot;match_parentquot;
        android:layout_height=quot;match_parentquot;
        android:background=quot;@android:color/whitequot;
        android:orientation=quot;verticalquot;gt;

        lt;Button
            android:id=quot;@ id/btn_show_toastquot;
            android:layout_width=quot;match_parentquot;
            android:layout_height=quot;wrap_contentquot;
            android:text=quot;Show a toastquot; /gt;
    lt;/LinearLayoutgt;

lt;/LinearLayoutgt;

第三步:Manifest.xml中為Activity設置主題

lt;!-- ColorTranslucentBarActivity --gt;
        lt;activity
            android:name=quot;.translucentbar.ColorTranslucentBarActivityquot;
            android:label=quot;@string/color_translucent_barquot;
            android:theme=quot;@style/ColorTranslucentThemequot; /gt;

至此,第二種的方式所有的操作步驟已經完成,效果如下:

注意事項

android:fitsSystemWindows說明

設置布局調整時是否考慮系統窗口(如狀態欄)

通過前面的兩種方式,大家估計會留意到一個地方,就是所有實現 Translucent System Bar 效果的Activity,都需要在根布局里設置 android:fitsSystemWindows=”true” 。設置了該屬性的作用在于,不會讓系統導航欄和我們app的UI重疊,導致交互問題。

設置的效果:

不設置的效果:

想必區別就不用多說了吧。

避免重復設置android:fitsSystemWindows

上述寫法,如果有多個Activity要實現這種效果,就要在每一個布局文件中設置fitSsytemWindows屬性,非常繁瑣切容易忘記。

嘗試方案:

一 :在theme中加上如下的android:fitsSystemWindows設置:

lt;item name=quot;android:fitsSystemWindowsquot;gt;truelt;/itemgt;

雖然效果上可以實現。但是在布局文件中設置是對View生效,而到了theme進行設置則是對Window生效,會影響到其他組件的位置,比如Toast中的文字會上移等等,所以這種方法不可取。

第二種嘗試: 在代碼中設置。

避免在每個布局文件中都要寫上 android:fitsSystemWindows=”true”,可以在抽象父類中設置即可。

import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;

/**
 * MyApp
 *
 * @author Mr.Yang on 2016-02-26  09:32.
 * @version 1.0
 * @desc TranslucentBarBaseActivity 抽象類 ,
 * 繼承此類,可以避免在每個布局文件中寫 android:fitsSystemWindows=quot;truequot;
 */
public abstract class TranslucentBarBaseActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 取消標題
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        // 將設置布局文件的操作交給繼承的子類
        setContentView(getLayoutResId());

        // 設置android:fitsSystemWindows=quot;truequot;屬性
        ViewGroup contentFrameLayout = (ViewGroup) findViewById(Window.ID_ANDROID_CONTENT);
        View parentView = contentFrameLayout.getChildAt(0);
        if (parentView != null amp;amp; Build.VERSION.SDK_INT gt;= 19) {
            Log.d(quot;TBBActivityquot;, quot;SDK_INT:quot;   Build.VERSION.SDK_INT);
            parentView.setFitsSystemWindows(true);
        }
    }


    /**
     * 定義成抽象方法,子類繼承此父類抽象類,必須重寫
     *
     * @return
     */
    protected abstract int getLayoutResId();

}

所有需要實現效果的界面繼承TranslucentBarBaseActivity 父類,并實現 getLayoutResId 抽象方法即可,就可以不用在布局文件中不斷做重復操作了。

總結

  • 方式一適用于app中沒有導航欄,且整體的背景是一張圖片的界面;
  • 方式二適用于app中導航欄顏色為純色的界面;
  • android:fitsSystemWindows設置要在布局文件中,不要到theme中設置,或者在抽象類中設置,子類繼承抽象類即可。

參考文章:

http://www.jianshu.com/p/0acc12c29c1b# 感謝D_clock


Tags: 安卓開發

文章來源:http://blog.csdn.net/yangshangwei/article/details/


ads
ads

相關文章
ads

相關文章

ad