詳解Android通知欄沉浸式/透明化完整解決方案

更新時(shí)間：2017年03月30日 08:35:26 作者：tnnowu

這篇文章主要介紹了詳解Android通知欄沉浸式/透明化完整解決方案,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

Google在Android 4.4版本加入了半透明的界面樣式，在Android 5.0的時(shí)候推出了Material Design的概念。

這些樣式的加入使得原本死板、丑陋、和App顏色不一致的通知欄變得更親和、順眼、用戶體驗(yàn)更友好。

作者是常年做對(duì)日項(xiàng)目的，對(duì)日項(xiàng)目以界面簡(jiǎn)潔功能強(qiáng)大而著稱。最近客戶要求UI方面做一些改變，讓App看上去給用戶感覺更友好。所以就提到了Android 4.4以后的通知欄問題。

網(wǎng)上關(guān)于通知欄的文章鋪天蓋地，什么沉浸式，什么半透明。。。挺會(huì)拽詞。也不乏有Android大神也寫過類似的文章，但是那文章能看？長(zhǎng)篇大論，程序員夠累了，哪有那些時(shí)間看你在那里車轱轆話滿天飛，說了一大頓表達(dá)不明白，浪費(fèi)時(shí)間，寫的一堆垃圾文章。

本篇文章杜絕冗余，做到最簡(jiǎn)單，最實(shí)用，對(duì)日項(xiàng)目比的不是代碼量，而是最少的代碼寫出最漂亮的程序。

先上Gif圖，Android 4.4 和 Android 6.0 實(shí)現(xiàn)樣式效果之后的對(duì)比圖

Android 4.4

Android 6.0

實(shí)現(xiàn)樣式效果我們有兩種方案

①DrawerLayout+Toolbar

②ActionBar

下面我們就來一一實(shí)現(xiàn)

①DrawerLayout+Toolbar

添加依賴庫(谷歌提供)

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

布局代碼1:使用 DrawerLayout做最外層，引入NavigationView側(cè)邊抽屜控件

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/id_drawerlayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.tnnowu.android.demo17032801.MainActivity">

 <include layout="@layout/content_layout" />

 <android.support.design.widget.NavigationView
 android:id="@+id/id_navigationview"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_gravity="left"
 app:itemTextColor="@color/c_light_gray3" />

</android.support.v4.widget.DrawerLayout>

布局代碼2：里層嵌套Toolbar

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="#30469b"
 android:paddingTop="@dimen/toolbar_padding_top"
 app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
 app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

 <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:text="ToolBar版"
  android:textSize="20sp" />

 </android.support.v7.widget.Toolbar>

 <!--內(nèi)容顯示布局-->
 <RelativeLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <Button
  android:id="@+id/goToActionBar"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerInParent="true"
  android:text="切換到ActionBar版" />
 </RelativeLayout>

</LinearLayout>

Style樣式：無ActionBar

<style name="AppThemeNoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
 <!-- Customize your theme here. -->
 <item name="colorPrimary">@color/colorPrimary</item>
 <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
 <item name="colorAccent">@color/colorAccent</item>
</style>

主程序代碼：除了要在onCreate()里面初始化 DrawerLayout、NavigationView、Toolbar控件即initViews()，還要在onCreate()里面添加手機(jī)系統(tǒng)版本判斷和相應(yīng)的樣式適配initImmersive()

private void initViews() {
 mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawerlayout);
 mNagigationView = (NavigationView) findViewById(R.id.id_navigationview);
 mNagigationView.inflateHeaderView(R.layout.header_nav);
 mNagigationView.inflateMenu(R.menu.menu_nav);
 mToolbar = (Toolbar) findViewById(R.id.toolbar);
 mBtn = (Button) findViewById(R.id.goToActionBar);
 mToolbar.setTitle("");
 if (mToolbar != null) {
  setSupportActionBar(mToolbar);
 }
 ActionBarDrawerToggle mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close);
 mActionBarDrawerToggle.syncState();
 mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);
 mBtn.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  startActivity(new Intent(MainActivity.this, DemoActionBarActivity.class));
  }
 });
 }

private void initImmersive() {
 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
  localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
  if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
  //將側(cè)邊欄頂部延伸至status bar
  mDrawerLayout.setFitsSystemWindows(true);
  //將主頁面頂部延伸至status bar;雖默認(rèn)為false,但經(jīng)測(cè)試,DrawerLayout需顯示設(shè)置
  mDrawerLayout.setClipToPadding(false);
  }
 }
 }

這樣Drawlayout + Toolbar就實(shí)現(xiàn)了樣式改變。

②ActionBar

布局代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@color/colorPrimary"
 android:fitsSystemWindows="true"
 android:orientation="vertical">

 <!--內(nèi)容顯示布局-->
 <RelativeLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@color/c_light_white">

 <Button
  android:id="@+id/goBack"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerInParent="true"
  android:text="返回到ToolBar版" />
 </RelativeLayout>

</LinearLayout>

Style樣式：有ActionBar

<style name="AppThemeActionBar" parent="Theme.AppCompat.Light.DarkActionBar">
 <!-- Customize your theme here. -->
 <item name="colorPrimary">@color/colorPrimary</item>
 <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
 <item name="colorAccent">@color/colorAccent</item>
</style>

主程序代碼：

public class DemoActionBarActivity extends AppCompatActivity {

 private Button mBtn;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main_actionbar);

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
  localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);

 }

 initView();
 }

 private void initView() {
 mBtn = (Button) findViewById(R.id.goBack);
 mBtn.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  finish();
  }
 });
 }

}

這樣ActionBar就實(shí)現(xiàn)了樣式改變。

文章對(duì)應(yīng)的項(xiàng)目地址：ImmersiveDemo_jb51.rar

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: