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;

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);
 }
 
 public void setViewForPosition(View view, int position) {
 mChildren.put(position, view);
 }
 
 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
  
  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) {
  }
 });
 
 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
 
 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
 
 public boolean isViewFromObject(View view, Object object) {
  if (view == object) {
  return true;
  } else {
  return false;
  }
 }
 @Override
 
 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软件编程有所帮助。

您可能感兴趣的文章:Android实现图片轮播效果的两种方法Android实现Banner界面广告图片循环轮播（包括实现手动滑动循环）Android 使用ViewPager自动滚动循环轮播效果Android使用ViewPager加载图片和轮播视频Android实现图片自动轮播并且支持手势左右无限滑动Android自动播放Banner图片轮播效果Android实现图片文字轮播特效Android实现广告图片轮播效果Android ViewPager实现图片轮播效果ViewFlipper实现文字轮播效果