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

转载请注明出处: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程序员最基本的开发常识和规范，我在这里只是为了方便直接写在了类和布局文件中。

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-11-03 03:38:37

Android之——史上最简单图片轮播广告效果实现的相关文章

最简单的轮播广告(原生JS)

改变每个图片的opacity属性:来自学友刘斌 素材图片: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>最简单的轮播广告</title> 6 <style> 7 body, div, ul, li { 8 margin: 0; 9 padding: 0; 10 } 11

实现比较简单的轮播图效果

实现简单的轮播图效果. 废话不多说,我们开始. HTML和CSS较为简单,不在这里做赘述.简单的给大家一个HTML代码. <div class="carousel"> <div id="goLeft"></div> <ul> <li><img src="" /></li> <li><img src="" /></l

JQuery图片轮播滚动效果(网页效果--每日一更)

今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:http://webfront.verynet.cc/pc/index.html 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的后面,详细请看代码. HTML结构代码如下: 1 <div class="content"> 2 <div class="box"> 3 /*滚动的盒子*/ 4 <ul id

Android之——史上最简单自定义开关按钮的实现

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48102871 很多时候,我们在很多无论是Android还是IOS的APP中都会遇到这样的一种效果,有一个按钮,我们点击一下,便会滑动一下,一会显示"开",一会显示"关",这便是开关按钮了,比如:很多Android手机的设置功能里,就有很多功能是用开关按钮实现的,那么这些开关按钮时如何实现的呢?下面,就让我们一起来实现这个功能吧. 一.原理 我们在界面

Android之——史上最简单最酷炫的3D图片浏览效果的实现

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48052709 如今,Android开发已经成为移动互联开发领域中一支不可或缺的力量,那么Android中要实现3D的效果那也就是合情合理的事情了.那么,如何在Android中实现像IOS中那样的3D图片浏览效果呢?下面,鄙人将重磅推出今天的重点博文,和大家一起在Android中实现酷炫的3D图片浏览效果. 一.原理 老规矩,还是要来啰嗦下原理的东西. 整体实现是以手机屏幕的正中间

【Android】史上最简单，一步集成侧滑(删除)菜单，高仿QQ、IOS

本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 转载请标明出处: http://blog.csdn.net/zxt0601/article/details/53157090 本文出自:[张旭童的博客](http://blog.csdn.net/zxt0601) 代码传送门:喜欢的话,随手点个star.多谢 https://github.com/mcxtzhang/SwipeDelMenuLayout 重要的话 开头说,not for the RecyclerView or L

Android之——史上最简单旋转菜单实现效果

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48048323 由于身体原因,前几天没有给大家更新博客,那么,今天我们就来一起实现一个非常酷炫的旋转菜单效果吧.在很多APP中,不难发现,人家把菜单效果设计的那叫一个酷炫啊,其中一种设计就是将菜单设计成旋转的效果.好了,那么这么酷炫的菜单效果是如何实现的呢?下面,就让我们一起来实现这个酷炫的菜单效果吧. 一.原理 老规矩,还是先唠叨下原理级别的东西. 这个示例的实现原理很简单,利用

基于jquery的简单图片轮播----banner

主要用到的几个JQUERY函数: li:nth-child(2)  第二张图的意思: attr() 方法设置或返回被选元素的属性值. setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. 先说下实现的机制: 首先是一个大盒子,里面三张图片,然后显示的只是其他三分之一中间的位置,其他部分是被隐藏的,通过animate方法,从隐藏的地方把其他的拉出来 这段代码的核心就下面这句话了: oUl.stop(true).animate({"left":-countw

JQ简单图片轮播

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-