Android典型界面设计(5)——使用SlidingMenu和DrawerLayout分别实现左右侧边栏

2022-11-28 08:05:03

一、问题描述

　　侧边栏是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://www.cnblogs.com/jerehedu/
本文版权归烟台杰瑞教育科技有限公司和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

码农公寓

相关文章