2. 程式人生 > >Android抽屜式導航欄使用及相關類認識

Android抽屜式導航欄使用及相關類認識

阿新 • • 發佈：2018-12-26

抽屜式導航欄官方推出好久了，之前也使用過，但對這些類都是懵懵懂懂的。今天認真看了下文件才把這些類搞清楚。個人對MD的設計風格還是很喜歡的。

DrawerLayout

DrawerLayout是一個視窗內容的頂層容器（像LinearLayout、FrameLayout這些一樣），它的用處在於允許從視窗的一個或兩個垂直邊緣拉出互動式“抽屜”檢視（這個抽屜指的就是滑出的View，說抽屜還挺形象的啊）。也就是說要實現滑出View的話，你得使用這個ViewGroup作為頂層佈局。

抽屜定位和佈局使用android:layout_gravity屬性來控制，該屬性決定抽屜檢視從哪個方向滑出：左側或右側（基於支援佈局方向的平臺版本，例如有些地區閱讀方向是從右往左，要考慮這些情況可以統一使用start而不是left）。每個垂直邊緣只能有一個抽屜檢視。如果佈局在視窗的每個垂直邊緣配置多個抽屜檢視，則會在執行時丟擲異常。

  • 要使用DrawerLayout，需要將主內容檢視作為第一個子節點(因為在xml檔案中佈局將在z軸上進行覆蓋，後面的佈局覆蓋前面的，這裡必須保證滑出檢視在主檢視之上)。
  • 主內容檢視寬度和高度為match_parent而且不要使用layout_gravity。主內容檢視設定為匹配父檢視的寬度和高度， 因為在抽屜式導航欄處於隱藏狀態時， 它和平時UI介面沒什麼兩樣。
  • 在主內容檢視之後新增抽屜檢視（滑出的View），並設定layout_gravity，這決定檢視從那邊滑出,如果不設定將直接顯示而不是滑出。抽屜通常使用match_parent為高度，寬度為固定值（寬度不應超過 320dp，從而使用者始終可以看到部分主內容）。

根據“Android設計指南”，任何位於左側（基於閱讀順序）的抽屜應當是對應用程式中內容的導航，而位於右側的抽屜是對當前內容所執行的操作。

使用示例

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
 
>
    <!-- 主內容檢視，通常由抽屜中的item點選來決定使用相應的fragment進行填充 -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- 抽屜檢視，可以為任意檢視 -->
    <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"   <!-- 指定滑出方向，關鍵點 -->
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"/>
</android.support.v4.widget.DrawerLayout>

新增監聽器

  1. 抽屜中item的點選事件

    這決定於你在抽屜中所使用的View，用常規方式為它們新增點選事件即可。下面是使用ListView作為抽屜View的例子：

    //這是官方的例子。這裡對ListView.OnItemClickListener進行了一層封裝，不封裝直接使用也是可以的
private class DrawerItemClickListener implements ListView.OnItemClickListener {
   @Override
   public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
       selectItem(position);
   }
}

/* 這裡以切換fragment為例 */
private void selectItem(int position) {
   // Create a new fragment and specify the planet to show based on position
   Fragment fragment = new PlanetFragment();
   Bundle args = new Bundle();
   args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
   fragment.setArguments(args);

   // Insert the fragment by replacing any existing fragment
   FragmentManager fragmentManager = getFragmentManager();
   fragmentManager.beginTransaction()
                  .replace(R.id.content_frame, fragment)
                  .commit();

   //將item置為選中狀態，更新標題，隱藏抽屜
   mDrawerList.setItemChecked(position, true);
   setTitle(mPlanetTitles[position]);
   mDrawerLayout.closeDrawer(mDrawerList);
}

@Override
public void setTitle(CharSequence title) {
   mTitle = title;
   getActionBar().setTitle(mTitle);
}

  2. 監聽抽屜狀態

    通過下面的步驟新增監聽器：

    1. 首先繫結DrawerLayout取到它的引用。
    2. 呼叫addDrawerListener方法並傳入一個DrawerLayout.DrawerListener的例項。（注意：原有的setDrawerListener()` 方法已被移除）
    3. 複寫DrawerLayout.DrawerListener一系列方法即可。
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.addDrawerListener(new DrawerLayout.DrawerListener() {
//滑動時觸發，會多次呼叫
   @Override
   public void onDrawerSlide(View drawerView, float slideOffset) {
    Log.d(TAG, "onDrawerSlide: ");
   }
//抽屜滑出顯示時觸發
   @Override
   public void onDrawerOpened(View drawerView) {
    Log.d(TAG, "onDrawerOpened: ");
   }
//抽屜滑入隱藏時觸發
   @Override
   public void onDrawerClosed(View drawerView) {
    Log.d(TAG, "onDrawerClosed: ");
   }
//狀態改變時觸發，也就是當顯示變為隱藏，或反過來時觸發
   @Override
   public void onDrawerStateChanged(int newState) {
    Log.d(TAG, "onDrawerStateChanged: ");
   }
});

ActionBarDrawerToggle

這是一個ActionBar（Toolbar）與DrawerLayout之間的觸發器，將DrawerLayout的滑動與Actionbar進行聯動。它在抽屜狀態變化時改變Actionbar上的返回圖示（android.R.id.home），而且帶有動畫效果。

這個類是DrawerLayout.DrawerListener的子類，它有兩個構造方法，分別對應Actionbar與Toolbar。

  • ActionBarDrawerToggle(Activity activity, DrawerLayout drawerLayout, int openDrawerContentDescRes, int closeDrawerContentDescRes)
  • ActionBarDrawerToggle(Activity activity, DrawerLayout drawerLayout, Toolbar toolbar, int openDrawerContentDescRes, int closeDrawerContentDescRes)

最後兩個引數是為輔助功能（accessibility）所提供的描述性動作字串。

考慮到它是DrawerLayout.DrawerListener的子類，當然也是作為監聽器來使用的，在裡面同樣可以複寫監聽DrawerLayout狀態改變的方法。

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_main);
     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
     setSupportActionBar(toolbar);

    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(
      this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close){
        //再這複寫監聽方法，如果需要的話
        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            super.onDrawerSlide(drawerView, slideOffset);
            Log.d(TAG, "onDrawerSlide: ");
        }
    };
    drawer.addDrawerListener(mDrawerToggle);
    mDrawerToggle.syncState();
}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    //在這裡呼叫同步方法
    mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    //在視窗配置發生改變的時候同樣要同步toggle的指示器（就是那個圖示）狀態
    mDrawerToggle.onConfigurationChanged(newConfig);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // 如果mDrawerToggle的onOptionsItemSelected(item)方法返回true，那麼直接返回true
    if (mDrawerToggle.onOptionsItemSelected(item)) {
        return true;
    }
    // Handle your other action bar items...
    return super.onOptionsItemSelected(item);
}

上面說過在DrawerLayout中可以新增任意的View作為抽屜的檢視，但官方還是提供了一個標準的抽屜View，作為抽屜式導航欄（典型的MD風格），它就是NavigationView。

NavigationView繼承於FrameLayout。通常我們看到的是這樣的：

這裡寫圖片描述

xml如下：

<android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"   <!--頭部佈局檔案-->
        app:menu="@menu/activity_main_drawer"/>     <!--選單xml檔案-->

當然也可以通過程式碼的方式動態新增。

新增監聽器

通過呼叫方法：

setNavigationItemSelectedListener(NavigationView.OnNavigationItemSelectedListener listener)

示例：

navigationView.setNavigationItemSelectedListener(new NavigationView
                .OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                //通過id值與menu檔案中item的id匹配
                int id = item.getItemId();
                if (id == R.id.nav_camera) {
                    // Handle the camera action
                }
                //關閉抽屜
                DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
                drawer.closeDrawer(GravityCompat.START);
                return true;
            }
        });

最後附一個狀態列半透明的方法，此時NavigationView可以延伸到狀態列，這樣效果很好。

//透明狀態列(5.0以上系統支援)
if(Build.VERSION.SDK_INT >= 21){
    View decorView = getWindow().getDecorView();
    decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    getWindow().setStatusBarColor(Color.TRANSPARENT);
}

相關推薦

Android抽屜式導航欄使用及相關類認識

抽屜式導航欄官方推出好久了，之前也使用過，但對這些類都是懵懵懂懂的。今天認真看了下文件才把這些類搞清楚。個人對MD的設計風格還是很喜歡的。 DrawerLayout DrawerLayout是一個視窗內容的頂層容器（像LinearLayout、Frame

Android-導航欄特效-新聞類APP(仿iOS版網易新聞今日頭條的文字漸變縮放特效)

好久沒有寫文章了，慢慢的自己工作中遇到的問題不做積累，下次遇到還會忘。哎。。。。 週日無聊的單身程式設計師-唯有程式你懂的... 寫著程式聽著歌也是極好的！！ 最近工作中要實現類似 今日頭條等新聞類APP頂部導航條的效果 ，不過我們這效果切換時要加上文字顏色的漸變和縮放。

JavaWeb網上圖書商城完整項目--day03-1.圖書模塊功能介紹及相關類創建

class default package ren 書籍 logs main java getc 1 前兩天我們學習了user用戶模塊和圖書的分類模塊，接下來我們學習圖書模塊 圖書模塊的功能主要是下面的功能： 2 接下來我們創建對應的包 我們來看看對應的數據庫表t_bo

android手機導航欄

遊戲public void showSystemUI() { if (Build.VERSION.SDK_INT >= 14) { getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE

Servlet及相關類和接口

lang sage troy void inf lis 類初始化 eight spc 上一篇介紹了在Web項目中web.xml文件的配置信息，本篇主要介紹裏面非常重要的配置——Servlet配置，重點介紹與Servlet相關的幾個接口和類，包括Servlet接口、Serv

集合及相關類

集合一：集合概念與框架結構 存儲一個班學員信息，假定一個班容納20名學員使用數組特點：長度固定，遍歷速度快 可以存儲基本類型和引用類型如果並不知道程序運行時會需要多少對象，或者需要更復雜方式存儲對象——可以使用Java集合框架集合的概念：集合：Java API所提供的一系列類的實例，可以用於動

VS2010-MFC（對話框：屬性頁對話框及相關類的介紹）

name sbt simple 兩個 點擊 pct dialog hang pos 轉自：http://www.jizhuomi.com/software/164.html 一 屬性頁對話框的分類 屬性頁對話框想必大家並不陌生，XP系統

Android BottomNavigationBar導航欄

UNC https 標記 點擊 wid ext public hid class 基本屬性 setActiveColor //選中item的字體顏色 setInActiveColor //未選中Item中的顏色 setBarBackgroundColor/

android- 虛擬導航欄擋住底部內容佈局

使用2解決       問題：在實現ViewPager+Fragment+側滑欄的介面時，華為搭載Android5.0以上作業系統的手機出現底部虛擬導航欄擋住佈局。如下圖所示： 問題解決後：  嘗試 在實現這個功

Android 底部導航欄BottomNavigationView

目錄 一、簡介 一、簡介 這是material design提供的一個標準底部導航欄的實現，可以輕鬆的實現導航欄選單之間的切換與瀏覽。使用方

EasyDarwin ReflectorStream及相關類分析

EasyDarwin最主要的模組便是轉發模組，轉發模組完成從埠接收RTP資料並根據播放需求傳送到播放端。 最典型的模式便是通過ffmpeg推流到EasyDarwin埠，然後vlc客戶端請求播放，EasyDarwin將收到的RTP資料再發送給vlc。 本次博文主要便是分析轉

Android 底部導航欄(底部Tab)最佳實踐

  本文目錄.png 當開始一個新專案的時候，有一個很重要的步驟就是確定我們的APP首頁框架，也就是使用者從桌面點選APP 圖示，進入APP 首頁的時候展示給使用者的框架，比如微信，展示了有四個Tab，分別對應不同的板塊（微信、通訊錄、發現、我），現在市面出了少部分的Mate

Android底部導航欄切換介面，點選選項時文字和圖示改變顏色

** 類似底部導航欄的選單，點選圖示，文字和圖示都變顏色，Fragment切換介面詳解 ** 先看效果圖 以下是全部完整程式碼，如果有問題歡迎留言 圖示和文字佈局color_change.xml <?xml version="1.0" encodi

Android底部導航欄切換頁面填坑

public void onClick(View v) { fragmentManager = getSupportFragmentManager(); FragmentTransaction transaction = fragmentManager.beginTransaction(); switch (

Android底部導航欄實現（二）之RadioGroup

這裡簡單記錄一下Android底部導航欄通過RadioGroup+Fragment的實現。 這裡寫圖片描述 佈局： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:and

Android 底部導航欄凸出按鈕點選

       網上花時間找了很久，沒有一個人給出詳實好用的解決方案，都是隻給出瞭如何畫出來凸出的效果，卻沒有解決如何能點選凸出的部分，先上封裝好Demo的效果動圖，點選凸出按鈕，然後跳轉到下一個介面：        

Android的邊緣效應的相關類EdgeEffectCompat學習

Android的邊緣效應的相關類EdgeEffectCompat學習 Android中可以的ListView，ScrollView，RecyclerView等滑動到介面的邊界的時候會出現一個半透明的顏色邊 框。這個邊框就是Android的邊緣效果。主要是類EdgeEffect

Android底部導航欄的四種實現

現在大多數App都會用到底部導航欄，比如常見的聊天工具QQ、微信，購物App等等，有了底部導航欄，使用者可以隨時切換介面，檢視不同的內容。它的實現方式也很多，以前大多使用TabHost來實現，但是現在我們有很多更好的選擇。 使用LinearLayout +

android頂部導航欄的封裝

android中每個頁面基本上都有頂部導航，android中頂部導航有actionbar，但actionbar一方面要向下相容問題，另一方面很多時候修改樣式比較繁瑣，自定義的actionbar也需要寫很多東西。對於頂部導航，有兩個比較可行的方式： 可以自己封

小程式自學系列（零基礎學小程式）---實現底部導航欄和頂部導航欄及微信開發工具常用快捷鍵

基本實現功能 1，底部3個tab實現選中時文字和圖片改變 2，實現頁面資料的初始化和點選button時改變資料的簡單互動 3，實現日子的列印 先看效果圖 今天是我自學微信小程式的第一天，這些程式