图片轮播4种方法思路

第一种方法 图片自动依次轮播,第一轮轮播完,重新回到第一张轮播,但是界面不会后退去定位到第一张图片

main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="fill_parent"
        android:layout_height="120dp"
        android:background="@drawable/icon" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="fill_parent"
        android:layout_height="120dp"
        android:background="@drawable/expriment" />

</RelativeLayout>

IamgeTranslatActivity

package com.test;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

public class IamgeTranslatActivity extends Activity {

	public ImageView imageView;
	public ImageView imageView2;

	public Animation animation1;
	public Animation animation2;

	public boolean juage = true;

	// 需要播放的图片集合
	public int images[] = new int[] { R.drawable.icon, R.drawable.expriment,
			R.drawable.changer, R.drawable.dataline, R.drawable.preffitication };

	// 播放次数
	public int count = 0;

	public Handler handler = new Handler();

	public Runnable runnable = new Runnable() {

		@Override
		public void run() {
			AnimationSet animationSet1 = new AnimationSet(true);
			AnimationSet animationSet2 = new AnimationSet(true);
			imageView2.setVisibility(View.VISIBLE);
			TranslateAnimation ta = new TranslateAnimation(
					Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
					-1f, Animation.RELATIVE_TO_SELF, 0f,
					Animation.RELATIVE_TO_SELF, 0f);
			ta.setDuration(1000);
			animationSet1.addAnimation(ta);
			animationSet1.setFillAfter(true);
			ta = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 1.0f,
					Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
					0f, Animation.RELATIVE_TO_SELF, 0f);
			ta.setDuration(1000);
			animationSet2.addAnimation(ta);
			animationSet2.setFillAfter(true);
			imageView.setBackgroundResource(images[count % 5]);
			count++;
			imageView2.setBackgroundResource(images[count % 5]);
			// iamgeView 出去 imageView2 进来
			imageView.startAnimation(animationSet1);
			imageView2.startAnimation(animationSet2);

			if (juage)
				handler.postDelayed(runnable, 1000);
		}

	};

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		setContentView(R.layout.main);
		imageView = (ImageView) findViewById(R.id.imageView);
		imageView2 = (ImageView) findViewById(R.id.imageView2);
		imageView2.setVisibility(View.GONE);
		// 延时delayMillis毫秒 将Runnable插入消息列队
		handler.postDelayed(runnable, 1000);
	}

	/**
	 * 程序正常启动:onCreate()->onStart()->onResume();
	 * 正常退出:onPause()->onStop()->onDestory() 一个Activity启动另一个Activity:
	 * onPause()->onStop(), 再返回:onRestart()->onStart()->onResume() 程序按back 退出:
	 * onPause()->onStop()->onDestory(),再进入:onCreate()->onStart()->onResume();
	 * 程序按home 退出: onPause()->onStop(),再进入:onRestart()->onStart()->onResume();
	 */
	public void onPause() {
		juage = false;
		super.onPause();
	}
}

第二种方法  手势可以滑动页面,也可以自动轮播,但是bug是手势滑动的同时,也会自动轮播

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"
    tools:context="com.example.lunbodemo.MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    </android.support.v4.view.ViewPager>

</RelativeLayout>

MainActivity

package com.example.lunbodemo;

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;

public class MainActivity extends Activity {
	private int imageIds[];
	private ArrayList<ImageView> images;
	private ViewPager mViewPager;
	private ViewPagerAdapter adapter;
	private ScheduledExecutorService scheduledExecutorService;
	private int currentItem; // 当前页面

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		imageIds = new int[] { R.drawable.a, R.drawable.b, R.drawable.c,
				R.drawable.d, R.drawable.e };

		images = new ArrayList<ImageView>();
		for (int i = 0; i < imageIds.length; i++) {
			ImageView imageView = new ImageView(this);
			imageView.setBackgroundResource(imageIds[i]);
			images.add(imageView);
		}

		mViewPager = (ViewPager) findViewById(R.id.viewpager);
		adapter = new ViewPagerAdapter();
		mViewPager.setAdapter(adapter);

		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
			@Override
			public void onPageSelected(int position) {
				currentItem = position;
			}

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

			@Override
			public void onPageScrollStateChanged(int arg0) {
			}
		});
	}

	@Override
	protected void onStart() {
		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;
			// message 从handler 类获取,从而可以直接向该handler 对象发送消息
			/**
			 * 另外写法
			 * Message msg=new Message();
			    msg.arg1=i;
			    handler.sendMessage(msg);
			 */
			handler.obtainMessage().sendToTarget();
		}
	}

	private Handler handler = new Handler() {
		@Override
		public void handleMessage(Message msg) {
			// 设置当前页面
			mViewPager.setCurrentItem(currentItem);
		}
	};

	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);
		}
	}

}

另外2种方法

http://blog.csdn.net/u013210620/article/details/46537283

http://blog.csdn.net/u013210620/article/details/44105803

时间: 2024-10-16 09:16:53

图片轮播4种方法思路的相关文章

图片轮播 -两种自动定时方式

方式一: <script> window.onload=load; function load(){ var arrImgs=['1.jpg','2.jpg','3.jpg','4.jpg']; var img = document.getElementById("img"); var index =0; img.onclick=changeImg;//点击图片实现轮播 setInterval(changeImg,500);//自动轮播图片方式1 //轮播图片 functi

图片轮播_支持显示网络图片及下载图片至SD后再显示

现在的移动应用, 很常见的一个交互效果就是在首页顶部添加图片轮播的控件, 焦点图可以放入广告, 也可以放入文章的内容图片, 它们不断自动切换, 点击焦点图即跳至对应的界面. 交互效果很棒. 做图片轮播的效果, 方法并不少. 本文使用了常见的viewpager 去实现. 支持显示网络图片下载在缓存显示, 如果有SD卡则默认将图片下载至SD卡中再显示本地的图片. 其实网上这类代码已经很多,  应该也有很多写得比我好. 今天有点时间, 就做了个来练手, 顺便写下自己第一篇原创文章. 敲代码之前也参考了

MUI组件二:复选框、对话框、图片轮播、图标和输入框

1.checkbox(复选框) checkbox常用于多选的情况,比如批量删除.添加群聊等: DOM结构 <div class="mui-input-row mui-checkbox"> <label>checkbox示例</label> <input name="checkbox1" value="Item 1" type="checkbox" checked> </di

元素轮播之图片轮播

图片轮播是很多站点的一个需求,实现图片轮播效果的方法有多种 方法一:(淡入式) 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript" src="JS/jquery-1.11.3.js"></script> 6 <style type="text/cs

关于图片轮播的几种思路

图片轮播我们经常在众多网站中看到,各种轮播特效在有限的空间上展示了几倍于空间大小的内容,并且有着良好的视觉效果.很多初学js的小伙伴都会拿这个来练习.我也不例外,所以在此分享几个我写轮播图的过程,代码不足之处请多指教哦,相互学习. 好了,先来说第一种轮播特效: 就是通过修改每一张图片的透明度,让其每隔一段时间将其中的某一张图片透明度设为1,而其它的设为0,从而实现一种图片轮流播放的效果. 这种效果的思路比较简单,首先让一组图片绝对定位,让其重叠在一起,然后通过一个函数来控制图片的透明度变化.同时

图片轮播 z-index方法

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>图片轮播 z-index方法</title> <style type="text/css">*{margin: 0;padding: 0;text-decoration: none;}#container{width: 600px; height: 400px; bor

UIScrollView实现图片轮播器及其无限循环效果

图片轮播器: 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegate> 4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; 5 /** 6 * 页码 7 */ 8 @prop

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

12款经典的白富美型—jquery图片轮播插件—前端开发必备

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ?  16个独特的过渡效果?