經過ViewPager 實現圖片輪播

經過ViewPager 實現圖片輪播

首先來個效果圖

佈局文件：

LinearLayout 用來存放下方的幾個小白點。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:id="@+id/activity_view_pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context="com.example.it.controlstudy.ViewPagerActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <LinearLayout
            android:id="@+id/whitePoins_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            android:padding="5dp">
        </LinearLayout>
    </FrameLayout>

</RelativeLayout>

咱們要經過shape自定義一個圖片來實現小白點顯示。

這個圖片是當作ImageView的背景色來用的。

1. 建立文件

1. 自定義shape

shape:形狀 size:大小 solid：填充色

藍色的：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">  
    <size       
        android:width="10dp"
        android:height="10dp"/>
    <solid android:color="#22aadc"/>
</shape>

白色的：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <size
        android:width="10dp"
        android:height="10dp"/>
    <solid android:color="#ffffff"/>
</shape>

代碼部分

• 定義控件 集合

private List<ImageView> imageViewsList; //存放全部輪播圖片的集合
      private int images[];  //存放全部圖片Id
      private List<ImageView> imagePointsList; //存放小白點的ImageView集合 實現小白點功能
      private int pageIndex = 0;  //當前Viewpager頁碼

      private LinearLayout whitePointsLayout;  //全部小白點將會加到這個佈局當中
      private ViewPager viewPager;

• 初始化控件 集合

viewPager = (ViewPager) findViewById(R.id.viewPager);
      whitePointsLayout = (LinearLayout) findViewById(R.id.whitePoins_layout);
      imagePointsList = new ArrayList<>();
      imageViewsList = new ArrayList<>();
    //將圖片加載到數組當中
      images = new int[]{R.drawable.shanghai1, R.drawable.shanghai2, R.drawable.shanghai3};

for (int i = 0; i < images.length; i++) {
            //加載輪播圖片ImageView集合
            ImageView iv = new ImageView(ViewPagerActivity.this);
            //  經過Glide 加載圖片
            Glide.with(ViewPagerActivity.this).load(images[i]).into(iv);
            imageViewsList.add(iv);

            // 加載小白點ImageView集合
            ImageView ivPoint = new ImageView(ViewPagerActivity.this);
            ivPoint.setImageResource(R.drawable.bg_white);
            //動態設置 Margins 屬性 ，就是給每一個小白點之間設置間距
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                 LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
            lp.setMargins(10, 10, 10, 10);
            ivPoint.setLayoutParams(lp);

            whitePointsLayout.addView(ivPoint); //將小白點圖片添加到LinearLayout佈局界面當中
            imagePointsList.add(ivPoint); 
        }
        imagePointsList.get(0).setImageResource(R.drawable.bg_blue); //默認選中第一個小白點爲藍色

• 設置ViewPager 的 PagerAdapter

PagerAdapter adapter = new PagerAdapter() {
            @Override
            public int getCount() {
                return imageViewsList.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }

            @Override  //設置當前顯示View
            public void setPrimaryItem(ViewGroup container, int position, Object object) {
                //首先將全部點設置爲白色
                for (int i = imagePointsList.size() - 1; i >= 0; i--) {
                    imagePointsList.get(i).setImageResource(R.drawable.bg_white);
                }
                //再將選中的點設置爲藍色
                imagePointsList.get(position).setImageResource(R.drawable.bg_blue); 
                pageIndex = position; //獲取當前Pager的Index

                super.setPrimaryItem(container, position, object);
            }

            @Override   //添加View 
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(imageViewsList.get(position));
                return imageViewsList.get(position);
            }

            @Override   //銷燬不用的View
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(imageViewsList.get(position));
            }

        };

        //設置適配器
        viewPager.setAdapter(adapter);

---

最後經過Timer實現圖片自動切換

//自動切換
 Timer timer = new Timer();
 TimerTask task = new TimerTask() {
     @Override
     public void run() {
         if (pageIndex < (imageViewsList.size() - 1)) {
             pageIndex++;
         } else { //最後一張後切換爲第一頁
             pageIndex = 0;
         }
         runOnUiThread(new Runnable() {
             @Override
             public void run() {
                 //設置選中的白點
                 imagePointsList.get(pageIndex).setImageResource(R.drawable.bg_blue); 
                 //設置viewPager現實的頁面            false 表示不顯示動畫效果
                 viewPager.setCurrentItem(pageIndex, false);
             }
         });
     }
 };    //表示一開始暫停5秒，而後每3秒執行一次run方法
 timer.schedule(task, 5000, 3000);