备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

Android实现导航菜单左右滑动效果

2012-05-02 1761
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

今天给大家介绍在Android中实现顶部导航菜单左右滑动效果的二种解决方案。

第一种解决方案： 

在以前的一篇博文中我使用android-support-v4.jar实现了左右滑动指引效果，有兴趣的朋友可以查看： http://www.cnblogs.com/hanyonglu/archive/2012/04/07/2435589.html 

  那么今天第一个示例我仍然使android-support-v4.jar来实现菜单左右滑动效果，关于这个包的信息，不再详述，大家可以查看官方文档。

实现原理是使用android-support-v4.jar包中ViewPager控件，在ViewPager控件中设置流布局，再在流布局中设置几项TextView,给每一个TextView设置相关参数，事件等。关于ViewPager控件可以设置全屏幕滑动效果，当然也可以实现局部滑动效果，下面介绍导航菜单。

关于导航菜单，相信大家对它并不陌生，比如在新闻客户端中就经常使用左右滑动菜单来显示不同类别的新闻。网上也有关于这方面的一些示例，但是许多都是使用Tabhost来做的，实现了图片平滑动画效果，但没有实现菜单左右滑动的效果。我们先来看下本示例的效果图：

 

    

    

    

 

以上是效果图，以下让我们来看来如何才能实现，先建立程序结构，结构图如下：

 

  

 

在程序中，我们需要导入android-support-v4.jar包。在SlideMenuUtil类中设置导航菜单项标签，如下：  

复制代码
package com.slide.util; 

/**
 * 滑动菜单选项类
 * @Description: 滑动菜单选项类

 * @FileName: SlideMenuUtil.java 

 * @Package com.slide.util 

 * @Author Hanyonglu 

 * @Date 2012-4-20 下午04:51:24 

 * @Version V1.0
  */
public  class SlideMenuUtil {
     //  菜单选项
     public  static String ITEM_MOBILE = "移动";
     public  static String ITEM_WEB = "Web";
     public  static String ITEM_CLOUD = "云计算";
     public  static String ITEM_DATABASE = "数据库";
     public  static String ITEM_EMBED = "嵌入式";
     public  static String ITEM_SERVER = "服务器";
     public  static String ITEM_DOTNET = ".NET";
     public  static String ITEM_JAVA = "JAVA";
     public  static String ITEM_SAFE = "安全";
     public  static String ITEM_DOMAIN = "业界";
     public  static String ITEM_RESEASRCH = "研发";
     public  static String ITEM_MANAGE = "管理";
     //  菜单项计数器
     public  int count = 0;
}
复制代码

 

为了实现导航菜单上的左右图片，需要在main.xml布局文件中设置相对布局。

 

 

我这个示例中，是把左右导航的图片显示在文字上方，在点击上图中右三角图片时会显示下一个页面导航，具体大家可以看下面代码。 

main.xml中设置左右图片的相对布局代码：

复制代码
          < RelativeLayout 
     android:id ="@+id/linearLayout01"
            android:layout_width ="match_parent"
            android:layout_height ="wrap_content"
            android:orientation ="horizontal"   >

             < android.support.v4.view.ViewPager
                 android:id ="@+id/slideMenu"
                android:layout_width ="fill_parent"
                android:layout_height ="35dp"
                android:background ="@drawable/top_bg"   />

             < RelativeLayout
                 android:id ="@+id/linearLayout01"
                android:layout_width ="match_parent"
                android:layout_height ="wrap_content"
                android:orientation ="horizontal"   >
            

                 < ImageView
                     android:id ="@+id/ivPreviousButton"
                    android:layout_width ="wrap_content"
                    android:layout_height ="wrap_content"
                    android:layout_alignParentLeft ="true"
                    android:layout_alignParentTop ="true"
                    android:paddingTop ="10dp"
                    android:paddingLeft ="5dp"
                    android:visibility ="invisible"
                    android:src ="@drawable/previous_button"   />
            
             </ RelativeLayout >
            
             < RelativeLayout
                 android:id ="@+id/linearLayout01"
                android:layout_width ="match_parent"
                android:layout_height ="wrap_content"
                android:orientation ="horizontal"   >
                
                 < ImageView
                     android:id ="@+id/ivNextButton"
                    android:layout_width ="wrap_content"
                    android:layout_height ="wrap_content"
                    android:layout_alignParentRight ="true"
                    android:layout_alignParentTop ="true"
                    android:paddingTop ="10dp"
                    android:paddingRight ="5dp"
                    android:visibility ="invisible"
                    android:src ="@drawable/next_button"   />

                 <!--  
                <ImageView
                    android:id="@+id/ivMenuBackgroundCopy"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentTop="true"
                    android:paddingTop="2dp"
                    android:src="@drawable/menu_bg" />
                  -->
                
             </ RelativeLayout >

             < ImageView
                 android:id ="@+id/ivMenuBackground"
                android:layout_width ="wrap_content"
                android:layout_height ="wrap_content"
                android:layout_centerVertical ="true"
                android:layout_marginLeft ="2dp"
                android:layout_toRightOf ="@+id/ivPreviousButton"
                android:paddingTop ="2dp"
                android:visibility ="gone"
                android:src ="@drawable/menu_bg"   />
  </ RelativeLayout >  
复制代码

       

  代码中id为ivMenuBackground的图片是为了在点击一项菜单后设置其背景图片，菜单中默认选中第一项“移动”。

在程序结构图中的item_xxx.xml是为了在选一项菜单后显示下面的布局内容。这只是个示例，有兴趣的朋友可以改造成其它的布局内容。

我使用二维数组存储导航菜单项：

 

复制代码
         private String[][] menus = {{SlideMenuUtil.ITEM_MOBILE,SlideMenuUtil.ITEM_WEB, 
                           
    SlideMenuUtil.ITEM_CLOUD,SlideMenuUtil.ITEM_DATABASE},
                                {SlideMenuUtil.ITEM_EMBED,SlideMenuUtil.ITEM_SERVER,
                                    SlideMenuUtil.ITEM_DOTNET,SlideMenuUtil.ITEM_JAVA},
                                {SlideMenuUtil.ITEM_SAFE,SlideMenuUtil.ITEM_DOMAIN,
                                    SlideMenuUtil.ITEM_RESEASRCH,SlideMenuUtil.ITEM_MANAGE}};
复制代码

上例代码中：数组的第一维是用来显示几页数据，第二维是用来显示每一页中的几个菜单项。

 

在刚开始时，需要初始化导航菜单内容：

复制代码
       LayoutInflater inflater = getLayoutInflater();   
        menuViews =  new ArrayList<View>(); 
        SlideMenuLayout menu =  new SlideMenuLayout( this);
        
         for( int i = 0;i < menus.length;i++){
            menuViews.add(menu.getSlideMenuLinerLayout(menus[i],screenWidth));
        }
         
        main = (ViewGroup)inflater.inflate(R.layout.main,  null);
复制代码

 

其中，menuViews是用来装载页面布局控件，有3个页面menuViews就有3项。screenWidth是代表屏幕宽度。这里还使用到SlideMenuLayout类的实例方法：getSlideMenuLinerLayout(String[] menuTextViews,int layoutWidth)

menuTextViews是代表每页中有几项菜单，layoutWidth是屏幕宽度。该方法中代码如下：

复制代码
     /** 
     * 顶部滑动菜单布局
     *  @param  menuTextViews
     *  @param  layoutWidth
      */
     public View getSlideMenuLinerLayout(String[] menuTextViews, int layoutWidth){
         //  包含TextView的LinearLayout
        LinearLayout menuLinerLayout =  new LinearLayout(activity);
        menuLinerLayout.setOrientation(LinearLayout.HORIZONTAL);
        
         //  参数设置
        LinearLayout.LayoutParams menuLinerLayoutParames =  new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT, 
                LinearLayout.LayoutParams.WRAP_CONTENT,
                1);
        menuLinerLayoutParames.gravity = Gravity.CENTER_HORIZONTAL;
        
         //  添加TextView控件
         for( int i = 0;i < menuTextViews.length; i++){
            TextView tvMenu =  new TextView(activity);
             //  设置标识值
            tvMenu.setTag(menuTextViews[i]);
            tvMenu.setLayoutParams( new LayoutParams(layoutWidth / 4,30)); 
            tvMenu.setPadding(30, 14, 30, 10);
            tvMenu.setText(menuTextViews[i]);
            tvMenu.setTextColor(Color.WHITE);
            tvMenu.setGravity(Gravity.CENTER_HORIZONTAL);
            tvMenu.setOnClickListener(SlideMenuOnClickListener);
            
             //  菜单项计数
            menuUtil.count ++;

             //  设置第一个菜单项背景
             if(menuUtil.count == 1){
                tvMenu.setBackgroundResource(R.drawable.menu_bg);
            }
            
            menuLinerLayout.addView(tvMenu,menuLinerLayoutParames);
            menuList.add(tvMenu);
        }

         return menuLinerLayout;
  }
复制代码

 

上例代码只是初始化菜单效果，我是使用TextView做为每一项菜单，当然还要给每一项菜单设置事件，事件代码如下： 

 

复制代码
      //  单个菜单事件 
     OnClickListener SlideMenuOnClickListener =  new OnClickListener() {
        
        @Override
         public  void onClick(View v) {
             //  TODO Auto-generated method stub
            String menuTag = v.getTag().toString();
            
             if(v.isClickable()){
                textView = (TextView)v;
                Log.i("SlideMenu", 
                        "width：" + textView.getWidth() + 
                        "height：" + textView.getHeight());

                textView.setBackgroundResource(R.drawable.menu_bg);
                
                 for( int i = 0;i < menuList.size();i++){
                     if(!menuTag.equals(menuList.get(i).getText())){
                        menuList.get(i).setBackgroundDrawable( null);
                    }
                }
                
                 //  点击菜单时改变内容
                slideMenuOnChange(menuTag);
            }
        }
    };
复制代码

 

  上面代码中的for循环是为了清除其它菜单项的背景，slideMenuOnChange(menuTag)方法是为了显示下面的内容。该方法中代码如下：

复制代码
    //  点击时改内容 
    private  void slideMenuOnChange(String menuTag){
        LayoutInflater inflater = activity.getLayoutInflater();
        ViewGroup llc = (ViewGroup)activity.findViewById(R.id.linearLayoutContent);
        llc.removeAllViews();

         if(menuTag.equals(SlideMenuUtil.ITEM_MOBILE)){
            llc.addView(inflater.inflate(R.layout.item_mobile,  null));
        } else  if(menuTag.equals(SlideMenuUtil.ITEM_WEB)){
            llc.addView(inflater.inflate(R.layout.item_web,  null));
        } else  if(menuTag.equals(SlideMenuUtil.ITEM_CLOUD)){
            llc.addView(inflater.inflate(R.layout.item_cloud,  null));
        } else  if(menuTag.equals(SlideMenuUtil.ITEM_DATABASE)){
            llc.addView(inflater.inflate(R.layout.item_database,  null));
        } else  if(menuTag.equals(SlideMenuUtil.ITEM_EMBED)){
            llc.addView(inflater.inflate(R.layout.item_embed,  null));
        } else  if(menuTag.equals(SlideMenuUtil.ITEM_SERVER)){
            llc.addView(inflater.inflate(R.layout.item_server,  null));
        } else  if(menuTag.equals(SlideMenuUtil.ITEM_DOTNET)){
            llc.addView(inflater.inflate(R.layout.item_dotnet,  null));
        } else  if(menuTag.equals(SlideMenuUtil.ITEM_JAVA)){
            llc.addView(inflater.inflate(R.layout.item_java,  null));
        } else  if(menuTag.equals(SlideMenuUtil.ITEM_SAFE)){
            llc.addView(inflater.inflate(R.layout.item_safe,  null));
        } else  if(menuTag.equals(SlideMenuUtil.ITEM_DOMAIN)){
            llc.addView(inflater.inflate(R.layout.item_domain,  null));
        } else  if(menuTag.equals(SlideMenuUtil.ITEM_RESEASRCH)){
            llc.addView(inflater.inflate(R.layout.item_research,  null));
        } else  if(menuTag.equals(SlideMenuUtil.ITEM_MANAGE)){
            llc.addView(inflater.inflate(R.layout.item_manage,  null));
        }
  }
复制代码


 

  另外，为了设置左右导航菜单中的图片，需要在ViewPager控件中的onPageSelected监听事件中更改图片状态：

   

复制代码
        @Override  
         public  void onPageSelected( int arg0) {
             int pageCount = menuViews.size() - 1;
            pagerIndex = arg0;
            
             //  显示右边导航图片
             if(arg0 >= 0 && arg0 < pageCount){
                imageNext.setVisibility(View.VISIBLE);
            } else{
                imageNext.setVisibility(View.INVISIBLE);
            }
            
             //  显示左边导航图片
             if(arg0 > 0 && arg0 <= pageCount){
                imagePrevious.setVisibility(View.VISIBLE);
            } else{
                imagePrevious.setVisibility(View.INVISIBLE);
            }
        }  
复制代码

 

  说明：如果有多个页面，则直接显示右边导航图片:

         if(menuViews.size() > 1){ 
      imageNext.setVisibility(View.VISIBLE);
}

 

  如果到达最后一页时，则隐藏右边导航图片；如果当前页不是第一页，则直接显示左边导航图片。

另外，还需要给这两个导航图片设置单击事件，在点击时直接显示下一页菜单或是上一页菜单： 

 

复制代码
    //  右导航图片按钮事件 
   class ImageNextOnclickListener  implements OnClickListener{
        @Override
         public  void onClick(View v) {
             //  TODO Auto-generated method stub
            pagerIndex ++;
            viewPager.setCurrentItem(pagerIndex);
        }
    }
    
     //  左导航图片按钮事件
     class ImagePreviousOnclickListener  implements OnClickListener{
        @Override
         public  void onClick(View v) {
             //  TODO Auto-generated method stub
            pagerIndex --;
            viewPager.setCurrentItem(pagerIndex);
        }
    }
复制代码

 

  到此，第一种解决方案大致思路和代码就已经完了，不过我这里的实现效果是在滑动时直接显示下一页菜单，本页菜单就给隐藏掉了。有的朋友可能注意到，要想实现一点一点向左滑动或是向右滑动，而不是整个页面的滑动，也就是如果没有滑到下一页会反弹到原来的那页，就不能用这个方法了，那么就需要用到HorizontalScrollView，关于HorizontalScrollView实现的滑动菜单使用及示例，请看下面的第二种解决方案。

  另外，在本示例中我没有实现背景图片的平滑向右或是向左的动画效果，有兴趣的的朋友可以把这样的效果加上，网上有一些实现这样的效果示例。 

第二种解决方案： 

第二种解决方案我是采用的HorizontalScrollView实现的，这种布局可以实现横向滑动效果，但要注意只能有一个直接子标签。这种方案相比第一种方案要简单得多，只需要设置好布局就可以了。先看下示例运行效果：

 

    

上图中实现的导航菜单左右滑动效果可以让菜单逐步滑动，我这个示例中没有出现反弹的现象。好了，让我们看下布局代码：

复制代码
        <HorizontalScrollView 
android:layout_width= " match_parent "
        android:layout_height= " 35dp "
        android:scrollbars= " none " >

        <LinearLayout
            android:id= " @+id/linearLayoutMenu "
            android:layout_width= " match_parent "
            android:layout_height= " wrap_content "
            android:background= " @drawable/top_bg "
            android:gravity= " center_vertical " >
    
        </LinearLayout>
</HorizontalScrollView>  
复制代码

  

其中的菜单项我仍然是用TextView控件，我这里是使用代码添加的TextView，如下： 

 

复制代码
         private  void setSlideMenu(){ 
//  包含TextView的LinearLayout
        LinearLayout menuLinerLayout = (LinearLayout) findViewById(R.id.linearLayoutMenu);
        menuLinerLayout.setOrientation(LinearLayout.HORIZONTAL);
         //  参数设置
        LinearLayout.LayoutParams menuLinerLayoutParames =  new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT, 
                LinearLayout.LayoutParams.WRAP_CONTENT,
                1);
        menuLinerLayoutParames.gravity = Gravity.CENTER_HORIZONTAL;
        
         //  添加TextView控件
         for( int i = 0;i < menus.length;i++){
            TextView tvMenu =  new TextView( this);
            tvMenu.setLayoutParams( new LayoutParams(30,30)); 
            tvMenu.setPadding(30, 14, 30, 10);
            tvMenu.setText(menus[i]);
            tvMenu.setTextColor(Color.WHITE);
            tvMenu.setGravity(Gravity.CENTER_HORIZONTAL);
            menuLinerLayout.addView(tvMenu,menuLinerLayoutParames);
        }
    }
复制代码

怎么样，感觉不难吧。如果要在<HorizontalScrollView>上方标题或是下方设置内容，我们可以把<HorizontalScrollView>嵌套在其它的布局中，相信这个大家都可以做到，不再多说。

另外，还可以使用Gallery来实现导航菜单滑动，关于Gallery如何实现，本文就不再详述，有兴趣的朋友可以查询帮助文档。

最后，希望转载的朋友能够尊重作者的劳动成果，加上转载地址：http://www.cnblogs.com/hanyonglu/archive/2012/04/21/2462311.html，谢谢。
 

示例1代码下载：/Files/hanyonglu/AndroidFile/MySlideMenu.rar


文章标签：
Android开发
Java
安全
云计算
数据库
存储
关键词：
Android菜单
Android实现
Android滑动效果
一叶飘舟
目录
相关文章
tinyvvampirepudge
|
Android开发
flutter中实现仿Android端的onResume和onPause方法
flutter中实现仿Android端的onResume和onPause方法
tinyvvampirepudge
469 0
Hdnw
|
4月前
|
Android开发
[Android]DrawerLayout滑动菜单+NavigationView
[Android]DrawerLayout滑动菜单+NavigationView
Hdnw
27 0
热烈的马
|
4月前
|
XML Java Android开发
Android App手势冲突处理中上下左右滑动的处理以及侧滑边缘菜单的讲解及实战（附源码 可直接使用）
Android App手势冲突处理中上下左右滑动的处理以及侧滑边缘菜单的讲解及实战（附源码 可直接使用）
热烈的马
66 0
热烈的马
|
4月前
|
XML Java Android开发
Android Studio App开发中工具栏Toolbar、溢出菜单OverflowMenu、标签布局TabLayout的讲解及实战（实现京东App的标签导航栏，附源码）
Android Studio App开发中工具栏Toolbar、溢出菜单OverflowMenu、标签布局TabLayout的讲解及实战（实现京东App的标签导航栏，附源码）
热烈的马
58 0
Meteor.792
|
9月前
|
XML Android开发 数据格式
Android上机实验-4 菜单和对话框
Android上机实验-4 菜单和对话框
Meteor.792
108 1
Android西红柿
|
9月前
|
XML Java 测试技术
【Android开发日常】一文弄懂桌面图标快捷菜单 & 桌面小组件
开发可以定义快捷方式，以便在应用中执行特定操作。 这些快捷方式可在受支持的启动器或助理（如 Google 助理）中显示，方便用户快速启动应用中的常见任务或推荐任务。 通过本文你还将了解一些可提升快捷方式效果的最佳做法。
Android西红柿
539 1
特立独行的猫a
|
10月前
|
数据库 Android开发
重新构建711的Android项目（一），巧妙的小屏菜单查询框架实现
重新构建711的Android项目（一），巧妙的小屏菜单查询框架实现
特立独行的猫a
75 0
格蕾修
|
11月前
|
XML Java 数据格式
Android_三种常用Menu菜单（附源码）
记录一下我写菜单的代码，我写了一共有三种菜单，从常用到不常用。
格蕾修
132 0
ansondroider
|
Java Android开发
Android 7.1 导航栏增加按键, 关机菜单增加休眠选项
Android 7.1 导航栏增加按键, 关机菜单增加休眠选项
ansondroider
124 0
Android 7.1 导航栏增加按键, 关机菜单增加休眠选项
tinyvvampirepudge
|
Android开发 容器
Android实现面包屑效果，支持Fragment联动
Android实现面包屑效果，支持Fragment联动
tinyvvampirepudge
177 0

热门文章

最新文章

  • 1
    我的Android之路(持续更新总结~)
  • 2
    Android实现自定义进度条(源码+解析)
  • 3
    mPaaS常见问题之Android集成dexPatch热修复运行时候无法正常进行热更新如何解决
  • 4
    Android 面试题及答案整理，最新面试题
  • 5
    构建高效Android应用：探究Kotlin与Java的性能差异
  • 6
    构建高效Android应用：Kotlin协程的实践与优化
  • 7
    构建高效Android应用：探究Kotlin协程的优势
  • 8
    安卓适配性策略：确保应用在不同设备上的兼容性
  • 9
    安卓安全性指南：保护用户数据免受恶意攻击
  • 10
    mPaaS常见问题之pixel4 android 13 调用移动网关 报这个错如何解决
  • 1
    构建高效的Android应用：从内存优化到电池寿命
    10
  • 2
    构建高效Android应用：探究Kotlin与Java的性能差异
    13
  • 3
    构建高效的Android应用：从内存优化到电池寿命
    18
  • 4
    应用研发平台EMAS常见问题之安卓push的离线转通知目前无法收到如何解决
    25
  • 5
    构建高效Android应用：Kotlin协程的实践指南
    15
  • 6
    构建高效Android应用：Kotlin与协程的完美融合
    27
  • 7
    构建高效Android应用：探究Kotlin与Java的性能差异
    26
  • 8
    【Android平板编程】远程Ubuntu服务器code-server编程写代码
    45
  • 9
    构建高效Android应用：探究Kotlin与Java的性能差异
    27
  • 10
    android 使用GSON 序列化对象出现字段被优化问题解决方案
    16

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南

    • 相关电子书

    更多
  • 58同城Android客户端Walle框架演进与实践之路
  • Android组件化实现
  • 蚂蚁聚宝Android秒级编译——Freeline
    • 下一篇
    阿里云oss简介和使用流程