利用DrawerLayout來寫側滑菜單-劉宇

在之前呢,我們通常都是用的SlidingMenu來做側滑菜單,隨後Google也推出來自己的側滑菜單,就是DrawerLayout。下面我們利用ADT開發工具來一起開發吧。

 

源碼下載:http://download.csdn.net/detail/liuyu973971883/9596952

 

點擊左上角可以實現打開菜單,右滑也可以,打開菜單後,標題欄標題發生變化,右邊搜索圖標消失,選擇任意菜單,菜單消失,標題和搜索圖標恢復,主頁面顯示內容

效果圖:

 

首先呢,我們需要在主佈局文件activity_main.xml上將DrawerLayout作爲根節點,然後裏面分爲兩部分:一:FrameLayout節點,用於存放在菜單點擊後顯示的Fragment;二:菜單listView節點,我們的側滑菜單就用listView來做,代碼如下:

下面代碼中listView中的代碼詳解:

android:layout_width="240dp"表示側滑後顯示菜單的寬度大小

android:layout_gravity="start"表示菜單在左邊,右滑即可,如果爲end則反之

 

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_height="match_parent"
    android:layout_width="match_parent" >
    
    <!-- 存放內容的佈局 -->
    <FrameLayout 
        android:id="@+id/content_frame"
        android:layout_height="match_parent"
    	android:layout_width="match_parent" >
        
    </FrameLayout>
    
    <!-- 存放菜單的佈局,菜單裏面有什麼就在這裏加 -->
    <ListView 
        android:id="@+id/left_drawer"
        android:layout_height="match_parent"
    	android:layout_width="240dp"
    	android:layout_gravity="start"
    	android:background="#ffffcc">
        
    </ListView>
</android.support.v4.widget.DrawerLayout>

 

 

 

————————————————————————————————————————

然後我們需要創建一個類用來呈現Fragment用的,我命名爲ContentFragment,用來呈現內容,代碼如下:

 

package com.oak.learndrawerlayout;

import com.oak.learndrawerlayout.R;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class ContentFragment extends Fragment {
	private TextView tv;
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		//將fragment佈局文件加載進來
		View root = inflater.inflate(R.layout.fragment_content, container, false);
		//找到fragment中TextView,用於顯示菜單選中的內容
		tv = (TextView) root.findViewById(R.id.text);
		//獲取傳過來的信息,顯示在TextView中
		tv.setText(getArguments().getString("text"));
		return root;
	}
}


Fragment類有了,我們還需創建一個Fragment佈局文件,我命名爲fragment_content.xml,代碼如下:

 

 

<?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:orientation="vertical" >
    
    <!-- 用於區別不同的Fragment -->
	<TextView 
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"
	    android:id="@+id/text"/>
</LinearLayout>


————————————————————————————————————————

 

基本工作已經做完了,下面我們來寫代碼。

首先我先說下具體的流程以及涉及到的方法

1、獲取到佈局文件中的DrawerLayout跟佈局,listView,由於listView要顯示內容,所以我們需要爲其設置adapter,讓其菜單有內容顯示,到這裏我們運行項目,側滑菜單就已經好了,但是還沒有點擊等效果,只是簡單的能看到

2、爲側滑菜單設置點擊效果,點擊菜單項,側滑菜單消失,顯示對應的fragment

3、利用ActionBarDrawerToggle類來進行監聽側滑菜單是否打開,如果打開則進行設置標題,關閉後還原標題,並用invalidateOptionsMenu()方法重新初始化標題欄,隨後系統會自動調用onPrepareOptionsMenu方法,我們重寫這個方法,在裏面設置右邊搜索圖標的顯示和隱藏。

4、用getActionBar().setDisplayHomeAsUpEnabled(true);

getActionBar().setHomeButtonEnabled(true);這兩個方法打開標題欄左邊的按鈕設置爲可用,如果報錯則需將最低SDK設置爲14

_________________________________________________________

整個MainActivity的代碼如下:

 

package com.oak.learndrawerlayout;

import java.util.ArrayList;

import com.oak.learndrawerlayout.R;


import android.net.Uri;
import android.os.Bundle;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.content.Intent;
import android.content.res.Configuration;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends Activity implements OnItemClickListener {
	private DrawerLayout mDrawerLayout;//DrawerLayout根佈局
	private ListView mDrawerList;//側滑listview
	private ArrayAdapter<String> adapter;//listview適配器
	private ArrayList<String> list;//用於存放適配器內容
	private ActionBarDrawerToggle mDrawerToggle;//標題菜單
	protected String mTitle;//記錄初始標題
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //將應用初始標題記錄下來
        mTitle = (String) getTitle();
        //獲取DrawerLayout根佈局
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        //添加數據,以顯示在菜單listview中
        list = new ArrayList<String>();
        list.add("111");
        list.add("222");
        list.add("333");
        //配置適配器
        adapter = new ArrayAdapter<String>(this, android.R.layout.simple_expandable_list_item_1,list);
        //找到listView菜單組件
        mDrawerList = (ListView) findViewById(R.id.left_drawer);
        //將適配器綁定上去
        mDrawerList.setAdapter(adapter);
        //設置菜單監聽,當點擊菜單選項時跳轉到對應的fragment
        mDrawerList.setOnItemClickListener(this);
        
        /* 下面的mDrawerToggle是ActionBarDrawerToggle類型,如果你的
         * 應用有標題欄則使用這個方法來進行菜單打開和關閉的監聽,因爲這個類
         * 有效的將標題欄的設置和DrawerLayout結合在一起;
         * 如果你的應用沒有標題欄,則new一個DrawerListener即可,同時實現
         * onDrawerOpened和onDrawerClosed方法即可。
         */
        /* 這邊我用的是有標題欄的設置
         * 第一個參數是Activity,第二個參數是要結合的菜單根佈局
         * 第三個參數是應用左上角那個菜單按鈕圖標
         * 第四個參數和第五個參數是一個String類型的資源文件,
         * 在Vlaues的String中設置,主要功能便於視力不好的人羣進行語音播報
         */
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
				R.drawable.ic_drawer, R.string.drawer_open,
				R.string.drawer_close) {
        		//重寫onDrawerOpened方法,在菜單打開後設置應用標題
			@Override
			public void onDrawerOpened(View drawerView) {
				super.onDrawerOpened(drawerView);
				//設置應用標題
				getActionBar().setTitle("請選擇");
				//調用這個方法是因爲我們需要在菜單或關閉的時候顯示或隱藏右邊的搜索按鈕
				//在調用這個方法後,程序會自動調用onPrepareOptionsMenu方法,所以我們
				//在這裏面設置右邊搜索按鈕的顯示和隱藏
				invalidateOptionsMenu();
			}
			//重寫onDrawerClosed方法,在菜單關閉後設置應用標題爲原來的標題
			@Override
			public void onDrawerClosed(View drawerView) {
				super.onDrawerClosed(drawerView);
				getActionBar().setTitle(mTitle);
				//此處的invalidateOptionsMenu方法和上面一樣,用於更新右邊搜索按鈕的顯示和隱藏
				invalidateOptionsMenu();
			}
		};
		//爲mDrawerLayout設置打開菜單或關閉菜單監聽,將上面設置的監聽類傳入
		mDrawerLayout.setDrawerListener(mDrawerToggle);
		
		//下面的兩個方法是用於設置菜單欄左邊的按鈕可用
		getActionBar().setDisplayHomeAsUpEnabled(true);
		getActionBar().setHomeButtonEnabled(true);
    }
    //下面的判斷側滑菜單是否選中,如果選中則關閉側滑菜單,打開相應的fragment
  	@Override
  	public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
  		//new一個新的fragment
  		Fragment fragment = new ContentFragment();
  		//將側滑菜單所選中的內容顯示在fragment中
  		Bundle bundle = new Bundle();
  		bundle.putString("text", list.get(arg2));
  		//將信息發送給fragment
  		fragment.setArguments(bundle);
  		//獲取fragment管理器
  		FragmentManager fm = getFragmentManager();
  		//顯示新的fragment
  		fm.beginTransaction().replace(R.id.content_frame, fragment).commit();
  		
  		//關閉側滑菜單
  		mDrawerLayout.closeDrawer(mDrawerList);
  	}
  	
  	//標題欄按鈕選中後的業務邏輯
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
    		//將標題欄左邊的按鈕和Drawerlayout結合起來,判斷是否按下,如果true則打開側滑菜單
    		if(mDrawerToggle.onOptionsItemSelected(item)){
    			return true;
    		}
    		//這邊是標題欄右邊的搜索圖標,如果按下的話就打開系統默認瀏覽器,打開百度頁面
    		switch (item.getItemId()) {
			case R.id.web_search:
				Intent intent = new Intent();
				intent.setAction("android.intent.action.VIEW");
				intent.setData(Uri.parse("http://wwww.baidu.com"));
				startActivity(intent);
				break;
		}
	    	return super.onOptionsItemSelected(item);
    }
    
    //判斷側滑菜單是否打開,如果打開則不顯示搜索圖標,反之
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
    		boolean isDrawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
    		menu.findItem(R.id.web_search).setVisible(!isDrawerOpen);
    		
	    	return super.onPrepareOptionsMenu(menu);
    }
    
    //在Activity整個創建完畢後用mDrawerToggle,也就是我們剛剛設置的標題欄和
    //菜單欄結合的監聽類,調用syncState()方法,呈現左邊按鈕的圖標
    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
	    	super.onPostCreate(savedInstanceState);
	    	mDrawerToggle.syncState();
    }
    
    //這裏onConfigurationChanged方法是用於橫豎屏發生改變的時候,mDrawerToggle進行新的配置。
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
	    	// TODO Auto-generated method stub
	    	super.onConfigurationChanged(newConfig);
	    	mDrawerToggle.onConfigurationChanged(newConfig);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
}

 

 

 

 

 

 

 

By:Brycen Liu

 

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章