viewpager实现轮播图效果

在很多app中我们都有轮播图的效果,特别是一些电商类的app,大部分都有此功能,今天就简单的模仿下,还有一个自动跳动的小功能,这个用定时器实现就行,话不多说直接上代码:

import java.util.ArrayList;
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.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {
    private int imageIds[];
	private String[] titles;
	private ArrayList<ImageView> images;
	private ArrayList<View> dots;
	private TextView title;
	private ViewPager mViewPager;
	private ViewPagerAdapter adapter;
	private int oldPosition = 0;//记录上一次点的位置
	private int currentItem; //当前页面
	private ScheduledExecutorService scheduledExecutorService;
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //图片ID
        imageIds = new int[]{
        	R.drawable.a,
        	R.drawable.b,
        	R.drawable.c,
        	R.drawable.d,
        	R.drawable.e
        };
        //图片标题
        titles = new String[]{
        	"巩俐不低俗,我就不能低俗",
        	"扑树又回来啦!再唱经典老歌引万人大合唱",
        	"揭秘北京电影如何升级",
        	"乐视网TV版大派送",
        	"热血屌丝的反杀"
        };
        //显示的图片
        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]);
        mViewPager = (ViewPager) findViewById(R.id.vp);
        adapter = new ViewPagerAdapter();
        mViewPager.setAdapter(adapter);
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
			@Override
			public void onPageSelected(int position) {
				title.setText(titles[position]);
				dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);
				dots.get(position).setBackgroundResource(R.drawable.dot_focused);
				oldPosition = position;
				currentItem = position;
			}
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
			}
			@Override
			public void onPageScrollStateChanged(int arg0) {
			}
		});
    }
	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) {
			view.removeView(images.get(position));
		}
		@Override
		public Object instantiateItem(ViewGroup view, int position) {
			view.addView(images.get(position));
			return images.get(position);
		}
	}

	@Override
	protected void onStart() {
		// TODO Auto-generated method stub
		super.onStart();
		scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
		//每隔2秒钟切换一张图片
		scheduledExecutorService.scheduleWithFixedDelay(new ViewPagerTask(), 2, 2, TimeUnit.SECONDS);
	}

	//切换图片
	private class ViewPagerTask implements Runnable {
		@Override
		public void run() {
			currentItem = (currentItem +1) % imageIds.length;
			//更新界面
			handler.obtainMessage().sendToTarget();
		}
	}
	private Handler handler = new Handler(){
		@Override
		public void handleMessage(Message msg) {
			//设置当前页面
			mViewPager.setCurrentItem(1);
		}
	};
}

效果图:

时间: 2024-12-18 13:26:43

viewpager实现轮播图效果的相关文章

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

最近开发中需要做一个类似京东首页那样的广告轮播效果,于是采用ViewPager自己自定义了一个轮播图效果的View. 主要原理就是利用定时任务器定时切换ViewPager的页面. 效果图如下: 主页面布局实现如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

【学习ios之路:UI系列】实现轮播图效果(UIImageView,UIScrollView,UIPageControl,NSTimer相结合)

实现效果,在不点击的情况下,自定滚动,点击时,停止.如下图 部分代码如下: //调用NSTimer方法,自定计时 - (void)autoScroll { self.timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self  selector:@selector(scrollToRight) userInfo:nil repeats:YES]; } //实现触发方法 - (void)scrollToRight { [UIVie

AngularJS:实现轮播图效果

要实现这个功能,可以https://github.com/sroze/ngInfiniteScroll这个第三方控件实现的.实现步骤如下: 1. 下载ng-infinite-scroll.js程序http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(

Html5如何快速在页面中写出多个轮播图效果

我们在做项目的过程中,有时候客户需求要求你在同一个页面中,写几个不同样式的轮播图效果,那么如何快速实现呢?(要知道若果你每个轮播图都要用原生javascript写的话,会很麻烦,代码也不够简洁) 这里我们就可以借助插件来实现这一功能,swiper.js就是一个专门处理轮播图效果的js库,下面举例来说明: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g

花瓣网轮播图效果

没有加上定时器效果,仅仅能手动进行图片的切换 效果图: index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>index</title> &

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

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

JS学习笔记--轮播图效果

希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代码 <style> ul, ol { padding:0; margin:0; } li { list-style:none; } #box { width:600px; height:350px; border:10px solid #ccc; margin:0 auto; position:r

模仿轮播图效果

<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <title>手写轮播图效果</title> <style> #imgsDiv{position: relative;height: 400px;} .picDiv{ position: absolute; top:0; left:0; width:100%; h