利用viewPager實作導航界面

導航界面（圖檔下方帶選中時變顔色的點點）：

首先：

1.需要一個view的list

2.需要一個PagerAdapter

重寫Adapter中的4個方法：

class pageAdapter extends PagerAdapter{
        @Override
        public int getCount() {
            return guildList.size();
        }

        /**
         *
         * @param view
         * @param object
         * @return 傳回項決定是否顯示界面 ，起到過濾和判斷的作用
         */  如果改成true則所有界面都顯示，如果改成false則都不顯示。
        @Override
        public boolean isViewFromObject(View view, Object object) {
          return   view==object;
        }
        //移除
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

        //加載界面
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view=  guildList.get(position);
            container.addView(view);
            return view;
        }
    }
           

實作了Adapter之後開始實作下方的圓點：

下方的圓點可以采用一個布局容器，然後添加view到布局中實作4個圓點！

布局容器就用LinearLayout，通過給view添加圓點的背景圖檔（通過圖檔選擇器來實作圖檔顔色的切換）實作圓點。

View viewPoint =new View(this);
            viewPoint.setBackgroundResource(R.drawable.gray_point);
            //給點設定放置的位置
            LinearLayout.LayoutParams ll=  new LinearLayout.LayoutParams(40,40);//這裡給圓點設定大小是通過LayoutParams的！是所在布局類型的LayoutPararams
            //點之間設定間距
            if(i==0){} 
            else{
                 ll.leftMargin=10;      //左邊距
             }
            viewPoint.setLayoutParams(ll);
            llPoints.addView(viewPoint);
       
           

灰點的xml繪圖檔案：

drawable目錄下。

<根元素為shape>

<conters :角

<radius :半徑

<solid : 固體 顔色等

注意：

設定寬高在LayoutParams構造器參數裡， 直接寫機關是px, 不是 dp!！！

這裡需要處理！

最後完成事件：

給viewPager設定事件重寫三個方法：

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            /**
             * 頁面滑動過程中執行
             * @param position 目前位置
             * @param positionOffset 偏移比例
             * @param positionOffsetPixels
             */
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //計算距離滑動紅點
                RelativeLayout.LayoutParams rl = (RelativeLayout.LayoutParams) redpoint.getLayoutParams();
                //設定紅點在布局中的有邊距
                rl.leftMargin= (int) (distens*(positionOffset+position));

                redpoint.setLayoutParams(rl);
            }

            /**
             * 目前頁面執行方法
             * @param position
             */
            @Override
            public void onPageSelected(int position) {
                   if(position==guildList.size()-1){
                       finishButton.setVisibility(View.VISIBLE);
                   }else {
                       finishButton.setVisibility(View.GONE);
                   }
                 /*RelativeLayout.LayoutParams rl = (RelativeLayout.LayoutParams) redpoint.getLayoutParams();
                 //設定紅點在布局中的有邊距
                 rl.leftMargin= distens*position;
                 redpoint.setLayoutParams(rl);*/

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }
           

其中onPageSelected();

這個方法是目前頁面的方法是以我們可以對目前頁面做一些處理，比如改變目前頁面圓點的顔色，或者控制目前頁面的按鈕是否顯示等！

如果隻需要滑動時紅點相應改變成選中的顔色則：

public void onPageSelected(int position) {
                  
                 RelativeLayout.LayoutParams rl = (RelativeLayout.LayoutParams) redpoint.getLayoutParams();
       
                 rl.leftMargin= distens*position;
                 redpoint.setLayoutParams(rl);

            }
           

或者直接在此設定目前點顔色是紅色，其他點顔色是灰色的。

如果想要出現看到點的移動效果：

1.就在普通點的布局中單獨添加一個view（紅顔色背景的點）覆寫住原來的點。

2.onPageScrolled()方法是在滑動時執行的，是以如果我們想在滑動時處理圓點的移動比例顯示，需要這個方法。 

 2.1而移動的比例需要計算圓點和圓點之間的距離！注意：這個距離不是間距，而是左上角的點到第二個圓點左上角的點之間的距離。

是以這個距離需要界面完成繪制之後才能通過界面的參數确定下來。

 2.2:通過監聽布局完成後的函數來确定點與點之間的距離：

redpoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                //取消注冊隻監聽一次
                redpoint.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                //擷取距離
                distens= llPoints.getChildAt(1).getLeft()-llPoints.getChildAt(0).getLeft();
            }
        });
           

 因為布局每進行一次重繪都會調用該函數，是以要取消監聽隻執行一次回調方法！

 2.3 在onPageScrolled()方法中根據移動的比例改變紅點的移動距離：

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //計算距離滑動紅點
                RelativeLayout.LayoutParams rl = (RelativeLayout.LayoutParams) redpoint.getLayoutParams();
                //設定紅點在布局中的有邊距
                rl.leftMargin= (int) (distens*(positionOffset+position));

                redpoint.setLayoutParams(rl);
            }
           

通過上面的方法即可完成一個導航的viewPager。這很簡單，其中需要的主要是動态添加view控件時布局參數，和點與點之間通過回調函數計算的部分！！