Android 使用ViewPager 做的半吊子的圖片輪播

效果圖

雖然不咋樣，但是最起碼的功能是實現了,下面我們來一步步的實現它。

界面

下面我們來分析一下界面的構成

整體的布局: 因為我們要做出這種，一層疊加一層的效果，就目前開來只有 FrameLayout 布局能夠做出來的。

下面的小點：明顯的我們這里用的是RadioButton控件來做的。

黑色的邊框: 為了更好的顯示圖片輪播的區域，我們用 shapexml 文件，為我們的圖片輪播添加了一個邊框。

ui的主體:因為我們的圖片是要進行輪播的，我們這里用了ViewPager作為了該界面的主體。

<?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_main"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context="com.example.it.studyimagerecycle.MainActivity"><!--用于實現 一層一層效果的幀布局，通過background屬性設置了一圈邊框--><FrameLayoutandroid:id="@+id/img_cycle"android:layout_width="match_parent"android:layout_height="180dp"android:background="@drawable/cycleimg_border"><!--用來實現圖片輪播的主體--><android.support.v4.view.ViewPagerandroid:id="@+id/img_cycle_viewpager"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_margin="2dp"></android.support.v4.view.ViewPager><!--圖片輪播下方的小點，因為比較懶就在布局文件中直接寫死了，其實可以再代碼中根據要輪播的數量進行生成--><RadioGroupandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:layout_margin="2dp"android:gravity="center"android:orientation="horizontal"><RadioButtonandroid:id="@+id/dot1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:checked="true" /><RadioButtonandroid:id="@+id/dot2"android:layout_width="wrap_content"android:layout_height="wrap_content" /><RadioButtonandroid:id="@+id/dot3"android:layout_width="wrap_content"android:layout_height="wrap_content" /></RadioGroup></FrameLayout> </RelativeLayout>

代碼

代碼的分析

• 我們是要可以滑動的，這一點需要用ViewPager來實現，有ViewPager就要有我們自己實現PagerAdapter
• 我們需要生成 在ViewPager上顯示的圖片，所以我們要通過代碼來生成一些ImageView控件。
• 而且我們需要間隔一定的時間來進行圖片的切換。
• 而且隨著圖片的自動切換，我們下面的RadioButton也要跟著選中
• 為了更好的用戶體驗，我們的RadioButton不能手動的選中

成員變量

private RadioButton rb1, rb2, rb3; private ViewPager imageViewPager; private List<RadioButton> radiobuttionList;// 圖片輪播的點的集合 private List<Integer> drawIdList; //圖片id的集合 private List<ImageView> imageViewList; //要在ViewPager上顯示的內容 private int pageIndex = 0; //viewpagr頁面的索引 private int countDown = 3; //切換頁面的倒計時

一些初始化方法

/* * 獲取我們需要的view * */ private void initFindView() {rb1 = (RadioButton) this.findViewById(R.id.dot1);rb2 = (RadioButton) this.findViewById(R.id.dot2);rb3 = (RadioButton) this.findViewById(R.id.dot3);imageViewPager = (ViewPager) this.findViewById(R.id.img_cycle_viewpager); }/* * 將屏幕上的點整合起來 * */ private void initDots() {radiobuttionList = new ArrayList<RadioButton>();radiobuttionList.add(rb1);radiobuttionList.add(rb2);radiobuttionList.add(rb3);//使RadioButton不能手動選中for (RadioButton rb : radiobuttionList) {rb.setClickable(false);} }/* * 初始化要加載的圖片 * */ private void initImage() {this.drawIdList = new ArrayList<Integer>();drawIdList.add(R.drawable.grape);drawIdList.add(R.drawable.strawberry);drawIdList.add(R.drawable.watermelon); }/* * 初始化ViewPage所需要的ImageView * */ private void initImageView() {imageViewList = new ArrayList<ImageView>();for (int i = 0; i < 3; i++) {//初始化ImageView的屬性ImageView imageView = new ImageView(this);//設置ImageView的屬性，使ImageView的大小是填充父窗體的ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(-1, -1);//讓ImageView應用這些屬性imageView.setLayoutParams(lp);//使ImageView的圖像填充imageView.setScaleType(ImageView.ScaleType.FIT_XY);this.imageViewList.add(imageView);} }//在onCrate方法中調用這些初始化 @Override protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initFindView();initDots();initImage();initImageView();//設置ViewPager page改變的監聽this.imageViewPager.addOnPageChangeListener(this);//為ViewPager設置Adapterthis.imageViewPager.setAdapter(new MyPagerAdapter(this, imageViewList, drawIdList));//開啟線程，一定時間后切換圖片new Thread(this).start(); }

PagerAdapter

package com.example.it.studyimagerecycle;import android.content.Context; import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView;import com.bumptech.glide.Glide;import java.util.List;public class MyPagerAdapter extends PagerAdapter {private final Context context; //上下文環境private final List<Integer> imgList; //在ViewPager中顯示的集合private final List<ImageView> imageViewList; //圖片資源Id的集合public MyPagerAdapter(Context context, List<ImageView> imageViewList, List<Integer> imageIdList) {this.context = context;this.imgList = imageIdList;this.imageViewList = imageViewList;}//釋放占用的資源@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(this.imageViewList.get(position));}//獲取可滑動頁面的數量@Overridepublic int getCount() {return imageViewList.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}/** 實例化item* */@Overridepublic Object instantiateItem(ViewGroup container, int position) {ImageView imageView = this.imageViewList.get(position);int id = this.imgList.get(position);//加載出指定的圖片，這里使用Glide這個開源項目，圖片壓縮Glide.with(this.context).load(id).into(imageView);container.addView(imageView);return imageView;} }

ViewPager頁面改變的事件

因為代碼是寫在Activity中的，我們要讓Activity實現 ViewPager.OnPageChangeListener 接口。

@Override public void onPageScrolled(int position, float positi }/* * 頁面被選中的時候觸發 * 我們要在這個頁面中處理，當我們手動滑動頁面的時候要處理的業務邏輯 * */ @Override public void onPageSelected(int position) {//獲取應該是選中狀態的RadioButtonRadioButton radioButton = radiobuttionList.get(position);//設置radioButton為選中狀態radioButton.setChecked(true);//重置倒計時this.countDown = 3;//重新設置pageIndexthis.pageIndex = position; } @Override public void onPageScrollStateChanged(int state) { }

子線程更新選中的頁面

/* * 倒計時進行圖片的切換 * */ @Override public void run() {//進行圖片轉換的前提是我們的Activity的資源沒有被回收。while (MainActivity.this.isDestroyed() == false) {//讓線程睡眠一秒，實現倒計時功能SystemClock.sleep(1000l);//倒計時減去countDown--;//如果倒計時結束那么進行頁面的轉換if (countDown == 0) {//設置該被選中的Page的索引，為原來的所以+1this.pageIndex++;//如果是我們的page已經是最后一個了，那么我么的第一個page應該被選中if (pageIndex == this.radiobuttionList.size())this.pageIndex = 0;//更新uirunOnUiThread(new Runnable() {@Overridepublic void run() {//設置選中項imageViewPager.setCurrentItem(pageIndex);}});}} }

總結

經過以上的這些步驟，我們的圖片輪播的效果已經實現了，因為本人水平原因，寫的代碼。。。，請大家湊活著看吧。

源碼下載: https://git.oschina.net/ShareKnowledge/StudyImageCycle

轉載于:https://www.cnblogs.com/slyfox/p/7199646.html

總結

以上是生活随笔為你收集整理的Android 使用ViewPager 做的半吊子的图片轮播的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。