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

uh0635 8年前發布 | 82K 次閱讀 Android Android開發移動開發 SlidingMenu

來自： http://www.cnblogs.com/jerehedu/p/4718043.html

一、問題描述

側邊欄是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()方法代碼和上例相同,這里不再附加

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

本文由用戶 uh0635 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1455599511667.html

Android Android開發移動開發 SlidingMenu

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

1、Activity的布局如下：

2、Activiy代碼

相關經驗

相關資訊

相關文檔

目錄