558      技術社區[雲棲]

android頂部導航條

　　今天給大家介紹在Android中實現頂部導航菜單左右滑動效果的二種解決方案。

　　第一種解決方案： 

　　在以前的一篇博文中我使用android-support-v4.jar實現了左右滑動指引效果，有興趣的朋友可以查看：https://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:
                    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);
            }
        }  

 　　說明：如果有多個頁麵，則直接顯示右邊導航圖片:

 　　如果到達最後一頁時，則隱藏右邊導航圖片；如果當前頁不是第一頁，則直接顯示左邊導航圖片。

　　另外，還需要給這兩個導航圖片設置單擊事件，在點擊時直接顯示下一頁菜單或是上一頁菜單： 

   // 右導航圖片按鈕事件 
   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如何實現，本文就不再詳述，有興趣的朋友可以查詢幫助文檔。

　　最後，希望轉載的朋友能夠尊重作者的勞動成果，加上轉載地址：https://www.cnblogs.com/hanyonglu/archive/2012/04/21/2462311.html，謝謝。
 

　　示例1代碼下載：/Files/hanyonglu/AndroidFile/MySlideMenu.rar


　　示例2代碼下載：/Files/hanyonglu/AndroidFile/MyScrollViewMenu.rar

　　完畢。^_^

最後更新：2017-04-03 12:55:09

  上一篇： JavaCore extends Plugin

  下一篇： C++編程規範之44：優先編寫非成員非友元函數