Android仿餓了么首頁導航欄（ViewPager）

 * 繪制導航點
 */
private void initDot() {
    for (int i = 0; i < (itemBeanList.size() / 9 + 1); i++) {
        Log.e("Tag", itemBeanList.size() + "");
        ImageView imageView = new ImageView(this);
        //創建一個ImageView來放置圓點，并確定ImageView的寬高
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                20, 20);
        params.leftMargin = 10;
        params.rightMargin = 10;
        params.topMargin = 5;
        params.bottomMargin = 10;
        imageView.setLayoutParams(params);
        dots.add(imageView);
        //由于剛進去引導頁時出現的是第一個引導頁，故此時的導航點設置為紅色
        if (i == 0) {
            dots.get(i).setBackgroundResource(R.drawable.dot_green);
        } else {
            dots.get(i).setBackgroundResource(R.drawable.dot_gray);
        }
        llDots.addView(imageView);
    }
}</code></pre> 

導航點的父布局是LinearLayout，所以我們使用LinearLayout中的LayoutParams給導航點設置上下左右的邊距。在onCreate中調用該方法就可以繪制導航點了。因為ViewPager默認顯示的是第一頁，所以我們默認第一個的導航點是選中的。

除此之外，我們還需要讓導航點起到導航的作用。這時候就可以去調用ViewPager的頁面滑動監聽了：

/**
         * 滑動監聽事件
         */
        V*Navigation.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                Log.e("Tag", "position=" + position);
                for (int i = 0; i < dots.size(); i++) {
                    if (i == position) {
                        dots.get(i).setBackgroundResource(R.drawable.dot_green);
                    } else {
                        dots.get(i).setBackgroundResource(R.drawable.dot_gray);
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

在選中某個頁面時就將對應的導航點改為綠色就可以了。

4.5 圖標的點擊事件

頁面布局中的控件都是在適配器NavigationAdapter中初始化的，為了在MainActivity中能夠實現它們的點擊事件，我們在NavigationAdapter的構造方法中傳入一個View.onClickListener的對象作為參數，只需在MainActivity繼承View.OnClickListener接口，在創建NavigationAdapter時傳入this即可。

當然，我們還需要在NavigationAdapter中讓需要實現點擊事件的控件調用setOnClickListener方法：

private void initListener() {
        llItem1.setOnClickListener(onClickListener);
        llItem2.setOnClickListener(onClickListener);
        llItem3.setOnClickListener(onClickListener);
        llItem4.setOnClickListener(onClickListener);
        llItem5.setOnClickListener(onClickListener);
        llItem6.setOnClickListener(onClickListener);
        llItem7.setOnClickListener(onClickListener);
        llItem8.setOnClickListener(onClickListener);
    }

大家想一想，initListener方法應該在哪里調用呢？這里有一個坑，由于ViewPager的頁面是一頁一頁地繪制的，所以注冊控件的點擊事件也應該在for循環中，為每一頁的控件都注冊一遍：

for (int i = 0; i < pages; i++) {
            pageView = View.inflate(context, R.layout.page_navigation, null);
            ButterKnife.bind(this, pageView);
            setPagerViewData(i);
            itemViews.add(pageView);
            initListener();
        }

好了，現在可以到MainActivity中實現監聽事件了：

@Override
    public void onClick(View v) {
        int pageNum = V*Navigation.getCurrentItem();
        Log.e("Tag", "viewPager.getCurrentItem()=" + V*Navigation.getCurrentItem());
        switch (v.getId()) {
            case R.id.ll_item1:
                Toast.makeText(this, itemBeanList.get(pageNum * 8 + 0).getIconName(), Toast.LENGTH_SHORT).show();
                initSelected();
                itemBeanList.get(pageNum * 8 + 0).setSelected(true);
                adapter.refresh(itemBeanList);
                break;
            case R.id.ll_item2:
                Toast.makeText(this, itemBeanList.get(pageNum * 8 + 1).getIconName(), Toast.LENGTH_SHORT).show();
                initSelected();
                itemBeanList.get(pageNum * 8 + 1).setSelected(true);
                adapter.refresh(itemBeanList);
                break;
            case R.id.ll_item3:
                Toast.makeText(this, itemBeanList.get(pageNum * 8 + 2).getIconName(), Toast.LENGTH_SHORT).show();
                initSelected();
                itemBeanList.get(pageNum * 8 + 2).setSelected(true);
                adapter.refresh(itemBeanList);
                break;
            case R.id.ll_item4:
                Toast.makeText(this, itemBeanList.get(pageNum * 8 + 3).getIconName(), Toast.LENGTH_SHORT).show();
                initSelected();
                itemBeanList.get(pageNum * 8 + 3).setSelected(true);
                adapter.refresh(itemBeanList);
                break;
            case R.id.ll_item5:
                Toast.makeText(this, itemBeanList.get(pageNum * 8 + 4).getIconName(), Toast.LENGTH_SHORT).show();
                initSelected();
                itemBeanList.get(pageNum * 8 + 4).setSelected(true);
                adapter.refresh(itemBeanList);
                break;
            case R.id.ll_item6:
                Toast.makeText(this, itemBeanList.get(pageNum * 8 + 5).getIconName(), Toast.LENGTH_SHORT).show();
                initSelected();
                itemBeanList.get(pageNum * 8 + 5).setSelected(true);
                adapter.refresh(itemBeanList);
                break;
            case R.id.ll_item7:
                Toast.makeText(this, itemBeanList.get(pageNum * 8 + 6).getIconName(), Toast.LENGTH_SHORT).show();
                initSelected();
                itemBeanList.get(pageNum * 8 + 6).setSelected(true);
                adapter.refresh(itemBeanList);
                break;
            case R.id.ll_item8:
                Toast.makeText(this, itemBeanList.get(pageNum * 8 + 7).getIconName(), Toast.LENGTH_SHORT).show();
                initSelected();
                itemBeanList.get(pageNum * 8 + 7).setSelected(true);
                adapter.refresh(itemBeanList);
                break;
            default:
                break;
        }
    }

    /**
     * 初始化圖標的選擇狀態，全部設置為未選中狀態
     */
    private void initSelected() {
        for (int i = 0; i < itemBeanList.size(); i++) {
            itemBeanList.get(i).setSelected(false);
        }
    }

刷新Adapter時我是重新調用了initView方法，并且傳入了修改后的數據源。下面是在Adapter中刷新的方法：

public void refresh(List<NavigationItemBean> itemBeanList){
        initView(itemBeanList);
        notifyDataSetChanged();
    }

運行一下，點擊，咦，怎么沒有反應呢？PageAdapter這里有一個坑了：notifyDataSetChanged只有在ViewPager的頁數發生變化才會刷新頁面，單是某一個頁面的數據發生變化時是沒用的。但是不用著急，我們可以重寫getItemPosition方法，讓其返回POSITION_NONE，強迫viewpager重繪所有的頁面。

/**
     * 使Adapter能夠刷新布局
     */
    private int mChildCount = 0;
    @Override
    public void notifyDataSetChanged() {
        mChildCount = getCount();
        super.notifyDataSetChanged();
    }
    @Override
    public int getItemPosition(Object object) {
        if (mChildCount > 0) {
            mChildCount--;
            return POSITION_NONE;
        }
        return super.getItemPosition(object);
    }

運行一下，點擊，發現可以完美實現我們要的效果了。

4.6 雙擊取消選中

實現雙擊取消選中的效果并不難，我們只需在點擊每一個圖標之前都判斷一下當前的選擇狀態，如果當前為選中的狀態，則將狀態改為未選中，反之，則改為選中。示例代碼如下：

if (itemBeanList.get(pageNum * 8 + 0).isSelected()) {
                    initSelected();
                    itemBeanList.get(pageNum * 8 + 0).setSelected(false);
                } else {
                    initSelected();
                    itemBeanList.get(pageNum * 8 + 0).setSelected(true);
                }

我在代碼中只設置了前面兩項，大家如果想實現所有圖標的雙擊選中事件的話就自己動一下手吧！

5、總結

這個功能我前前后后花了不少時間，在參考別人代碼的基礎上總算是實現了，水平有限，如果博客中有錯漏的地方，歡迎批評指正。我的寫法還是太過簡單粗暴，不夠精巧，而且對資源的占用也比較大，如果你有更好的方法，歡迎交流學習。聽說ViewPager+GridVie也可以實現同樣的效果，接下來我再研究一下，看能不能再寫一篇博客吧！

最后是源碼下載地址：