首页 > 系统 > Android > 正文

Android实现广告图片轮播效果

2020-04-11 10:46:20
字体:
来源:转载
供稿:网友

本文实例介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表