ViewPager輪播小圓點的實現

在淘寶、網易雲音樂 等等APP應用中我們隨處可見小圓點與ViewPager的輪播組合 可見它的應用十分廣泛 那麼到底如何實現 現在讓我們一起來學習！

一 在佈局中寫出vp與圓點 

<RelativeLayout
    android:id="@+id/rl"
    android:layout_width="match_parent"
    android:layout_height="300dp">
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        ></android.support.v4.view.ViewPager>
    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="40dp"
        android:gravity="center"
        android:orientation="horizontal"></LinearLayout>
</RelativeLayout>

二 自定義一個類實現接口

   自定義接口的過程中我們需要兩張圖片 R.mipmap.gouwuzy_16  R.mipmap.gouwuzy_17一個選中的圖片 一個未選中

放入mipmap中 在調用接口時我們需要傳入4個參數上下文、我們佈局中的VP及LinerLayout、ViewPager中圖片個個

數。

public class ViewPagerIndicator implements ViewPager.OnPageChangeListener {  
    private Context context;  
    private ViewPager viewPager;  
    private LinearLayout dotLayout;  
    private int size;  
    private int img1 = R.mipmap.gouwuzy_16, img2 = R.mipmap.gouwuzy_17;  
    private int imgSize = 15;  
    private List<ImageView> dotViewLists = new ArrayList<>();  
  
    public ViewPagerIndicator(Context context, ViewPager viewPager, LinearLayout dotLayout, int size) {  
        this.context = context;  
        this.viewPager = viewPager;  
        this.dotLayout = dotLayout;  
        this.size = size;  
  
        for (int i = 0; i < size; i++) {  
            ImageView imageView = new ImageView(context);  
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));  
  
            //爲小圓點左右添加間距  
            params.leftMargin = 10;  
            params.rightMargin = 10;  
            //手動給小圓點一個大小  
            params.height = imgSize;  
            params.width = imgSize;  
            if (i == 0) {  
                imageView.setBackgroundResource(img1);  
            } else {  
                imageView.setBackgroundResource(img2);  
            }  
            //爲LinearLayout添加ImageView  
            dotLayout.addView(imageView, params);  
            dotViewLists.add(imageView);  
        }  
  
    }  
  
    @Override  
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
  
    }  
  
    @Override  
    public void onPageSelected(int position) {  
        for (int i = 0; i < size; i++) {  
            //選中的頁面改變小圓點爲選中狀態，反之爲未選中  
            if ((position % size) == i) {  
                ((View) dotViewLists.get(i)).setBackgroundResource(img1);  
            } else {  
                ((View) dotViewLists.get(i)).setBackgroundResource(img2);  
            }  
        }  
    }  
  
    @Override  
    public void onPageScrollStateChanged(int state) {  
  
    }  
} 

 

 三 在Activity中調用

public class MainActivity extends AppCompatActivity {  
    private ViewPager vp;  
    private VPAdapter vpAdapter;  
    private LinearLayout ll;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
        vp = (ViewPager) findViewById(R.id.vp);  
        vpAdapter = new VPAdapter(this);  
        vp.setAdapter(vpAdapter);  
  
        ll = (LinearLayout) findViewById(R.id.ll);  
        vp.setOnPageChangeListener(new ViewPagerIndicator(this, vp, ll, 3));  
    }  
}  

接口調用中的第四個參數是可變的 當我們從網站讀取數據時參數爲ViewPagerimg集合的長度