歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

Android使用DrawerLayout創建左右兩個抽屜菜單

在Android support.v4 中有一個抽屜視圖控件DrawerLayout。使用這個控件,可以生成通過在屏幕上水平滑動打開或者關閉菜單,能給用戶一個不錯的體驗效果。

最近在項目中,設計中有用到這個效果,但是是左右兩邊都能劃出這樣的一個菜單效果。經過使用發現,在xml布局中和代碼中,幾乎是添加添加同樣的代碼,就可以實現這種作用兩種菜單的效果。

效果圖如下:

左邊拉出菜單:

右邊拉出菜單效果:

具體的實現方法如下,結合代碼文件,跟大家分享一下:

1.

a.

主頁布局文件:

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/transparent" >   <RelativeLayout android:id="@+id/main_content_frame_parent" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/transparent" > <!-- 下層顯示的主要內容 --> <FrameLayout android:id="@+id/main_content_frame" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" android:scrollbars="vertical" > </FrameLayout> </RelativeLayout> <!-- 左側滑動欄 --> <RelativeLayout android:id="@+id/main_left_drawer_layout" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="@android:color/transparent" android:paddingTop="50dp" > </RelativeLayout> <!-- 右側滑動欄 -->   <RelativeLayout android:id="@+id/main_right_drawer_layout" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="end" android:background="@android:color/transparent" android:paddingTop="50dp" > </RelativeLayout>   </android.support.v4.widget.DrawerLayout>

如上,使用DrawerLayout需要在布局文件跟目錄中引用,v4包中的DrawerLayout標簽,並且寬和高,都設置為match_parent.裡面framelayout用來現實菜單收起時,下層頁面的布局。

而main_left_drawer_layout和main_right_drawer_layout為左右兩個抽屜菜單對應的父layout,需要注意的是,在DrawerLayout中,從左側開始使用android:layout_gravity="start",從右側開始,使用 android:layout_gravity="end"。 

b.主布局代碼文件:


package com.demo.drawlayout;

 

import android.os.Bundle;

import android.support.v4.app.ActionBarDrawerToggle;

import android.support.v4.app.FragmentActivity;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentTransaction;

import android.support.v4.widget.DrawerLayout;

import android.view.View;

import android.widget.RelativeLayout;

import android.widget.TextView;

 

 

public class MainFrameLayout extends FragmentActivity {

    // 抽屜菜單對象

    private ActionBarDrawerToggle drawerbar;

    public DrawerLayout drawerLayout;

    private TestFragment testFragment;

    private RelativeLayout left_menu_layout, right_xiaoxi_layout;

   

    private TextView text;

    @Override

    protected void onCreate(Bundle arg0) {

        super.onCreate(arg0);

        setContentView(R.layout.main_frame_activity);

        initView();

        initEvent();

    }

    public void initView(){

            testFragment = new TestFragment();

            FragmentManager fragmentManager = getSupportFragmentManager();

            FragmentTransaction f_transaction = fragmentManager.beginTransaction();

            f_transaction.replace(R.id.main_content_frame_parent, testFragment);

            f_transaction.commitAllowingStateLoss();

            initLeftLayout();

            initRightLayout();

    }

    public void initLeftLayout(){

        drawerLayout = (DrawerLayout) findViewById(R.id.main_drawer_layout);

        //設置透明

        drawerLayout.setScrimColor(0x00000000);

        //左邊菜單

        left_menu_layout = (RelativeLayout) findViewById(R.id.main_left_drawer_layout);

        View view2 = getLayoutInflater().inflate(R.layout.menu_layout, null);

        text=(TextView)view2.findViewById(R.id.text);

        text.setText("左邊測試菜單");

        left_menu_layout.addView(view2);

    }

    public void initRightLayout(){

        //左邊菜單

        right_xiaoxi_layout = (RelativeLayout) findViewById(R.id.main_right_drawer_layout);

        View view = getLayoutInflater().inflate(R.layout.xiaoxi_layout, null);

        text=(TextView)view.findViewById(R.id.text);

        text.setText("右邊測試菜單");

        right_xiaoxi_layout.addView(view);

    }

    private void initEvent() {

        drawerbar = new ActionBarDrawerToggle(this, drawerLayout, R.drawable.ic_launcher, R.string.open, R.string.close) {

                //菜單打開

            @Override

            public void onDrawerOpened(View drawerView) {

               

                super.onDrawerOpened(drawerView);

            }

                      // 菜單關閉

            @Override

            public void onDrawerClosed(View drawerView) {

 

                super.onDrawerClosed(drawerView);

            }

        };

        drawerLayout.setDrawerListener(drawerbar);

    }

        //左邊菜單開關事件

    public void openLeftLayout() {

        if (drawerLayout.isDrawerOpen(left_menu_layout)) {

            drawerLayout.closeDrawer(left_menu_layout);

        } else {

            drawerLayout.openDrawer(left_menu_layout);

 

        }

    }

 

    // 右邊菜單開關事件

    public void openRightLayout() {

        if (drawerLayout.isDrawerOpen(right_xiaoxi_layout)) {

            drawerLayout.closeDrawer(right_xiaoxi_layout);

        } else {

            drawerLayout.openDrawer(right_xiaoxi_layout);

        }

    }

}

代碼很簡單,相應的地方都有注釋。這裡就不羅嗦了。

主要說一下:抽屜菜單的開關事件就是,把抽屜視圖添加到ActionBarDrawerToggle開關中,通關它的開關事件來控制菜單的打開和關閉,同樣,一個菜單需要注冊一個事件,兩個菜單,也是把菜單加到這個ActionBarDrawerToggle 中進行管理。它會自行處理左右兩個菜單的打開和關閉,而不會出現同時打開的現象,這一點這個控件設計的還是挺棒的。

余下的工作,就是大家根據自己的需要,自己寫左右菜單裡面的內容和事件了。另外,以前看到一個帖子說,在DrawerLayout中使用listview,listview會無效,這個說法好像是不成立的,至少,在我們的項目中,菜單中添加listview或者其他常用控件,點擊事件都不會受到影響。

相關的代碼在下面的Linux公社資源網站中,感興趣的朋友,可以下載互相學習一下。

------------------------------------------分割線------------------------------------------

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2014年資料/8月/13日/Android使用DrawerLayout創建左右兩個抽屜菜單

下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm

------------------------------------------分割線------------------------------------------

最簡單的Ubuntu Touch & Android 雙系統安裝方式 http://www.linuxidc.com/Linux/2014-01/94881.htm

在Nexus上實現Ubuntu和Android 4.4.2 雙啟動 http://www.linuxidc.com/Linux/2014-05/101849.htm

Ubuntu 14.04 配置 Android SDK 開發環境 http://www.linuxidc.com/Linux/2014-05/101039.htm

64位Ubuntu 11.10下Android開發環境的搭建(JDK+Eclipse+ADT+Android SDK詳細) http://www.linuxidc.com/Linux/2013-06/85303.htm

Ubuntu 14.04 x64配置Android 4.4 kitkat編譯環境的方法 http://www.linuxidc.com/Linux/2014-04/101148.htm

Ubuntu 12.10 x64 安裝 Android SDK http://www.linuxidc.com/Linux/2013-03/82005.htm

更多Android相關信息見Android 專題頁面 http://www.linuxidc.com/topicnews.aspx?tid=11

Copyright © Linux教程網 All Rights Reserved