ViewPager系列之廣告頁滑動

ViewPager是support-v4下的一個控件，視圖左右滑動切換工具。要添加這個包才能使用哦！ViewPager是相似於ListView的一個控件，不少的Item組成的，相似於左右翻動的一本書，而ListView只是上下翻動。ViewPager的適配器PagerAdapter相似於ListView的BaseAdapter,使用方面也很相似於ListView,準備數據源，適配器，適配器裏面要計算總Item的條目數，繪製每一個item視圖。。

先上效果圖：

                  

完整代碼：

 

import android.app.ActionBar;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;

public class advertisement extends Activity {
private ViewPager viewPager;
    private LinearLayout  layout;
    private List<ImageView> imageList;
    private List<ImageView>  pointList;
    ImageView point;
    int[] drawable={R.mipmap.a,R.mipmap.b,R.mipmap.c,R.mipmap.d};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_advertisement);
        viewPager=(ViewPager)findViewById(R.id.viewPager);
        layout=(LinearLayout)findViewById(R.id.layout);
        imageList=new ArrayList<ImageView>();
        pointList=new ArrayList<ImageView>();
        addView();
        pointList.get(1).setImageResource(R.mipmap.ic_focus);//滑動灰色小圓點
        pointList.get(2).setImageResource(R.mipmap.ic_focus);
        pointList.get(3).setImageResource(R.mipmap.ic_focus);
        viewPager.setOnPageChangeListener(new pointListener());
    }

public void addView(){
       for (int i=0;i<4;i++){
           ImageView iv=new ImageView(this);
           iv.setImageResource(drawable[i]);
           iv.setScaleType(ImageView.ScaleType.CENTER_CROP);//圖片縮放方式
           imageList.add(iv);
           viewPager.setAdapter(new ViewPagerAdapter());
           //ViewPager上的小圓點滑動效果
           point=new ImageView(this);
           //設置控件對於父容器的佈局參數寬高位置等
           //控件自身所處的父容器是什麼就用哪一種類型的父容器。這裏point在LinearLayout下面
           LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(20,20);
           params.leftMargin=20;
           point.setImageResource(R.mipmap.ic_focus_select);
           point.setMaxHeight(20);
           point.setMaxWidth(20);
           point.setLayoutParams(params);
           pointList.add(point);
           layout.addView(point);
       }
   }

    class ViewPagerAdapter  extends PagerAdapter{
        @Override
        // 獲取要滑動的控件的數量，那麼這裏就應該是展現的廣告圖片的ImageView數量
        public int getCount() {
            return imageList.size();
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            //ViewPager 是擴展於 ViewGroup，container參數是當前的ViewPager對象，
            // 全部的item都會被加入到ViewPager中，
           // position就是 每一個item對應的下標
            container.addView(imageList.get(position));
            return imageList.get(position);
        }
        @Override
        //從instantiateItem返回的object是一個view有一個id，用它和view的id比較
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }
        @Override
        // PagerAdapter只緩存三張要顯示的圖片，若是滑動的圖片超出了緩存的範圍，就會調用這個方法，將圖片銷燬
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(imageList.get(position));
        }
    }
    class pointListener implements ViewPager.OnPageChangeListener{
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//這個方法會在屏幕滾動過程當中不斷被調用。
// 有三個參數，第一個position，這個參數要特別注意一下。
// 當用手指滑動時，若是手指按在頁面上不動，position和當前頁面index是一致的；
// 若是手指向左拖動（相應頁面向右翻動），這時候position大部分時間和當前頁面是一致的，
// 只有翻頁成功的狀況下最後一次調用纔會變爲目標頁面；若是手指向右拖動（相應頁面向左翻動），
// 這時候position大部分時間和目標頁面是一致的，只有翻頁不成功的狀況下最後一次調用纔會變爲原頁面。
//當直接設置setCurrentItem翻頁時，若是是相鄰的狀況（好比如今是第二個頁面，
// 跳到第一或者第三個頁面），若是頁面向右翻動，大部分時間是和當前頁面是一致的，
// 只有最後才變成目標頁面；若是向左翻動，position和目標頁面是一致的。
// 這和用手指拖動頁面翻動是基本一致的。
// 若是不是相鄰的狀況，好比我從第一個頁面跳到第三個頁面，position先是0，而後逐步變成1，
// 而後逐步變成2；我從第三個頁面跳到第一個頁面，position先是1，而後逐步變成0，並無出現爲2的狀況。
// positionOffset是當前頁面滑動比例，若是頁面向右翻動，這個值不斷變大，
// 最後在趨近1的狀況後突變爲0。若是頁面向左翻動，這個值不斷變小，最後變爲0。
// positionOffsetPixels是當前頁面滑動像素，變化狀況和positionOffset一致。
        }
        @Override
        public void onPageScrollStateChanged(int state) {
//這個方法在手指操做屏幕的時候發生變化。有三個值：0（END）,1(PRESS) , 2(UP) 。
//當用手指滑動翻頁時，手指按下去的時候會觸發這個方法，state值爲1，手指擡起時，
// 若是發生了滑動（即便很小），這個值會變爲2，而後最後變爲0 。總共執行這個方法三次。
// 一種特殊狀況是手指按下去之後一點滑動也沒有發生，這個時候只會調用這個方法兩次，state值分別是1,0 。
//當setCurrentItem翻頁時，會執行這個方法兩次，state值分別爲2 , 0 。
        }
        @Override
        public void onPageSelected(int position) {
      //onPageSelected(int position)：這個方法有一個參數position，
       // 表明哪一個頁面被選中。當用手指滑動翻頁的時候，
      // 若是翻動成功了（滑動的距離夠長），手指擡起來就會當即執行這個方法，
      // position就是當前滑動到的頁面。若是直接setCurrentItem翻頁，
      // 那position就和setCurrentItem的參數一致，這種狀況在onPageScrolled執行方法前就會當即執行。
          for (int i=0;i<pointList.size();i++){
             if(position==i)
                pointList.get(i).setImageResource(R.mipmap.ic_focus_select);//滑動白色小圓點
              else
                 pointList.get(i).setImageResource(R.mipmap.ic_focus);//滑動灰色小圓點
          }
        }
    }
}

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".advertisement">
<!-- RelativeLayout下能實現一個組件懸浮在另外一個組件上效果有點驚訝 -->
   <android.support.v4.view.ViewPager
       android:id="@+id/viewPager"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent">

   </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="40dp"
        android:layout_centerHorizontal="true"
       >

    </LinearLayout>
</RelativeLayout>