zoukankan      html  css  js  c++  java
  • 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群:JRedu技术交流 (452379712)

    作者:杰瑞教育
    出处:http://www.cnblogs.com/jerehedu/ 
    本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
     
  • 相关阅读:
    格式化数字,将字符串格式的数字,如:1000000 改为 1 000 000 这种展示方式
    jquery图片裁剪插件
    前端开发采坑之安卓和ios的兼容问题
    页面消息提示,上下滚动
    可以使用css的方式让input不能输入文字吗?
    智慧农村“三网合一”云平台测绘 大数据 农业 信息平台 应急
    三维虚拟城市平台测绘 大数据 规划 三维 信息平台 智慧城市
    农业大数据“一张图”平台测绘 大数据 房产 国土 农业 信息平台
    应急管理管理局安全生产预警平台应急管理系统不动产登记 测绘 大数据 规划 科教 三维 信息平台
    地下综合管廊管理平台测绘 大数据 地下管线 三维 信息平台
  • 原文地址:https://www.cnblogs.com/jerehedu/p/4718043.html
Copyright © 2011-2022 走看看