快捷導(dǎo)航

Android實(shí)現(xiàn)廣告圖片輪播效果

更新時(shí)間：2020年12月22日 11:38:31 作者：徐劉根

這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)廣告圖片輪播效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例介紹了Android廣告輪播圖效果實(shí)現(xiàn)方法，分享給大家供大家參考，具體內(nèi)容如下

首先看下一下布局文件：

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

效果很簡(jiǎn)單，從布局文件中我們看到使用了一個(gè)自定義的ViewPager動(dòng)畫(huà)，代碼如下：

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實(shí)現(xiàn)動(dòng)畫(huà)切換效果：
 * 
 * 1、需要拿到當(dāng)前切換的兩個(gè)view
 * 
 * 2、一個(gè)動(dòng)畫(huà)的梯度值
 */
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>();

 /*
  * 要有兩個(gè)構(gòu)造方法
  */
 public MyViewPagerTransformerAnim(Context context, AttributeSet attrs) {
  super(context, attrs);
 }

 public MyViewPagerTransformerAnim(Context context) {
  super(context);
 }

 /*
  * 設(shè)置put的方法
  */
 public void setViewForPosition(View view, int position) {
  mChildren.put(position, view);
 }

 /*
  * remove的方法
  */
 public void removeViewFromPosition(Integer position) {
  mChildren.remove(position);
 }

 /**
  * 重寫(xiě)的方法
  */
 @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);// 創(chuàng)建動(dòng)畫(huà)效果

  super.onPageScrolled(position, offset, offsetPixels);
 }

 private void animStack(View left, View right, float offset, int offsetPixels) {
  if (right != null) {

   // 從0-1頁(yè)，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 };

 // 圖片標(biāo)題集合
 private final String[] imageDescriptions = { "鞏俐不低俗，我就不能低俗",
   "撲樹(shù)又回來(lái)啦！再唱經(jīng)典老歌引萬(wàn)人大合唱", "揭秘北京電影如何升級(jí)", "樂(lè)視網(wǎng)TV版大派送", "熱血屌絲的反殺" };

 private ArrayList<ImageView> imageList;

 /**
  * 上一個(gè)頁(yè)面的位置
  */
 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);

   // 添加指示點(diǎn)
   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
   /**
    * 頁(yè)面切換后調(diào)用 
    * position 新的頁(yè)面位置
    */
   public void onPageSelected(int position) {

    position = position % imageList.size();

    // 設(shè)置文字描述內(nèi)容
    iamgeDesc.setText(imageDescriptions[position]);

    // 改變指示點(diǎn)的狀態(tài)
    // 把當(dāng)前點(diǎn)enbale 為true
    pointGroup.getChildAt(position).setEnabled(true);
    // 把上一個(gè)點(diǎn)設(shè)為false
    pointGroup.getChildAt(lastPosition).setEnabled(false);
    lastPosition = position;

   }

   @Override
   /**
    * 頁(yè)面正在滑動(dòng)的時(shí)候，回調(diào)
    */
   public void onPageScrolled(int position, float positionOffset,
     int positionOffsetPixels) {
   }

   @Override
   /**
    * 當(dāng)頁(yè)面狀態(tài)發(fā)生變化的時(shí)候，回調(diào)
    */
   public void onPageScrollStateChanged(int state) {

   }
  });

  /*
   * 自動(dòng)循環(huán)： 1、定時(shí)器：Timer 2、開(kāi)子線程 while true 循環(huán) 3、ColckManager 4、 用handler
   * 發(fā)送延時(shí)信息，實(shí)現(xiàn)循環(huán)
   */
  isRunning = true;
  // 設(shè)置圖片的自動(dòng)滑動(dòng)
  handler.sendEmptyMessageDelayed(0, 3000);
 }

 /**
  * 判斷是否自動(dòng)滾動(dòng)
  */
 private boolean isRunning = false;

 private Handler handler = new Handler() {
  public void handleMessage(android.os.Message msg) {

   // 讓viewPager 滑動(dòng)到下一頁(yè)
   viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
   if (isRunning) {
    handler.sendEmptyMessageDelayed(0, 3000);
   }
  };
 };

 protected void onDestroy() {

  isRunning = false;
 };

 private class MyPagerAdapter extends PagerAdapter {

  @Override
  /**
   * 獲得頁(yè)面的總數(shù)
   */
  public int getCount() {
   return Integer.MAX_VALUE; // 使得圖片可以循環(huán)
  }

  @Override
  /**
   * 獲得相應(yīng)位置上的view
   * container view的容器，其實(shí)就是viewpager自身
   * position  相應(yīng)的位置
   */
  public Object instantiateItem(ViewGroup container, int position) {

   // System.out.println("instantiateItem ::" + position);

   // 給 container 添加一個(gè)view
   container.addView(imageList.get(position % imageList.size()));
   // 返回一個(gè)和該view相對(duì)的object
   return imageList.get(position % imageList.size());
  }

  @Override
  /**
   * 判斷 view和object的對(duì)應(yīng)關(guān)系 
   */
  public boolean isViewFromObject(View view, Object object) {
   if (view == object) {
    return true;
   } else {
    return false;
   }
  }

  @Override
  /**
   * 銷(xiāo)毀對(duì)應(yīng)位置上的object
   */
  public void destroyItem(ViewGroup container, int position, Object object) {
   // System.out.println("destroyItem ::" + position);

   container.removeView((View) object);
   object = null;
  }
 }

}

另外我們看效果圖可以看出，效果圖下邊的幾個(gè)原點(diǎn)是變化的，所以我們需要一個(gè)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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: