1. 程式人生 > >Android 官方自帶側滑選單DrawerLayout

Android 官方自帶側滑選單DrawerLayout

【DrawerLayout】

1、在Android的support庫中增加了一個專門用於建立側滑選單的元件DrawerLayout,接下來我們就講解一下怎樣使用這個原生的元件建立一個仿推酷的應用

2、先來看看使用DrawerLayout的步驟:

①在佈局檔案中新增<android.support.v4.widget.DrawerLayout> 根元素

②在這個根元素中首先新增一個 內容檢視元件,比如:我們新增一個<FrameLayout>容器

③再在這個根元素中新增側滑選單檢視元件,一般來說就是一個ListView元件

④為ListView設定Adapter,和點選事件監聽器

⑤為DrawerLayout新增 開、關 狀態監聽器

3、只要遵循上面的幾步就能夠完成一個側滑選單的建立,非常的簡單,下面我們就通過模仿推酷客戶端,一步一步的說明怎樣建立側滑選單

【仿推酷】—— 原始碼已經上傳郵箱

【效果】

  

【功能描述】

1、開啟應用的時候,主介面如圖1,ActionBar沒有顯示應用圖示,只顯示“推酷”兩個字

2、ActionBar右邊有一個綠色的圖示是一個action選單,當我們開啟側滑選單的時候這個選單圖示就會隱藏,如圖2

3、當我們點選了側滑選單中的某項時,ActionBar中的標題內容顯示為當前選中的專案的標題

4、同時,如果我們已經選中了某一項,達到了圖3所示的狀態,這時我們在開啟側滑選單,這時ActionBar中的標題內容改為“推酷”,也就是說,當側滑選單給關閉的時候,ActionBar中的標題是選中的專案的標題,當側滑選單處於開啟狀態的時候,ActionBar上的標題顯示為全域性的“推酷”,同事那個綠色的action選單圖示被隱藏

5、當側滑選單處於開啟狀態的時候,如果我麼單擊了手機上的“返回”物理按鍵的話,側滑選單關閉

【建立步驟】

步驟一:在主佈局檔案中建立DrawerLayout根元素佈局——avtivity_main.xml檔案

複製程式碼
<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">
    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/content"/>
    <!-- The navigation drawer -->
    <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="#33333333"
        android:dividerHeight="0dp"
        android:background="#ffeeeeee"
        android:scrollbars="none"/>
</android.support.v4.widget.DrawerLayout>
複製程式碼

注意事項:

1、必須指定選單檢視元件ListView必須指定 android:layout_gravity屬性,當屬性值設為left的話側滑選單位於左邊,否則位於右面,由於有的語言是從右到左寫,那麼只要指定屬性值為 start 的話,android 會自行將側滑選單放在書寫起始的一邊 

2、android:layout_width 指定了側滑選單的寬度,但是不能夠超過320dp,否則會覆蓋整個檢視,就不好看了

3、必須先放內容檢視的控制元件,之後放側滑選單檢視控制元件

步驟二:建立側滑選單ListView的Adapter——DrawerAdapter.java檔案

複製程式碼
 1 package com.example.navigaterdrawer;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 
 6 import android.content.Context;
 7 import android.view.LayoutInflater;
 8 import android.view.View;
 9 import android.view.ViewGroup;
10 import android.widget.BaseAdapter;
11 import android.widget.TextView;
12 
13 /**定義選單項類*/
14 class TuiCoolMenuItem {
15     String menuTitle ;
16     int menuIcon ;
17     
18     //構造方法
19     public TuiCoolMenuItem(String menuTitle , int menuIcon ){
20         this.menuTitle = menuTitle ;
21         this.menuIcon = menuIcon ;
22     }
23     
24 }
25 /**自定義設定側滑選單ListView的Adapter*/
26 public class DrawerAdapter extends BaseAdapter{
27     
28     //儲存側滑選單中的各項的資料
29     List<TuiCoolMenuItem> MenuItems = new ArrayList<TuiCoolMenuItem>( ) ;
30     //構造方法中傳過來的activity
31     Context context ;
32     
33     //構造方法
34     public DrawerAdapter( Context context ){
35         
36         this.context = context ;
37         
38         MenuItems.add(new TuiCoolMenuItem("", R.drawable.peng)) ;
39         MenuItems.add(new TuiCoolMenuItem("推薦", R.drawable.advise)) ;
40         MenuItems.add(new TuiCoolMenuItem("發現", R.drawable.find)) ;
41         MenuItems.add(new TuiCoolMenuItem("主題", R.drawable.theme)) ;
42         MenuItems.add(new TuiCoolMenuItem("站點", R.drawable.point)) ;
43         MenuItems.add(new TuiCoolMenuItem("搜尋", R.drawable.search)) ;
44         MenuItems.add(new TuiCoolMenuItem("離線", R.drawable.leave)) ;
45         MenuItems.add(new TuiCoolMenuItem("設定", R.drawable.set)) ;
46     }
47 
48     @Override
49     public int getCount() {
50         
51         return MenuItems.size();
52 
53     }
54 
55     @Override
56     public TuiCoolMenuItem getItem(int position) {
57         
58         return MenuItems.get(position) ;
59     }
60 
61     @Override
62     public long getItemId(int position) {
63         
64         return position ;
65     }
66 
67     @Override
68     public View getView(int position, View convertView, ViewGroup parent) {
69         
70         View view = convertView ;
71         if(view == null){
72             view =LayoutInflater.from(context).inflate(R.layout.menudrawer_item, parent, false);
73             ((TextView) view).setText(getItem(position).menuTitle) ;
74             ((TextView) view).setCompoundDrawablesWithIntrinsicBounds(getItem(position).menuIcon, 0, 0, 0) ;
75         }
76         return view ;
77     }
78 
79 }
複製程式碼

menudrawer_item.xml檔案

複製程式碼
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/item_style">
    
</TextView>
複製程式碼

styles.xml檔案

複製程式碼
 1 <resources>
 2 
 3     <!--
 4         Base application theme, dependent on API level. This theme is replaced
 5         by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
 6     -->
 7     <style name="AppBaseTheme" parent="android:Theme.Light">
 8         <!--
 9             Theme customizations available in newer API levels can go in
10             res/values-vXX/styles.xml, while customizations related to
11             backward-compatibility can go here.
12         -->
13     </style>
14 
15     <!-- Application theme. -->
16     <style name="AppTheme" parent="AppBaseTheme">
17         <!-- All customizations that are NOT specific to a particular API-level can go here. -->
18     </style>
19     <style name="item_style">
20         <item name="android:textAppearance">?android:attr/textAppearance</item>
21         <item name="android:textSize">18sp</item>
22         <item name="android:paddingLeft">16dp</item>
23         <item name="android:paddingRight">32dp</item>
24         <item name="android:paddingTop">10dp</item>
25         <item name="android:paddingBottom">10dp</item>
26         <item name="android:drawablePadding">16dp</item>        
27         <item name="android:gravity">center_vertical</item>
28     </style>
29 
30 </resources>
複製程式碼

步驟三:主Activity檔案——MainActivity.java

1、非常明顯的是:接下來我們要為ListView設定 Adapter 以及 設定點選事件監聽器,在單擊事件監聽器中我們實現的是:用Fragment來替換FrameLayout

這些都非常的簡單,不再贅述

2、之後,我們就要為DrawerLayout新增選單開、關狀態監聽器,為的是能夠動態的改變ActionBar中的顯示內容,這裡面就要注意一下:

①為了能夠監聽側滑選單的開關狀態我們需要呼叫DrawerLayout的setDrawerListener()方法,之後將實現了DrawerLayout.DrawerListener介面的例項物件當做引數,傳進去,這個DrawerLayout.DrawerListener監聽器中有兩個方法onDrawerOpened()和DrawerClosed(),當側滑選單開、關時,會回撥他們之中的某一個

②如果你監聽側滑選單的開、關事件,並不是為了和ActionBar發生關係,是為了處理其他的事件,那麼使用上面的方法就行了

③如果你監聽側滑選單的開、關事件,就是為了和ActionBar發生關係,動態的更改ActionBar的內容,那麼鼓勵使用ActionBarDrawerToggle類 ,這個類繼承了上面的DrawerLayout.DrawerListener介面,所以你依然能夠重寫上面的兩個回撥方法,之後呼叫DrawerLayout的setDrawerListener()方法,與此同時,正如你下面將會看到的那樣:使用ActionBarDrawerToggle類作為監聽器是因為:它已經將ActionBar上的應用圖示單擊事件和側滑選單的開關繫結好了,無需在人為的進行這方面的邏輯控制;而且使用它能夠非常方便的進行“指示圖示”的更換,只需要在建立這個類的物件的時候,將要使用的圖示作為構造引數傳進去即可

④當然,一般我們就使用google自帶的預設的“指示圖示”——三橫

⑤需要注意的是:為了使ActionBarDrawerToggle監聽器能夠適應於Activity的生命週期,我們需要在Activity中的幾個方法中新增一些語句,在下面的程式中我們會提到,非常的簡單

複製程式碼
  1 package com.example.navigaterdrawer;
  2 
  3 import android.app.Activity;
  4 import android.app.Fragment;
  5 import android.app.FragmentManager;
  6 import android.app.FragmentTransaction;
  7 import android.content.res.Configuration;
  8 import android.os.Bundle;
  9 import android.support.v4.app.ActionBarDrawerToggle;
 10 import android.support.v4.widget.DrawerLayout;
 11 import android.view.Menu;
 12 import android.view.MenuItem;
 13 import android.view.View;
 14 import android.widget.AdapterView;
 15 import android.widget.ListView;
 16 import android.widget.Toast;
 17 
 18 public class MainActivity extends Activity {

            
           

相關推薦

Android 官方選單DrawerLayout

【DrawerLayout】 1、在Android的support庫中增加了一個專門用於建立側滑選單的元件DrawerLayout,接下來我們就講解一下怎樣使用這個原生的元件建立一個仿推酷的應用 2、先來看看使用DrawerLayout的步驟:

android官方選單DrawerLayout詳解

轉載地址:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0925/1713.html drawerLayout是Support Library包中實現了側滑選單效果的控制元件,可以說drawerLayout是因為

Android 打造完美的選單/View控制元件

一.概述 在App中,經常會出現側滑選單,側滑滑出View等效果,雖然說Android有很多第三方開源庫,但是實際上 咱們可以自己也寫一個自定義的側滑View控制元件,其實不難,主要涉及到以下幾個要點: 1.對Android中Window類中的DecorView有所瞭解 2.對Scroller類實

android官方下拉重新整理功能

最近想寫下拉重新整理功能,網上找的第三方框架最著名的pullToRefresh也早在2013年停止維護了,偶然間發現谷歌公司早已推出了自家的下拉重新整理功能,位於v4包中,效果請看下圖:

Android之十SlidingMenu選單的實現分析

package com.example.walkerlogin1.view; import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.

Android定義控制元件----繼承ViewGroup選單3,普通選單,新增選單切換按鈕(完結)

專案結構: 思路: 對外暴露一個選單開啟和關閉選單的方法toggle 當開啟時this.smoothScrollTo(0, 0);滑動選單顯示 當關閉時this.smoothScrollTo(mMenuWidth, 0);選單隱藏

Android 高仿 QQ5.0 選單效果 定義控制元件來襲

上一篇部落格帶大家實現了:Android 自定義控制元件打造史上最簡單的側滑選單 ,有兄弟看了以後說,你這滑動選單過時了呀~QQ5.0的效果還不錯~~嗯,的確,上一篇也承諾過,稍微修改上一篇的程式碼,實現QQ5.0側滑選單~~好了,下面就開始為大家展示寫一個類QQ的側滑有多e

Android定義View之仿QQ選單實現

最近,由於正在做的一個應用中要用到側滑選單,所以通過查資料看視訊,學習了一下自定義View,實現一個類似於QQ的側滑選單,順便還將其封裝為自定義元件,可以實現類似QQ的側滑選單和抽屜式側滑選單兩種選單。 下面先放上效果圖: 我們這裡的側

Android DrawerLayout+ToolBar+NavigationView實現選單效果,沉浸式狀態列

最近看到很多APP都使用了Android Support Library的DrawerLayout實現側滑效果,下面我就自己寫了一個Demo來實現,其中還用到了Toolbar,NavigationView,沉浸式狀態列效果 先看效果圖 新增依賴

Android 高大上的菜單DrawerLayout,解決了不能全屏滑動的問題

ces 部分 int 項目 菜單 nsh ger res pil DrawerLayout預覽 DrawerLayout主要功能就是 實現側滑菜單效果的功能,並且可以通過增加一些設置來實現高大上的效果,那麽就請看動態圖: 註

Android-選單(三)

新整理的仿QQ側滑選單實現的例子,使用android.support.v4.widget.DrawerLayout和android.support.design.widget.NavigationView實現的,下面先上兩張效果圖: 效果圖也看到了,那麼咱們廢話不多說,直接上程式碼:

Android--選單

效果: ---向右滑動--> 實現: 自定義view: public class LeftMenuView extends HorizontalScrollView { /**定義橫向滾動條佈局*/ private LinearLayout mScrollVi

Android : tablayout +選單 + 豎立的tablayout +資料庫增刪改查+XListView+PullToRefresh 綜合

側拉選單 一個XListview載入,一個是PullToRefresh重新整理 一個是本地資料的重新整理一個是網路資料的重新整理 資料庫的增刪查 需要用到的許可權 <uses-permission android:name="android.permission.I

原生Android 選單實踐(部分)

此為第一個製作側滑選單的實踐 。 此部分僅僅為部分實踐: 僅缺menu的字串佈局,以及需要修改的MainActivity.java檔案,也是需要主要修改的地方。 從使用MD設計-進行側滑選單的製作(activity_main.xml部分)仍然可看。 當中為了向前相容以及使用Material Desig

android 選單

這裡使用的是md的NavigationView配合DrawerLayout完成側滑效果。 佈局檔案如下所示,drawerlayout作為最外面的佈局,第一個佈局是主頁面佈局,第二個則是側滑欄的佈局。   其中headerLayout是側滑欄的頭部,頭部佈局如下: &l

Toolbar 加 DrawerLayout 簡單使用實現選單

佈局檔案 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout android:id="@+id/dw" android:layout_width="matc

android手把手教你實現QQ選單效果

側滑選單功能非常常見,借鑑學習了之後,自己總結記錄一下,下面實現一種最簡單的側滑選單,後面再修改程式碼實現不同的側滑選單效果 首先是第一種效果 第一種效果是繼承ViewGroup,需要我們自己來測量、滑動處理等。 一、首先講解一下思路: 1、繼承GroupView重

Android 實現選單-design

google提供的Design開發包裡,有很多實用好看的新控制元件,這裡介紹下使用DrawerLayout+NavigationView實現側滑選單效果 要使用Design包,只要在專案的build.gradle中新增下依賴就好(記得更新SDK到最新版本)

DrawerLayout仿QQ選單

DrawerLayout是Support Library包中實現了側滑選單效果的控制元件,drawerLayout分為側邊選單和主內容區兩部分,側邊選單可以根據手勢展開與隱藏(drawerLayout自身特性),主內容區的內容可以隨著選單的點選而變化(這需要使用

Android區域性動態高斯模糊以及選單配合高斯模糊

最近在專案開發中遇到一個需求,需要滿足兩種情況: 1.在應用的某個介面會彈出透明對話方塊,對話方塊的背景高斯模糊,介面其他部分正常; 2.在介面中有一個透明側拉選單,在側拉選單滑動的過程總,選單背景會隨之高斯模糊; 當時碰