Android开发之ViewPager实现轮播图（轮播广告）效果的自定义View---转

最近开发中需要做一个类似京东首页那样的广告轮播效果，于是采用ViewPager自己自定义了一个轮播图效果的View。

主要原理就是利用定时任务器定时切换ViewPager的页面。

主页面布局实现如下：

view sourceprint?

01.<?xml version="1.0" encoding="utf-8"?>

02. 

03.<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

04.android:layout_width="match_parent"

05.android:layout_height="match_parent">

06. 

07.<android.support.v4.view.ViewPager

08.android:id="@+id/viewPager"

09.android:layout_width="match_parent"

10.android:layout_height="match_parent" />

11. 

12.<LinearLayout

13.android:layout_width="match_parent"

14.android:layout_height="wrap_content"

15.android:layout_alignParentBottom="true"

16.android:padding="5dp"

17.android:gravity="center"

18.android:orientation="horizontal">

19. 

20.<View

21.android:id="@+id/v_dot1"

22.android:layout_width="8dp"

23.android:layout_height="8dp"

24.android:background="@drawable/dot_black" />

25. 

26.<View

27.android:id="@+id/v_dot2"

28.android:layout_width="8dp"

29.android:layout_height="8dp"

30.android:layout_marginLeft="5dp"

31.android:background="@drawable/dot_white" />

32. 

33.<View

34.android:id="@+id/v_dot3"

35.android:layout_width="8dp"

36.android:layout_height="8dp"

37.android:layout_marginLeft="5dp"

38.android:background="@drawable/dot_white" />

39. 

40.<View

41.android:id="@+id/v_dot4"

42.android:layout_width="8dp"

43.android:layout_height="8dp"

44.android:layout_marginLeft="5dp"

45.android:background="@drawable/dot_white" />

46. 

47.<View

48.android:id="@+id/v_dot5"

49.android:layout_width="8dp"

50.android:layout_height="8dp"

51.android:layout_marginLeft="5dp"

52.android:background="@drawable/dot_white" />

53. 

54.</LinearLayout>

55.</RelativeLayout>

轮播效果视图类代码实现如下：

view sourceprint?

001.package com.czm.customview;

002. 

003.import java.util.ArrayList;

004.import java.util.List;

005.import java.util.concurrent.Executors;

006.import java.util.concurrent.ScheduledExecutorService;

007.import java.util.concurrent.TimeUnit;

008. 

009.import android.content.Context;

010.import android.graphics.drawable.Drawable;

011.import android.os.Handler;

012.import android.os.Message;

013.import android.os.Parcelable;

014.import android.support.v4.view.PagerAdapter;

015.import android.support.v4.view.ViewPager;

016.import android.support.v4.view.ViewPager.OnPageChangeListener;

017.import android.util.AttributeSet;

018.import android.view.LayoutInflater;

019.import android.view.View;

020.import android.widget.FrameLayout;

021.import android.widget.ImageView;

022.import android.widget.ImageView.ScaleType;

023. 

024. 

025./**

026.* ViewPager实现的轮播图广告自定义视图，如京东首页的广告轮播图效果；

027.* 既支持自动轮播页面也支持手势滑动切换页面

028.* @author caizhiming

029.*

030.*/

031. 

032.public class SlideShowView extends FrameLayout {

033. 

034.//轮播图图片数量

035.private final static int IMAGE_COUNT = 5;

036.//自动轮播的时间间隔

037.private final static int TIME_INTERVAL = 5;

038.//自动轮播启用开关

039.private final static boolean isAutoPlay = true;

040. 

041.//自定义轮播图的资源ID

042.private int[] imagesResIds;

043.//放轮播图片的ImageView 的list

044.private List<ImageView> imageViewsList;

045.//放圆点的View的list

046.private List<View> dotViewsList;

047. 

048.private ViewPager viewPager;

049.//当前轮播页

050.private int currentItem  = 0;

051.//定时任务

052.private ScheduledExecutorService scheduledExecutorService;

053.//Handler

054.private Handler handler = new Handler(){

055. 

056.@Override

057.public void handleMessage(Message msg) {

058.// TODO Auto-generated method stub

059.super.handleMessage(msg);

060.viewPager.setCurrentItem(currentItem);

061.}

062. 

063.};

064. 

065.public SlideShowView(Context context) {

066.this(context,null);

067.// TODO Auto-generated constructor stub

068.}

069.public SlideShowView(Context context, AttributeSet attrs) {

070.this(context, attrs, 0);

071.// TODO Auto-generated constructor stub

072.}

073.public SlideShowView(Context context, AttributeSet attrs, int defStyle) {

074.super(context, attrs, defStyle);

075.// TODO Auto-generated constructor stub

076.initData();

077.initUI(context);

078.if(isAutoPlay){

079.startPlay();

080.}

081. 

082.}

083./**

084.* 开始轮播图切换

085.*/

086.private void startPlay(){

087.scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();

088.scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1, 4, TimeUnit.SECONDS);

089.}

090./**

091.* 停止轮播图切换

092.*/

093.private void stopPlay(){

094.scheduledExecutorService.shutdown();

095.}

096./**

097.* 初始化相关Data

098.*/

099.private void initData(){

100.imagesResIds = new int[]{

101.R.drawable.pic1,

102.R.drawable.pic2,

103.R.drawable.pic3,

104.R.drawable.pic4,

105.R.drawable.pic5,

106. 

107.};

108.imageViewsList = new ArrayList<ImageView>();

109.dotViewsList = new ArrayList<View>();

110. 

111.}

112./**

113.* 初始化Views等UI

114.*/

115.private void initUI(Context context){

116.LayoutInflater.from(context).inflate(R.layout.layout_slideshow, this, true);

117.for(int imageID : imagesResIds){

118.ImageView view =  new ImageView(context);

119.view.setImageResource(imageID);

120.view.setScaleType(ScaleType.FIT_XY);

121.imageViewsList.add(view);

122.}

123.dotViewsList.add(findViewById(R.id.v_dot1));

124.dotViewsList.add(findViewById(R.id.v_dot2));

125.dotViewsList.add(findViewById(R.id.v_dot3));

126.dotViewsList.add(findViewById(R.id.v_dot4));

127.dotViewsList.add(findViewById(R.id.v_dot5));

128. 

129.viewPager = (ViewPager) findViewById(R.id.viewPager);

130.viewPager.setFocusable(true);

131. 

132.viewPager.setAdapter(new MyPagerAdapter());

133.viewPager.setOnPageChangeListener(new MyPageChangeListener());

134.}

135. 

136./**

137.* 填充ViewPager的页面适配器

138.* @author caizhiming

139.*/

140.private class MyPagerAdapter  extends PagerAdapter{

141. 

142.@Override

143.public void destroyItem(View container, int position, Object object) {

144.// TODO Auto-generated method stub

145.//((ViewPag.er)container).removeView((View)object);

146.((ViewPager)container).removeView(imageViewsList.get(position));

147.}

148. 

149.@Override

150.public Object instantiateItem(View container, int position) {

151.// TODO Auto-generated method stub

152.((ViewPager)container).addView(imageViewsList.get(position));

153.return imageViewsList.get(position);

154.}

155. 

156.@Override

157.public int getCount() {

158.// TODO Auto-generated method stub

159.return imageViewsList.size();

160.}

161. 

162.@Override

163.public boolean isViewFromObject(View arg0, Object arg1) {

164.// TODO Auto-generated method stub

165.return arg0 == arg1;

166.}

167.@Override

168.public void restoreState(Parcelable arg0, ClassLoader arg1) {

169.// TODO Auto-generated method stub

170. 

171.}

172. 

173.@Override

174.public Parcelable saveState() {

175.// TODO Auto-generated method stub

176.return null;

177.}

178. 

179.@Override

180.public void startUpdate(View arg0) {

181.// TODO Auto-generated method stub

182. 

183.}

184. 

185.@Override

186.public void finishUpdate(View arg0) {

187.// TODO Auto-generated method stub

188. 

189.}

190. 

191.}

192./**

193.* ViewPager的监听器

194.* 当ViewPager中页面的状态发生改变时调用

195.* @author caizhiming

196.*/

197.private class MyPageChangeListener implements OnPageChangeListener{

198. 

199.boolean isAutoPlay = false;

200. 

201.@Override

202.public void onPageScrollStateChanged(int arg0) {

203.// TODO Auto-generated method stub

204.switch (arg0) {

205.case 1:// 手势滑动，空闲中

206.isAutoPlay = false;

207.break;

208.case 2:// 界面切换中

209.isAutoPlay = true;

210.break;

211.case 0:// 滑动结束，即切换完毕或者加载完毕

212.// 当前为最后一张，此时从右向左滑，则切换到第一张

213.if (viewPager.getCurrentItem() == viewPager.getAdapter().getCount() - 1 && !isAutoPlay) {

214.viewPager.setCurrentItem(0);

215.}

216.// 当前为第一张，此时从左向右滑，则切换到最后一张

217.else if (viewPager.getCurrentItem() == 0 && !isAutoPlay) {

218.viewPager.setCurrentItem(viewPager.getAdapter().getCount() - 1);

219.}

220.break;

221.}

222.}

223. 

224.@Override

225.public void onPageScrolled(int arg0, float arg1, int arg2) {

226.// TODO Auto-generated method stub

227. 

228.}

229. 

230.@Override

231.public void onPageSelected(int pos) {

232.// TODO Auto-generated method stub

233. 

234.currentItem = pos;

235.for(int i=0;i < dotViewsList.size();i++){

236.if(i == pos){

237.((View)dotViewsList.get(pos)).setBackgroundResource(R.drawable.dot_black);

238.}else {

239.((View)dotViewsList.get(i)).setBackgroundResource(R.drawable.dot_white);

240.}

241.}

242.}

243. 

244.}

245. 

246./**

247.*执行轮播图切换任务

248.*@author caizhiming

249.*/

250.private class SlideShowTask implements Runnable{

251. 

252.@Override

253.public void run() {

254.// TODO Auto-generated method stub

255.synchronized (viewPager) {

256.currentItem = (currentItem+1)%imageViewsList.size();

257.handler.obtainMessage().sendToTarget();

258.}

259.}

260. 

261.}

262./**

263.* 销毁ImageView资源，回收内存

264.* @author caizhiming

265.*/

266.private void destoryBitmaps() {

267. 

268.for (int i = 0; i < IMAGE_COUNT; i++) {

269.ImageView imageView = imageViewsList.get(i);

270.Drawable drawable = imageView.getDrawable();

271.if (drawable != null) {

272.//解除drawable对view的引用

273.drawable.setCallback(null);

274.}

275.}

276.}

277. 

278.}

如何引用上面自定义的轮播图效果视图View呢？其实很引用普通的View类似，实现如下：

view sourceprint?

1.<com.czm.customview.SlideShowView

2.android:id="@+id/slideshowView"

3.android:layout_width="335dp"

4.android:layout_height="120dp"

5.android:layout_centerHorizontal="true"

6./>

 

 

转自：http://www.it165.net/pro/html/201406/16227.html