Android实现图片轮播效果

本文实例讲述了jaandroid实现图片轮播效果代码，分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：

首先看下一下布局文件：

<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=".mainactivity" >

 <!-- 广告条的使用 -->

 <com.xuliugen.viewpager.myviewpagertransformeranim
 android:id="@+id/viewpager"
 android:layout_width="match_parent"
 android:layout_height="200dp" />

 <!-- 广告条下边的文字 -->

 <linearlayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignbottom="@id/viewpager"
 android:background="#33000000"
 android:orientation="vertical" >

 <textview
  android:id="@+id/image_desc"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:text="@string/app_name"
  android:textcolor="@android:color/white"
  android:textsize="16sp" />

 <linearlayout
  android:id="@+id/point_group"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center_horizontal"
  android:layout_marginbottom="5dp"
  android:orientation="horizontal" >
 </linearlayout>
 </linearlayout>

</relativelayout>

效果很简单，从布局文件中我们看到使用了一个自定义的viewpager动画，代码如下：

 

package com.xuliugen.viewpager;

import java.util.hashmap;
import java.util.map;

import android.content.context;
import android.support.v4.view.viewpager;
import android.util.attributeset;
import android.view.view;

import com.nineoldandroids.view.viewhelper;

/*
 * 自定义viewpager实现动画切换效果：
 *
 * 1、需要拿到当前切换的两个view
 *
 * 2、一个动画的梯度值
 */
public class myviewpagertransformeranim extends viewpager {

 private view mleft;
 private view mright;

 private float mtrans;
 private float mscale;

 private static final float min_scale = 0.6f;
 private map<integer, view> mchildren = new hashmap<integer, view>();

 /*
 * 要有两个构造方法
 */
 public myviewpagertransformeranim(context context, attributeset attrs) {
 super(context, attrs);
 }

 public myviewpagertransformeranim(context context) {
 super(context);
 }

 /*
 * 设置put的方法
 */
 public void setviewforposition(view view, int position) {
 mchildren.put(position, view);
 }

 /*
 * remove的方法
 */
 public void removeviewfromposition(integer position) {
 mchildren.remove(position);
 }

 /**
 * 重写的方法
 */
 @override
 protected void onpagescrolled(int position, float offset, int offsetpixels) {

 // log.e("tag", "position =" + position + ",offset = " + offset);
 mleft = mchildren.get(position);
 mright = mchildren.get(position + 1);

 animstack(mleft, mright, offset, offsetpixels);// 创建动画效果

 super.onpagescrolled(position, offset, offsetpixels);
 }

 private void animstack(view left, view right, float offset, int offsetpixels) {
 if (right != null) {

  // 从0-1页，offset:0`1
  mscale = (1 - min_scale) * offset + min_scale;

  mtrans = -getwidth() - getpagemargin() + offsetpixels;

  viewhelper.setscalex(right, mscale);
  viewhelper.setscaley(right, mscale);

  viewhelper.settranslationx(right, mtrans);
 }
 if (left != null) {
  left.bringtofront();
 }
 }
}

mainactivity.java

 

package com.xuliugen.viewpager;

import java.util.arraylist;

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.support.v4.view.viewpager.onpagechangelistener;
import android.view.view;
import android.view.viewgroup;
import android.widget.imageview;
import android.widget.linearlayout;
import android.widget.textview;

public class mainactivity extends activity {

 private viewpager viewpager;

 private linearlayout pointgroup;

 private textview iamgedesc;

 // 图片资源id
 private final int[] imageids = { r.drawable.a, r.drawable.b, r.drawable.c,
  r.drawable.d, r.drawable.e };

 // 图片标题集合
 private final string[] imagedescriptions = { "巩俐不低俗，我就不能低俗",
  "扑树又回来啦！再唱经典老歌引万人大合唱", "揭秘北京电影如何升级", "乐视网tv版大派送", "热血屌丝的反杀" };

 private arraylist<imageview> imagelist;

 /**
 * 上一个页面的位置
 */
 protected int lastposition;

 @override
 protected void oncreate(bundle savedinstancestate) {
 super.oncreate(savedinstancestate);
 setcontentview(r.layout.activity_main);

 viewpager = (viewpager) findviewbyid(r.id.viewpager);
 pointgroup = (linearlayout) findviewbyid(r.id.point_group);
 iamgedesc = (textview) findviewbyid(r.id.image_desc);
 iamgedesc.settext(imagedescriptions[0]);

 imagelist = new arraylist<imageview>();
 for (int i = 0; i < imageids.length; i++) {

  // 初始化图片资源
  imageview image = new imageview(this);
  image.setbackgroundresource(imageids[i]);
  imagelist.add(image);

  // 添加指示点
  imageview point = new imageview(this);
  linearlayout.layoutparams params = new linearlayout.layoutparams(
   linearlayout.layoutparams.wrap_content,
   linearlayout.layoutparams.wrap_content);

  params.rightmargin = 20;
  point.setlayoutparams(params);

  point.setbackgroundresource(r.drawable.point_bg);
  if (i == 0) {
  point.setenabled(true);
  } else {
  point.setenabled(false);
  }
  pointgroup.addview(point);
 }

 viewpager.setadapter(new mypageradapter());

 // viewpager.setcurrentitem(integer.max_value/2 -
 // (integer.max_value/2%imagelist.size())) ;

 viewpager.setonpagechangelistener(new onpagechangelistener() {

  @override
  /**
  * 页面切换后调用
  * position 新的页面位置
  */
  public void onpageselected(int position) {

  position = position % imagelist.size();

  // 设置文字描述内容
  iamgedesc.settext(imagedescriptions[position]);

  // 改变指示点的状态
  // 把当前点enbale 为true
  pointgroup.getchildat(position).setenabled(true);
  // 把上一个点设为false
  pointgroup.getchildat(lastposition).setenabled(false);
  lastposition = position;

  }

  @override
  /**
  * 页面正在滑动的时候，回调
  */
  public void onpagescrolled(int position, float positionoffset,
   int positionoffsetpixels) {
  }

  @override
  /**
  * 当页面状态发生变化的时候，回调
  */
  public void onpagescrollstatechanged(int state) {

  }
 });

 /*
  * 自动循环： 1、定时器：timer 2、开子线程 while true 循环 3、colckmanager 4、 用handler
  * 发送延时信息，实现循环
  */
 isrunning = true;
 // 设置图片的自动滑动
 handler.sendemptymessagedelayed(0, 3000);
 }

 /**
 * 判断是否自动滚动
 */
 private boolean isrunning = false;

 private handler handler = new handler() {
 public void handlemessage(android.os.message msg) {

  // 让viewpager 滑动到下一页
  viewpager.setcurrentitem(viewpager.getcurrentitem() + 1);
  if (isrunning) {
  handler.sendemptymessagedelayed(0, 3000);
  }
 };
 };

 protected void ondestroy() {

 isrunning = false;
 };

 private class mypageradapter extends pageradapter {

 @override
 /**
  * 获得页面的总数
  */
 public int getcount() {
  return integer.max_value; // 使得图片可以循环
 }

 @override
 /**
  * 获得相应位置上的view
  * container view的容器，其实就是viewpager自身
  * position 相应的位置
  */
 public object instantiateitem(viewgroup container, int position) {

  // system.out.println("instantiateitem ::" + position);

  // 给 container 添加一个view
  container.addview(imagelist.get(position % imagelist.size()));
  // 返回一个和该view相对的object
  return imagelist.get(position % imagelist.size());
 }

 @override
 /**
  * 判断 view和object的对应关系
  */
 public boolean isviewfromobject(view view, object object) {
  if (view == object) {
  return true;
  } else {
  return false;
  }
 }

 @override
 /**
  * 销毁对应位置上的object
  */
 public void destroyitem(viewgroup container, int position, object object) {
  // system.out.println("destroyitem ::" + position);

  container.removeview((view) object);
  object = null;
 }
 }

}

另外我们看效果图可以看出，效果图下边的几个原点是变化的，所以我们需要一个selector，如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

 <item android:drawable="@drawable/point_nomal" android:state_enabled="false"/>
 <item android:drawable="@drawable/point_focured" android:state_enabled="true"/>

</selector>

希望本文所述对大家学习android软件编程有所帮助。