Android實現廣告圖片輪播效果

本文實例介紹了Android廣告輪播圖效果實現方法，分享給大家供大家參考，具體內容如下

首先看下一下布局文件：

<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>

以上就是本文的全部內容，希望對大家的學習有所幫助。