Android實現(xiàn)頂部導(dǎo)航菜單左右滑動效果

更新時間：2020年04月08日 16:31:54 作者：Healtheon

這篇文章主要為大家詳細介紹了Android實現(xiàn)頂部導(dǎo)航菜單左右滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文給大家介紹在Android中如何實現(xiàn)頂部導(dǎo)航菜單左右滑動效果，具體內(nèi)容如下

第一種解決方案：

實現(xiàn)原理是使用android-support-v4.jar包中ViewPager控件，在ViewPager控件中設(shè)置流布局，再在流布局中設(shè)置幾項TextView,給每一個TextView設(shè)置相關(guān)參數(shù)，事件等。關(guān)于ViewPager控件可以設(shè)置全屏幕滑動效果，當(dāng)然也可以實現(xiàn)局部滑動效果，下面介紹導(dǎo)航菜單。

關(guān)于導(dǎo)航菜單，相信大家對它并不陌生，比如在新聞客戶端中就經(jīng)常使用左右滑動菜單來顯示不同類別的新聞。網(wǎng)上也有關(guān)于這方面的一些示例，但是許多都是使用Tabhost來做的，實現(xiàn)了圖片平滑動畫效果，但沒有實現(xiàn)菜單左右滑動的效果。我們先來看下本示例的效果圖：

以上是效果圖，以下讓我們來看來如何才能實現(xiàn)，先建立程序結(jié)構(gòu)，結(jié)構(gòu)圖如下：

在程序中，我們需要導(dǎo)入android-support-v4.jar包。在SlideMenuUtil類中設(shè)置導(dǎo)航菜單項標(biāo)簽，如下：

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 = "數(shù)據(jù)庫";
 public static String ITEM_EMBED = "嵌入式";
 public static String ITEM_SERVER = "服務(wù)器";
 public static String ITEM_DOTNET = ".NET";
 public static String ITEM_JAVA = "JAVA";
 public static String ITEM_SAFE = "安全";
 public static String ITEM_DOMAIN = "業(yè)界";
 public static String ITEM_RESEASRCH = "研發(fā)";
 public static String ITEM_MANAGE = "管理";
 // 菜單項計數(shù)器
 public int count = 0;
}

為了實現(xiàn)導(dǎo)航菜單上的左右圖片，需要在main.xml布局文件中設(shè)置相對布局。

這個示例中，是把左右導(dǎo)航的圖片顯示在文字上方，在點擊上圖中右三角圖片時會顯示下一個頁面導(dǎo)航，具體大家可以看下面代碼。
main.xml中設(shè)置左右圖片的相對布局代碼：

 <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的圖片是為了在點擊一項菜單后設(shè)置其背景圖片，菜單中默認選中第一項“移動”。
在程序結(jié)構(gòu)圖中的item_xxx.xml是為了在選一項菜單后顯示下面的布局內(nèi)容。這只是個示例，有興趣的朋友可以改造成其它的布局內(nèi)容。

使用二維數(shù)組存儲導(dǎo)航菜單項：

 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}};

上例代碼中：數(shù)組的第一維是用來顯示幾頁數(shù)據(jù)，第二維是用來顯示每一頁中的幾個菜單項。
在剛開始時，需要初始化導(dǎo)航菜單內(nèi)容：

 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);
 
 // 參數(shù)設(shè)置
 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);
 // 設(shè)置標(biāo)識值
 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);
 
 // 菜單項計數(shù)
 menuUtil.count ++;

 // 設(shè)置第一個菜單項背景
 if(menuUtil.count == 1){
 tvMenu.setBackgroundResource(R.drawable.menu_bg);
 }
 
 menuLinerLayout.addView(tvMenu,menuLinerLayoutParames);
 menuList.add(tvMenu);
 }

 return menuLinerLayout;
 }

上例代碼只是初始化菜單效果，我是使用TextView做為每一項菜單，當(dāng)然還要給每一項菜單設(shè)置事件，事件代碼如下：

 // 單個菜單事件 
 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);
 }
 }
 
 // 點擊菜單時改變內(nèi)容
 slideMenuOnChange(menuTag);
 }
 }
 };

上面代碼中的for循環(huán)是為了清除其它菜單項的背景，slideMenuOnChange(menuTag)方法是為了顯示下面的內(nèi)容。該方法中代碼如下：

 // 點擊時改內(nèi)容 
 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));
 }
 }

另外，為了設(shè)置左右導(dǎo)航菜單中的圖片，需要在ViewPager控件中的onPageSelected監(jiān)聽事件中更改圖片狀態(tài)：

 @Override 
 public void onPageSelected(int arg0) {
 int pageCount = menuViews.size() - 1;
 pagerIndex = arg0;
 
 // 顯示右邊導(dǎo)航圖片
 if(arg0 >= 0 && arg0 < pageCount){
 imageNext.setVisibility(View.VISIBLE);
 }else{
 imageNext.setVisibility(View.INVISIBLE);
 }
 
 // 顯示左邊導(dǎo)航圖片
 if(arg0 > 0 && arg0 <= pageCount){
 imagePrevious.setVisibility(View.VISIBLE);
 }else{
 imagePrevious.setVisibility(View.INVISIBLE);
 }
 }

說明：如果有多個頁面，則直接顯示右邊導(dǎo)航圖片:

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

如果到達最后一頁時，則隱藏右邊導(dǎo)航圖片；如果當(dāng)前頁不是第一頁，則直接顯示左邊導(dǎo)航圖片。
另外，還需要給這兩個導(dǎo)航圖片設(shè)置單擊事件，在點擊時直接顯示下一頁菜單或是上一頁菜單：

// 右導(dǎo)航圖片按鈕事件 
 class ImageNextOnclickListener implements OnClickListener{
 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 pagerIndex ++;
 viewPager.setCurrentItem(pagerIndex);
 }
 }
 
 // 左導(dǎo)航圖片按鈕事件
 class ImagePreviousOnclickListener implements OnClickListener{
 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 pagerIndex --;
 viewPager.setCurrentItem(pagerIndex);
 }
 }

到此，第一種解決方案大致思路和代碼就已經(jīng)完了，不過我這里的實現(xiàn)效果是在滑動時直接顯示下一頁菜單，本頁菜單就給隱藏掉了。有的朋友可能注意到，要想實現(xiàn)一點一點向左滑動或是向右滑動，而不是整個頁面的滑動，也就是如果沒有滑到下一頁會反彈到原來的那頁，就不能用這個方法了，那么就需要用到HorizontalScrollView，關(guān)于HorizontalScrollView實現(xiàn)的滑動菜單使用及示例，請看下面的第二種解決方案。
另外，在本示例中我沒有實現(xiàn)背景圖片的平滑向右或是向左的動畫效果，有興趣的的朋友可以把這樣的效果加上，網(wǎng)上有一些實現(xiàn)這樣的效果示例。

第二種解決方案：
第二種解決方案我是采用的HorizontalScrollView實現(xiàn)的，這種布局可以實現(xiàn)橫向滑動效果，但要注意只能有一個直接子標(biāo)簽。這種方案相比第一種方案要簡單得多，只需要設(shè)置好布局就可以了。先看下示例運行效果：

上圖中實現(xiàn)的導(dǎo)航菜單左右滑動效果可以讓菜單逐步滑動，我這個示例中沒有出現(xiàn)反彈的現(xiàn)象。好了，讓我們看下布局代碼：

<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);
 // 參數(shù)設(shè)置
 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>上方標(biāo)題或是下方設(shè)置內(nèi)容，我們可以把<HorizontalScrollView>嵌套在其它的布局中，相信這個大家都可以做到，不再多說。

另外，還可以使用Gallery來實現(xiàn)導(dǎo)航菜單滑動，關(guān)于Gallery如何實現(xiàn)，本文就不再詳述，有興趣的朋友可以查詢幫助文檔。

更多關(guān)于滑動功能的文章，請點擊專題：《Android滑動功能》

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: