Android實現頂部導覽功能表左右滑動效果_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中設定左右圖片的相對布局代碼：
        

 <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
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。