Android典型介面設計(5)——使用SlidingMenu和DrawerLayout分別實現左右側邊欄

標籤：

一、問題描述

　　側邊欄是Android應用中十分常見的介面效果，可隨主屏在左側或右側聯動，是特別適應手機等小螢幕特性的典型介面設計方案之一，常用作應用的操作菜單，

　　實現側邊欄可以使用第三方組件slidingmenu實現和Google官方提供的滑動抽屜組件DrawerLayout實現，下面就分別使用這兩種方法實現左右滑動的側邊欄

二、先使用之前講過的ActionBar製作標題列

 

　　這裡只貼出代碼，相關知識請查閱 《Android典型介面設計(4)——使用ActionBar+Fragment實現tab切換》

protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initActionBar();    }private void initActionBar(){        actionBar=super.getActionBar();        actionBar.show();        actionBar.setDisplayShowHomeEnabled(true);        actionBar.setDisplayShowTitleEnabled(false);        actionBar.setDisplayHomeAsUpEnabled(true);        actionBar.setHomeAsUpIndicator(R.drawable.com_btn);        actionBar.setDisplayShowCustomEnabled(true);        TextView tvTitle=new TextView(this);        tvTitle.setText("主  頁");        tvTitle.setTextColor(Color.WHITE);        tvTitle.setTextSize(18);        tvTitle.setGravity(Gravity.CENTER);        LayoutParams params=new  LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);        tvTitle.setLayoutParams(params);        actionBar.setCustomView(tvTitle);    }

ActionBar樣式：

<style name="actionbar_style" parent="@android:style/Widget.Holo.Light.ActionBar">        <item name="android:background">#218FCC</item>           <item name="android:actionBarSize">150dip</item><!—隱藏ActionBar 的ICON表徵圖-- >           <item name="android:icon">@android:color/transparent</item>           <item name="android:itemPadding">20dip</item>     </style><!—activity使用此樣式--><style name="AppTheme" parent="AppBaseTheme">         <item name="android:actionBarStyle">@style/actionbar_style</item></style>

菜單：（右側頭像按鈕）

<menu xmlns:android="http://schemas.android.com/apk/res/android" >   <item        android:id="@+id/usersetting"        android:orderInCategory="100"        android:showAsAction="ifRoom"        android:icon="@drawable/biz_tie_user_avater_default_common"        /></menu>

三、使用slidingmenu實現

private SlidingMenu slidingMenu;    private void initSlidingMenu(){        slidingMenu=new SlidingMenu(this);//建立側邊欄        //設定菜單模式，LEFT(僅左側邊欄) RIGHT(僅右側邊欄) //LEFT_RIGHT(左右側邊欄)        slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);        slidingMenu.setMenu(R.layout.menu_left_layout);//設定第一個（左）側邊欄        //設定第二個(右)側邊欄,若設定LEFT_RIGHT模式使用該方法設定右側邊欄        slidingMenu.setSecondaryMenu(R.layout.navigation_layout);        //將側邊欄粘連到Activity上        slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);        //設定側邊欄陰影大小        slidingMenu.setShadowWidth(10);        //設定偏離距離        slidingMenu.setBehindOffsetRes(R.dimen.sliding_menu_offset);        //全螢幕模式，全屏滑動都可開啟        slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);    }

在onCreate()中調用initSlidingMenu()方法實現SlidingMenu的構建

protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initActionBar();initSlidingMenu();    }

到此滑動左右螢幕就出現側邊欄了，下面實現單擊Actionbar兩端按鈕實現左右側邊欄的顯示控制，代碼如下：

@Override    public boolean onOptionsItemSelected(MenuItem item){        switch(item.getItemId()){        case android.R.id.home://左側home地區            slidingMenu.toggle();//交替顯示或隱藏側邊欄            break;        case R.id.usersetting://右側按鈕菜單            if(!slidingMenu.isSecondaryMenuShowing()){                slidingMenu.showSecondaryMenu();//顯示右側欄            }else{                slidingMenu.toggle();//通過toggle方法隱藏右側邊欄            }            break;        }        return super.onOptionsItemSelected(item);    }

Ok完成，至於左右側邊欄的布局檔案menu_left_layout 和navigation_layout，大家可自己簡單設計一下或見原始碼

四、使用drawerLayout實現

　　drawerLayout的使用也很方便，drawerLayout其實是一個布局控制項，跟LinearLayout等控制項是一種東西，但是drawerLayout帶有滑動的功能。只要按照drawerLayout的規定布局方式寫完布局，就能有側滑的效果。drawerLayout分為側邊菜單和主內容區兩部分，側邊菜單可以根據手勢展開與隱藏。

　　有兩點要注意：主內容區的布局代碼要放在側滑菜單布局的前面,這可以協助DrawerLayout判斷誰是側滑菜單，誰是主內容區；側滑菜單的部分通過設定layout_gravity屬性，決定側滑菜單是在左邊還是右邊 ，layout_gravity屬性為start表示左側邊欄，end表示右側邊欄

1、Activity的布局如下：

<?xml version="1.0" encoding="utf-8"?><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" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical" >        <TextView            android:layout_width="match_parent"            android:layout_height="match_parent"            android:gravity="center"            android:text="這是主介面" />    </LinearLayout>    <include layout="@layout/menu_left_layout"          android:layout_width="200dp"    android:layout_height="match_parent"  android:layout_gravity="start"        />    <include        android:id="@+id/right_sliding"         android:layout_width="240dp"    android:layout_height="match_parent"         layout="@layout/navigation_layout"        android:layout_gravity="end"        /></android.support.v4.widget.DrawerLayout>   

　　menu_left_layout 和navigation_layout 為左右側邊欄的布局檔案

　　2、Activiy代碼

public class MainActivity extends Activity {    private DrawerLayout drawerLayout;    private ActionBarDrawerToggle toggle;    private ActionBar actionBar;    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initActionBar();        initDrawerLayout();    }private void initDrawerLayout(){        drawerLayout=(DrawerLayout)super.findViewById(R.id.drawer_layout);        drawerLayout.setScrimColor(Color.TRANSPARENT);        toggle=new ActionBarDrawerToggle(this,drawerLayout,                R.drawable.back_move_details_normal,R.string.drawer_open                ,R.string.drawer_close){                    public void onDrawerClosed(View drawerView) {                        super.onDrawerClosed(drawerView);                    }                    public void onDrawerOpened(View drawerView) {                        super.onDrawerOpened(drawerView);                    }                    };        drawerLayout.setDrawerListener(toggle);    }     private void toggleLeftSliding(){//該方法控制左側邊欄的顯示和隱藏        if(drawerLayout.isDrawerOpen(Gravity.START)){            drawerLayout.closeDrawer(Gravity.START);        }else{            drawerLayout.openDrawer(Gravity.START);        }    }    private void toggleRightSliding(){//該方法控制右側邊欄的顯示和隱藏        if(drawerLayout.isDrawerOpen(Gravity.END)){            drawerLayout.closeDrawer(Gravity.END);        }else{            drawerLayout.openDrawer(Gravity.END);        }    }    @Override    public boolean onOptionsItemSelected(MenuItem item){        switch(item.getItemId()){        case android.R.id.home:            toggleLeftSliding();            break;        case R.id.usersetting:            toggleRightSliding();            break;        }                    return super.onOptionsItemSelected(item);    }}}

OK完成，initActionBar()方法代碼和上例相同,這裡不再附加

 

　　想要瞭解更多內容的小夥伴，可以點擊查看源碼，親自運行測試。

　　疑問諮詢或技術交流，請加入官方QQ群： （452379712）

 

傑瑞教育
出處：http://blog.csdn.net/jerehedu/ 
本文著作權歸煙台傑瑞教育科技有限公司和CSDN共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，否則保留追究法律責任的權利。 

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

Android典型介面設計(5)——使用SlidingMenu和DrawerLayout分別實現左右側邊欄