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

原文出处：http://www.it165.net/pro/html/201406/16227.html#

最近开发中需要做一个类似京东首页那样的广告轮播效果，于是采用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.

/>