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