Android实现广告图片轮播效果

内容摘要
本文实例介绍了Android广告轮播图效果实现方法，分享给大家供大家参考，具体内容如下
首先看下一下布局文件：




<RelativeLayout xmlns:android="http://schemas.android.com/a
文章正文

本文实例介绍了Android广告轮播图效果实现方法，分享给大家供大家参考，具体内容如下

首先看下一下布局文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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动画，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
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，如下：

1
2
3
4
5
6
7
<?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>

以上就是本文的全部内容，希望对大家的学习有所帮助。
代码注释
上一篇Java Mybatis框架入门基础教程下一篇谷歌Chrome浏览器在Win10预览版10525中崩溃的解决办法

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！