手机访问 | 设为首页 | 加入收藏 | 网站地图

当前位置:电脑中国 > 编程 > 移动开发 >

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

2017-04-26 16:28|来源:未知 |作者:dnzg |点击:

 这篇文章主要为大家详细介绍了Android实现顶部导航菜单左右滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  本文给大家介绍在Android中如何实现顶部导航菜单左右滑动效果,具体内容如下

  第一种解决方案:

  实现原理是使用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中设置左右图片的相对布局代码:

  

  android:id="@+id/linearLayout01"

  android:layout_width="match_parent"

  android:layout_height="wrap_content"

  android:orientation="horizontal" >

  

  android:id="@+id/slideMenu"

  android:layout_width="fill_parent"

  android:layout_height="35dp"

  android:background="@drawable/top_bg" />

  

  android:id="@+id/linearLayout01"

  android:layout_width="match_parent"

  android:layout_height="wrap_content"

  android:orientation="horizontal" >

  

  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" />

  

  

  android:id="@+id/linearLayout01"

  android:layout_width="match_parent"

  android:layout_height="wrap_content"

  android:orientation="horizontal" >

  

  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" />

  

  

  

  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" />

  

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

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

(责任编辑:dnzg)