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

最新推荐文章于 2024-05-15 09:44:59 发布

冰河

最新推荐文章于 2024-05-15 09:44:59 发布

阅读量5.3w

点赞数 24

分类专栏：精通移动端系列文章标签： android 动画图片 viewpager 广告

本文链接：https://blog.csdn.net/l1028386804/article/details/48049913

版权

精通移动端系列专栏收录该内容

94 篇文章 7 订阅

订阅专栏

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

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

一、原理

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

二、实现

1、程序启动界面MainActivity

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

1)成员变量

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

具体代码如下:

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设置页面变化监听事件。

具体实现代码如下:

@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中实现了图片切换的动画效果

将具体实现代码如下:

/**
 * 自定义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()方法

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

具体实现代码如下：

/**
 * 利用线程池定时执行动画轮播
 */
@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发送空消息即可。

具体实现代码如下:

/**
 * 图片轮播任务
 * @author liuyazhuang
 *
 */
private class ViewPageTask implements Runnable{

	@Override
	public void run() {
		currentItem = (currentItem + 1) % imageIds.length;
		mHandler.sendEmptyMessage(0);
	}
}

6)handler

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

具体实现代码如下：

/**
 * 接收子线程传递过来的数据
 */
private Handler mHandler = new Handler(){
	public void handleMessage(android.os.Message msg) {
		mViewPaper.setCurrentItem(currentItem);
	};
};

7)onStop

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

具体代码如下:

@Override
protected void onStop() {
	// TODO Auto-generated method stub
	super.onStop();
	if(scheduledExecutorService != null){
		scheduledExecutorService.shutdown();
		scheduledExecutorService = null;
	}
}

8)完整代码如下：

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

具体实现代码如下：

<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

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

具体代码如下：

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

三、运行效果

四、温馨提示

大家可以到链接http://download.csdn.net/detail/l1028386804/9057555下载Android图片轮播效果实现完整源代码

本实例中，为了方面，我把一些文字直接写在了布局文件中和相关的类中，大家在真实的项目中要把这些文字写在string.xml文件中，在外部引用这些资源，切记，这是作为一个Android程序员最基本的开发常识和规范，我在这里只是为了方便直接写在了类和布局文件中。

冰河

关注

24
点赞
踩
111

收藏

觉得还不错? 一键收藏
打赏
21
评论
Android之——史上最简单图片轮播广告效果实现

如今的Android开发需求越来越来多，实现效果越来越酷炫，很多Android APP都要实现PC网站上那样的图片轮播效果，那么，这些图片的轮播效果是如何实现的呢？下面，我就跟大家一起来实现这些酷炫的功能。一、原理首先，将这些要轮播的图片和一些文本分别放置在不同的数据集合中，程序启动的时候默认显示一组图片和文本数据，然后启动一个定时器，每隔一段时间便替换掉显示的图片和文本数据，同时加入一些
复制链接

扫一扫