循环轮播图，想必大家都在很多app山看到过，但是具体怎么实现呢？今天小弟就跟大家一种通过组合自定义view来实现的方法。
先看一张效果图：
再看一下结构
现在开始正式讲解如何实现这个轮播图的自定义，首先定义一下轮播图的布局文件：shuffling_picture.xml；
<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"
tools:context="com.example.lunbo.MainActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/shuffling_viewpage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true" />
<LinearLayout
android:id="@+id/shuffling_point_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dip"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>
主要由一个ViewPage和一个LinearLagyout组成，其中ViewPage是用来放要轮播的图片，LineartLayout是用来动态的仿下面的小点，多少张图片就对应多少个点。
接下来看看自定义view的自定义属性文件：attrs.xml;
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ShufflingPicture">
<attr name="pointDrawbleNormal" format="reference"/>
<attr name="pointDrawbleSelect" format="reference"/>
</declare-styleable>
</resources>
在这里我主要自定义了两个属性，一个是用来放小点的正常状态时的图片，一个是用来放小点的选择状态时的图片，可能有人会说为什么不用selector来放图片？起初我是用selector来的，但是出现了一些图片显示不出来的问题，所以我就暂时用了这种。
接下来我们再来看看最主要的部分，自定义的轮播图：ShufflingPicture；
package com.demo.shufflingpicture;
import java.util.LinkedList;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
/**
* 轮播图
*
* @author fuxingkai
*
*/
public class ShufflingPicture extends RelativeLayout implements
OnPageChangeListener, OnTouchListener {
private Context context;
private ViewPager imageViewPager;
private AdapterCycle pagerAdapter;
private LinearLayout pointLinearLayout;
private LinkedList<View> views;
private ImageView[] points;
private Drawable pointDrawableNoraml;
private Drawable pointDrawableSelect;
private boolean isPlay = true;
private boolean left = false;
private boolean right = false;
private boolean isScrolling = false;
private int currentIndex = 0;
private int pointIndex = 1;
private int lastValue = -1;
private ChangeViewCallback changeViewCallback = null;
public ShufflingPicture(Context context) {
super(context);
this.context = context;
initView();
}
public ShufflingPicture(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
initView();
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.ShufflingPicture);
pointDrawableNoraml = a
.getDrawable(R.styleable.ShufflingPicture_pointDrawbleNormal);
pointDrawableSelect = a
.getDrawable(R.styleable.ShufflingPicture_pointDrawbleSelect);
if (pointDrawableNoraml == null) {
pointDrawableNoraml = getResources().getDrawable(
R.drawable.point_normal);
}
;
if (pointDrawableSelect == null) {
pointDrawableSelect = getResources().getDrawable(
R.drawable.point_select);
}
a.recycle();
}
private void initView() {
LayoutInflater.from(context).inflate(R.layout.shuffling_picture, this);
imageViewPager = (ViewPager) findViewById(R.id.shuffling_viewpage);
pointLinearLayout = (LinearLayout) findViewById(R.id.shuffling_point_layout);
}
private void setViewPageAdapter(AdapterCycle pagerAdapter) {
this.pagerAdapter = pagerAdapter;
imageViewPager.setOnPageChangeListener(this);
imageViewPager.setAdapter(pagerAdapter);
imageViewPager.setOffscreenPageLimit(views.size());
imageViewPager.setCurrentItem(1);
imageViewPager.setOnTouchListener(this);
startShuffling();
};
public void setViews(LinkedList<View> listViews) {
views = listViews;
initPoints();
setViewPageAdapter(new AdapterCycle(context, views));
}
// 实现ViewPager.OnPageChangeListener接口
@Override
public void onPageSelected(int position) {
if (pagerAdapter.getCount() > 1) { // 多于1，才会循环跳转
if (position < 1) { // 首位之前，跳转到末尾（N）
position = views.size(); // 注意这里是mList，而不是mViews
imageViewPager.setCurrentItem(position, false);
} else if (position > views.size()) { // 末位之后，跳转到首位（1）
imageViewPager.setCurrentItem(1, false); // false:不显示跳转过程的动画
position = 1;
} else {
setCurDot(position - 1);
}
}
}
private Handler handler = new Handler();
private Runnable runnable = new Runnable() {
@Override
public void run() {
if (isPlay) {
if (pointIndex < views.size() + 1) {
pointIndex++;
} else {
pointIndex = 0;
}
imageViewPager.setCurrentItem(pointIndex);
if (pointIndex < 1) { // 首位之前，跳转到末尾（N）
pointIndex = views.size(); // 注意这里是mList，而不是mViews
imageViewPager.setCurrentItem(pointIndex, true);
} else if (pointIndex > views.size()) { // 末位之后，跳转到首位（1）
imageViewPager.setCurrentItem(1, false); // false:不显示跳转过程的动画
pointIndex = 1;
} else {
setCurDot(pointIndex - 1);
}
}
handler.postDelayed(this, 2000);
}
};
private void startShuffling() {
handler.postDelayed(runnable, 2000);
};
private void initPoints() {
points = new ImageView[views.size()];
// 动态添加小点
for (int i = 0; i < views.size(); i++) {
LinearLayout.LayoutParams llp = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
ImageView point_view = new ImageView(context);// ne 一个ImageView
point_view.setPadding(10, 5, 10, 5);
point_view.setClickable(true);
llp.gravity = Gravity.CENTER_VERTICAL;
point_view.setImageDrawable(pointDrawableNoraml);// 设置资源
pointLinearLayout.addView(point_view, llp); // 最后一步，添加控件到布局中
}
// 循环取得小点图片
for (int i = 0; i < views.size(); i++) {
// 得到一个LinearLayout下面的每一个子元素
points[i] = (ImageView) pointLinearLayout.getChildAt(i);
// 默认都设为灰色
points[i].setEnabled(true);
// 给每个小点设置监听
points[i].setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
int positions = (Integer) v.getTag();
setCurView(positions + 1);
setCurDot(positions);
pointIndex = positions;
}
});
// 设置位置tag，方便取出与当前位置对应
points[i].setTag(i);
}
// 当只有一张图片的时候，隐藏那个小点
if (views.size() > 1) {
pointLinearLayout.setVisibility(View.VISIBLE);
} else {
pointLinearLayout.setVisibility(View.GONE);
}
currentIndex = 0;
// 设置为白色，即选中状态
points[0].setEnabled(false);
points[0].setImageDrawable(pointDrawableSelect);
}
protected void setCurDot(int position) {
if (position < 0 || position > views.size() - 1
|| currentIndex == position) {
return;
}
points[position].setEnabled(false);
points[position].setImageDrawable(pointDrawableSelect);// 设置资源
points[currentIndex].setEnabled(true);
points[currentIndex].setImageDrawable(pointDrawableNoraml);
currentIndex = position;
}
protected void setCurView(int position) {
if (position < 0) {
return;
}
imageViewPager.setCurrentItem(position);
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
if (isScrolling) {
if (lastValue > positionOffsetPixels) {
// 递减，向右侧滑动
right = true;
left = false;
} else if (lastValue < positionOffsetPixels) {
// 递减，向右侧滑动
right = false;
left = true;
} else if (lastValue == positionOffsetPixels) {
right = left = false;
}
}
lastValue = positionOffsetPixels;
}
@Override
public void onPageScrollStateChanged(int state) {
if (state == 1) {
isScrolling = true;
} else {
isScrolling = false;
}
if (state == 2) {
if (changeViewCallback != null) {
changeViewCallback.changeView(left, right);
}
right = left = false;
}
}
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
isPlay = false;
break;
case MotionEvent.ACTION_UP:
isPlay = true;
if (right) {
pointIndex = currentIndex;
}
if (left) {
pointIndex = currentIndex + 1;
}
break;
default:
break;
}
return false;
}
/**
* 得到是否向右侧滑动
*
* @return true 为右滑动
*/
public boolean getMoveRight() {
return right;
}
/**
* 得到是否向左侧滑动
*
* @return true 为左做滑动
*/
public boolean getMoveLeft() {
return left;
}
/**
* 滑动状态改变回调
*
* @author fuxingkai
*
*/
public interface ChangeViewCallback {
/**
* 切换视图 ？决定于left和right 。
*
* @param left
* @param right
*/
public void changeView(boolean left, boolean right);
}
/**
* set ...
*
* @param callback
*/
public void setChangeViewCallback(ChangeViewCallback callback) {
changeViewCallback = callback;
}
public class AdapterCycle extends PagerAdapter {
private LinkedList<View> mViews; // 新view集合
public AdapterCycle(Context context, LinkedList<View> mOldViews) {
if (mOldViews != null) {
// 无论是否多于1个，都要初始化第一个（index:0）
mViews = new LinkedList<View>();
final ImageView view = (ImageView) mOldViews.get(mOldViews
.size() - 1);
ImageView imageView = new ImageView(context);
imageView.setImageDrawable(view.getDrawable());
mViews.add(imageView);
// 注意，如果不只1个，mViews比mList多两个（头尾各多一个）
// 假设：mList为mList[0~N-1], mViews为mViews[0~N+1]
// mViews[0]放mList[N-1], mViews[i]放mList[i-1],
// mViews[N+1]放mList[0]
// mViews[1~N]用于循环；首位之前的mViews[0]和末尾之后的mViews[N+1]用于跳转
// 首位之前的mViews[0]，跳转到末尾（N）；末位之后的mViews[N+1]，跳转到首位（1）
if (mOldViews.size() > 1) { // 多于1个要循环
for (int i = 0; i < mOldViews.size(); i++) { // 中间的N个（index:1~N）
final View view1 = mOldViews.get(i);
mViews.add(view1);
}
// 最后一个（index:N+1）
final ImageView view2 = (ImageView) mOldViews.get(0);
ImageView imageView1 = new ImageView(context);
imageView.setImageDrawable(view2.getDrawable());
mViews.add(imageView1);
}
}
}
@Override
public int getCount() {
return mViews.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView(mViews.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = mViews.get(position);
container.addView(view);
return view;
}
}
}
首先是继承一个RelativeLayout类，然后实现他的OnPageChangeListener, OnTouchListener这两个监听。然后在构造函数中调用initView()方法，初始化轮播图里面的view
把刚才写的自定义轮播图的布局加载进来。
然后初始化小点的两个状态对应的图片，记得recycle掉。
通过setViews方法，把要轮播的图片加载进来
public void setViews(LinkedList<View> listViews) {
views = listViews;
initPoints();
setViewPageAdapter(new AdapterCycle(context, views));
}
然后在这里面初始化小点
private void initPoints() {
points = new ImageView[views.size()];
// 动态添加小点
for (int i = 0; i < views.size(); i++) {
LinearLayout.LayoutParams llp = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
ImageView point_view = new ImageView(context);// ne 一个ImageView
point_view.setPadding(10, 5, 10, 5);
point_view.setClickable(true);
llp.gravity = Gravity.CENTER_VERTICAL;
point_view.setImageDrawable(pointDrawableNoraml);// 设置资源
pointLinearLayout.addView(point_view, llp); // 最后一步，添加控件到布局中
}
// 循环取得小点图片
for (int i = 0; i < views.size(); i++) {
// 得到一个LinearLayout下面的每一个子元素
points[i] = (ImageView) pointLinearLayout.getChildAt(i);
// 默认都设为灰色
points[i].setEnabled(true);
// 给每个小点设置监听
points[i].setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
int positions = (Integer) v.getTag();
setCurView(positions + 1);
setCurDot(positions);
pointIndex = positions;
}
});
// 设置位置tag，方便取出与当前位置对应
points[i].setTag(i);
}
// 当只有一张图片的时候，隐藏那个小点
if (views.size() > 1) {
pointLinearLayout.setVisibility(View.VISIBLE);
} else {
pointLinearLayout.setVisibility(View.GONE);
}
currentIndex = 0;
// 设置为白色，即选中状态
points[0].setEnabled(false);
points[0].setImageDrawable(pointDrawableSelect);
}
通过计算图片的个数，然后在pointLinearLayout里面add进对应的小点每个小点设置为可点击图片设置为正常状态的小点。然后循环读取每个小点，给他们设置点击事件通过settag方法来辨别小点，然后里面的setCurview方法是用来设置viewpage当前显示的是那个页面，setcurDot是用来设置当前小点显示的是哪个点，判断一下，如果只用一张图片，就不显示小点，设置当前第一个小点为选择状态。其中setcurView和setcurDot方法里面的东西很简单就不多说
protected void setCurDot(int position) {
if (position < 0 || position > views.size() - 1
|| currentIndex == position) {
return;
}
points[position].setEnabled(false);
points[position].setImageDrawable(pointDrawableSelect);// 设置资源
points[currentIndex].setEnabled(true);
points[currentIndex].setImageDrawable(pointDrawableNoraml);
currentIndex = position;
}
protected void setCurView(int position) {
if (position < 0) {
return;
}
imageViewPager.setCurrentItem(position);
}
在上setViews里面还为viewpage设置了适配器setViewPageAdapter，其中AdapterCycle适配器主要功能为轮播的图片在viewpage里面显示的时候让他们达到循环的效果。如何让它达到这种效果呢，就是让viewpage显示的页面比预期的页面多两个页面，从网上盗用一张图片来讲可能大家比较清楚
就是说如果是在预期第一个页面继续向左滑动，那显示的是最后一个页面；如果是在预期的最后一个页面继续向右滑动的话，那显示的就是第一页面。也就是说真是viewpage比我们看到页面多两个页面。那两个页面分别是第一个和最后一个。不太明白的朋友可以自己看着图片琢磨一下。所以我们在viewpage的适配器里面要为传过来的图片加上前后加上一张图片。下面就是添加的代码。
public AdapterCycle(Context context, LinkedList<View> mOldViews) {
if (mOldViews != null) {
// 无论是否多于1个，都要初始化第一个（index:0）
mViews = new LinkedList<View>();
final ImageView view = (ImageView) mOldViews.get(mOldViews
.size() - 1);
ImageView imageView = new ImageView(context);
imageView.setImageDrawable(view.getDrawable());
mViews.add(imageView);
// 注意，如果不只1个，mViews比mList多两个（头尾各多一个）
// 假设：mList为mList[0~N-1], mViews为mViews[0~N+1]
// mViews[0]放mList[N-1], mViews[i]放mList[i-1],
// mViews[N+1]放mList[0]
// mViews[1~N]用于循环；首位之前的mViews[0]和末尾之后的mViews[N+1]用于跳转
// 首位之前的mViews[0]，跳转到末尾（N）；末位之后的mViews[N+1]，跳转到首位（1）
if (mOldViews.size() > 1) { // 多于1个要循环
for (int i = 0; i < mOldViews.size(); i++) { // 中间的N个（index:1~N）
final View view1 = mOldViews.get(i);
mViews.add(view1);
}
// 最后一个（index:N+1）
final ImageView view2 = (ImageView) mOldViews.get(0);
ImageView imageView1 = new ImageView(context);
imageView.setImageDrawable(view2.getDrawable());
mViews.add(imageView1);
}
}
}
然后为view怕个添加OnPageChangeListener和OnTouchListener监听，设置当前显示的是第二个页面。然后开启定时轮播。
轮播的时候判断当前是否是轮播到了第一个，如果是第一个，就把viewpage设置显示到倒数第二个，如果轮播到倒数第一个，就把viewpage设置显示到第二个。如果不是第一个和倒数第一个的话，就设置当前小点的显示位置。同样在viewpage的onpageSelected方法里面也是
考虑到当滑动的时候就不能让他自定轮播，所以在onTouch里面分别设置isPlay是否可以自定播放。
同时如果手动滑动完之后要让自定滑动不错乱，所以定义了两个字段分别用来标识当前执行的向左还是向右滑动。然后为pointIndex分别赋不同的值
其中判断right和left是通过定义一个ChangeViewCallback接口来切换当前是right还是left的状态。主要代码如下：
自定义的轮播图主要部分基本讲完，现在我们开始调用。在activity里面通过为自定义的轮播图viewsetviews来开启轮播。
package com.demo.shufflingpicture;
import java.util.LinkedList;
import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
public class MainActivity extends Activity {
private ShufflingPicture shufflingPicture;
private LinkedList<View> views;
private LayoutInflater mInflater; // 用于解XML
private int[] strings = new int[] { R.drawable.image_1, R.drawable.image_2,
R.drawable.image_3, R.drawable.image_4 , R.drawable.image_5};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mInflater = LayoutInflater.from(this);
views = new LinkedList<View>();
for(int i=0;i<strings.length;i++){
ImageView view = (ImageView) mInflater.inflate(
R.layout.imageview, null);
view.setImageResource(strings[i]);
views.add(view);
}
shufflingPicture = (ShufflingPicture) findViewById(R.id.shuffling_picture);
shufflingPicture.setViews(views);
}
}
activity的布局文件如下：activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:my="http://schemas.android.com/apk/res/com.demo.shufflingpicture"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.demo.shufflingpicture.MainActivity" >
<com.demo.shufflingpicture.ShufflingPicture
android:id="@+id/shuffling_picture"
android:layout_width="match_parent"
android:layout_height="match_parent"
my:pointDrawbleNormal="@drawable/point_normal"
my:pointDrawbleSelect="@drawable/point_select"
android:layout_gravity="center_vertical|center_horizontal"/>
</RelativeLayout>
主要就是为自定义的属性添加图片。
到这里，我们自定义轮播图view已经讲完，看不太懂的朋友可以问我，谢谢大家，
源码的下载地址：http://download.csdn.net/detail/kai_1215/8759761
410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
