您当前的位置: 首页 >  xiangzhihong8 android

android顶部导航条

xiangzhihong8 发布时间:2014-02-20 09:35:45 ,浏览量:6


  今天给大家介绍在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中设置左右图片的相对布局代码:

         

            

            
            

                
            
            
            
            
                
                

                
                
            

            
    

  

  代码中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(); 
        SlideMenuLayout menu =  new SlideMenuLayout( this);
        
         for( int i = 0;i 

        
    
        
 

  

  其中的菜单项我仍然是用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 
关注
打赏
查看更多评论

xiangzhihong8

暂无认证

  • 6浏览

    0关注

    1319博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文
立即登录/注册

微信扫码登录