Android之——史上最简单图片轮播广告效果实现

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48049913

如今的Android开发需求越来越来多，实现效果越来越酷炫，很多Android APP都要实现PC网站上那样的图片轮播效果，那么，这些图片的轮播效果是如何实现的呢？下面，我就跟大家一起来实现这些酷炫的功能。

一、原理

首先，将这些要轮播的图片和一些文本分别放置在不同的数据集合中，程序启动的时候默认显示一组图片和文本数据，然后启动一个定时器，每隔一段时间便替换掉显示的图片和文本数据，同时加入一些动画效果，已达到轮播的特效。同时，我们也要实现手指滑动图片达到轮播的效果。

二、实现

1、程序启动界面MainActivity

我将所有的实现都放在了MainActivity中，下面我们就来分解来看这个类。

1)成员变量

这些成员变量包括界面上显示的控件，存放图片的id数组，存放图片的标题数组，自定义的ViewPagerAdapter适配器，线程池ScheduledExecutorService

具体代码如下:

[java] view
plain copy

private ViewPager mViewPaper;

private List<ImageView> images;

private List<View> dots;

private int currentItem;

//记录上一次点的位置

private int oldPosition = 0;

//存放图片的id

private int[] imageIds = new int[]{

R.drawable.a,

R.drawable.b,

R.drawable.c,

R.drawable.d,

R.drawable.e

};

//存放图片的标题

private String[] titles = new String[]{

"巩俐不低俗，我就不能低俗",

"扑树又回来啦！再唱经典老歌引万人大合唱",

"揭秘北京电影如何升级",

"乐视网TV版大派送",

"热血屌丝的反杀"

};

private TextView title;

private ViewPagerAdapter adapter;

private ScheduledExecutorService scheduledExecutorService;


2)onCreate方法

这个方法是程序启动创建界面时的回调方法，这个方法中主要实现的功能就是初始化界面，同时为ViewPager设置页面变化监听事件。

具体实现代码如下:

[java] view
plain copy

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mViewPaper = (ViewPager) findViewById(R.id.vp);

//显示的图片

images = new ArrayList<ImageView>();

for(int i = 0; i < imageIds.length; i++){

ImageView imageView = new ImageView(this);

imageView.setBackgroundResource(imageIds[i]);

images.add(imageView);

}

//显示的小点

dots = new ArrayList<View>();

dots.add(findViewById(R.id.dot_0));

dots.add(findViewById(R.id.dot_1));

dots.add(findViewById(R.id.dot_2));

dots.add(findViewById(R.id.dot_3));

dots.add(findViewById(R.id.dot_4));

title = (TextView) findViewById(R.id.title);

title.setText(titles[0]);

adapter = new ViewPagerAdapter();

mViewPaper.setAdapter(adapter);

mViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

public void onPageSelected(int position) {

title.setText(titles[position]);

dots.get(position).setBackgroundResource(R.drawable.dot_focused);

dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);

oldPosition = position;

currentItem = position;

}

@Override

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

}

@Override

public void onPageScrollStateChanged(int arg0) {

}

});

}


3)自定义Adapter类ViewPagerAdapter

这个自定义的Adapter类不同于以往的自定义Adapter类，它继承自PagerAdapter，PagerAdapter中实现了图片切换的动画效果

将具体实现代码如下:

[java] view
plain copy

/**

* 自定义Adapter

* @author liuyazhuang

*

*/

private class ViewPagerAdapter extends PagerAdapter{

@Override

public int getCount() {

return images.size();

}

@Override

public boolean isViewFromObject(View arg0, Object arg1) {

return arg0 == arg1;

}

@Override

public void destroyItem(ViewGroup view, int position, Object object) {

// TODO Auto-generated method stub

// super.destroyItem(container, position, object);

// view.removeView(view.getChildAt(position));

// view.removeViewAt(position);

view.removeView(images.get(position));

}

@Override

public Object instantiateItem(ViewGroup view, int position) {

// TODO Auto-generated method stub

view.addView(images.get(position));

return images.get(position);

}

}


4)onStart()方法

这个方法是界面创建完成，启动时的回调方法，我在这个方法中完成的操作是，创建线程池启动定时调度任务，调用自定义的线程任务，实现定时实现图片轮播效果。

具体实现代码如下：

[java] view
plain copy

/**

* 利用线程池定时执行动画轮播

*/

@Override

protected void onStart() {

// TODO Auto-generated method stub

super.onStart();

scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();

scheduledExecutorService.scheduleWithFixedDelay(

new ViewPageTask(),

2,

2,

TimeUnit.SECONDS);

}


5)图片轮播任务ViewPageTask

这个类实现了Runnable接口，在run方法中实现了图片轮播的显示效果，并通过handler通知UI线程，UI线程更新界面显示，这里我们不需要传递任何数据，所以通过handler发送空消息即可。

具体实现代码如下:

[java] view
plain copy

/**

* 图片轮播任务

* @author liuyazhuang

*

*/

private class ViewPageTask implements Runnable{

@Override

public void run() {

currentItem = (currentItem + 1) % imageIds.length;

mHandler.sendEmptyMessage(0);

}

}


6)handler

接收ViewPageTask消息完成UI更新操作

具体实现代码如下：

[java] view
plain copy

/**

* 接收子线程传递过来的数据

*/

private Handler mHandler = new Handler(){

public void handleMessage(android.os.Message msg) {

mViewPaper.setCurrentItem(currentItem);

};

};


7)onStop

我在这个方法中主要实现的操作就是停止线程池的执行，释放线程池资源。

具体代码如下:

[java] view
plain copy

@Override

protected void onStop() {

// TODO Auto-generated method stub

super.onStop();

if(scheduledExecutorService != null){

scheduledExecutorService.shutdown();

scheduledExecutorService = null;

}

}


8)完整代码如下：

[java] view
plain copy

package com.lyz.viewpage.activity;

import java.util.ArrayList;

import java.util.List;

import java.util.concurrent.Executors;

import java.util.concurrent.ScheduledExecutorService;

import java.util.concurrent.TimeUnit;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.view.Menu;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.TextView;

/**

* 程序主入口

* @author liuyazhuang

*

*/

public class MainActivity extends Activity {

private ViewPager mViewPaper;

private List<ImageView> images;

private List<View> dots;

private int currentItem;

//记录上一次点的位置

private int oldPosition = 0;

//存放图片的id

private int[] imageIds = new int[]{

R.drawable.a,

R.drawable.b,

R.drawable.c,

R.drawable.d,

R.drawable.e

};

//存放图片的标题

private String[] titles = new String[]{

"巩俐不低俗，我就不能低俗",

"扑树又回来啦！再唱经典老歌引万人大合唱",

"揭秘北京电影如何升级",

"乐视网TV版大派送",

"热血屌丝的反杀"

};

private TextView title;

private ViewPagerAdapter adapter;

private ScheduledExecutorService scheduledExecutorService;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mViewPaper = (ViewPager) findViewById(R.id.vp);

//显示的图片

images = new ArrayList<ImageView>();

for(int i = 0; i < imageIds.length; i++){

ImageView imageView = new ImageView(this);

imageView.setBackgroundResource(imageIds[i]);

images.add(imageView);

}

//显示的小点

dots = new ArrayList<View>();

dots.add(findViewById(R.id.dot_0));

dots.add(findViewById(R.id.dot_1));

dots.add(findViewById(R.id.dot_2));

dots.add(findViewById(R.id.dot_3));

dots.add(findViewById(R.id.dot_4));

title = (TextView) findViewById(R.id.title);

title.setText(titles[0]);

adapter = new ViewPagerAdapter();

mViewPaper.setAdapter(adapter);

mViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

public void onPageSelected(int position) {

title.setText(titles[position]);

dots.get(position).setBackgroundResource(R.drawable.dot_focused);

dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);

oldPosition = position;

currentItem = position;

}

@Override

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

}

@Override

public void onPageScrollStateChanged(int arg0) {

}

});

}

/**

* 自定义Adapter

* @author liuyazhuang

*

*/

private class ViewPagerAdapter extends PagerAdapter{

@Override

public int getCount() {

return images.size();

}

@Override

public boolean isViewFromObject(View arg0, Object arg1) {

return arg0 == arg1;

}

@Override

public void destroyItem(ViewGroup view, int position, Object object) {

// TODO Auto-generated method stub

// super.destroyItem(container, position, object);

// view.removeView(view.getChildAt(position));

// view.removeViewAt(position);

view.removeView(images.get(position));

}

@Override

public Object instantiateItem(ViewGroup view, int position) {

// TODO Auto-generated method stub

view.addView(images.get(position));

return images.get(position);

}

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

/**

* 利用线程池定时执行动画轮播

*/

@Override

protected void onStart() {

// TODO Auto-generated method stub

super.onStart();

scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();

scheduledExecutorService.scheduleWithFixedDelay(

new ViewPageTask(),

2,

2,

TimeUnit.SECONDS);

}

/**

* 图片轮播任务

* @author liuyazhuang

*

*/

private class ViewPageTask implements Runnable{

@Override

public void run() {

currentItem = (currentItem + 1) % imageIds.length;

mHandler.sendEmptyMessage(0);

}

}

/**

* 接收子线程传递过来的数据

*/

private Handler mHandler = new Handler(){

public void handleMessage(android.os.Message msg) {

mViewPaper.setCurrentItem(currentItem);

};

};

@Override

protected void onStop() {

// TODO Auto-generated method stub

super.onStop();

if(scheduledExecutorService != null){

scheduledExecutorService.shutdown();

scheduledExecutorService = null;

}

}

}

2、布局activity_main.xml

具体实现代码如下：

[html] view
plain copy

<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" >

<FrameLayout

android:layout_width="match_parent"

android:layout_height="200dip" >

<android.support.v4.view.ViewPager

android:id="@+id/vp"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<LinearLayout

android:layout_width="match_parent"

android:layout_height="35dip"

android:layout_gravity="bottom"

android:background="#33000000"

android:gravity="center"

android:orientation="vertical" >

<TextView

android:id="@+id/title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="图片标题"

android:textColor="@android:color/white" />

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="3dip"

android:orientation="horizontal" >

<View

android:id="@+id/dot_0"

android:layout_width="5dip"

android:layout_height="5dip"

android:layout_marginLeft="2dip"

android:layout_marginRight="2dip"

android:background="@drawable/dot_focused"/>

<View

android:id="@+id/dot_1"

android:layout_width="5dip"

android:layout_height="5dip"

android:layout_marginLeft="2dip"

android:layout_marginRight="2dip"

android:background="@drawable/dot_normal"/>

<View

android:id="@+id/dot_2"

android:layout_width="5dip"

android:layout_height="5dip"

android:layout_marginLeft="2dip"

android:layout_marginRight="2dip"

android:background="@drawable/dot_normal"/>

<View

android:id="@+id/dot_3"

android:layout_width="5dip"

android:layout_height="5dip"

android:layout_marginLeft="2dip"

android:layout_marginRight="2dip"

android:background="@drawable/dot_normal"/>

<View

android:id="@+id/dot_4"

android:layout_width="5dip"

android:layout_height="5dip"

android:layout_marginLeft="2dip"

android:layout_marginRight="2dip"

android:background="@drawable/dot_normal"/>

</LinearLayout>

</LinearLayout>

</FrameLayout>

</RelativeLayout>

3、AndroidManifest.xml

这个文件不需要做任何更新。

具体代码如下：

[html] view
plain copy

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

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

package="com.lyz.viewpage.activity"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk

android:minSdkVersion="10"

android:targetSdkVersion="18" />

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name="com.lyz.viewpage.activity.MainActivity"

android:label="@string/app_name" >

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

</application>

</manifest>