Banner轮播图效果实现

项目中常常需要用到如下图的 Banner 广告轮播图的效果,利用 ViewPager 实现。

转载请注明出处:http://shenshanlaoyuan.com/2016/09/02/Android/Banner轮播图效果实现/

访问原文「Banner轮播图效果实现」获取最佳阅读体验并参与讨论

布局

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
<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="com.shenshanlaoyuan.viewpagertest.MainActivity" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="180dp" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="180dp" >
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#33000000"
android:orientation="vertical"
android:padding="5dp" >
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="图片的title"
android:textColor="@android:color/white" />
<!-- 装圆点的容器 -->
<LinearLayout
android:id="@+id/point_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>

圆点

资源目录 res 下新建 drawable 目录,创建两个圆点 shape 文件

point_normal.xml 文件内容

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<corners android:radius="5dp" />
<solid android:color="@android:color/white" />
</shape>

point_selected.xml 文件内容

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<corners android:radius="5dip"/>
<solid android:color="#ff0000"/>
</shape>

实现

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
package com.shenshanlaoyuan.viewpagertest;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
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.TextView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
public class MainActivity extends Activity implements OnPageChangeListener {
private ViewPager mPager;
private LinearLayout mPointContainer;
private List<ImageView> mListDatas;
private TextView mTitle;
//一般从网络获取数据,这里模拟本地获取数据,要在drawable目录添加五张图片
String[] titles = { "第一个页面", "第二个页面", "第三个页面", "第四个页面", "第五个页面" };
int[] imgs = { R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d,
R.drawable.e };
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mPager = (ViewPager) findViewById(R.id.pager);
mPointContainer = (LinearLayout) findViewById(R.id.point_container);
mTitle = (TextView) findViewById(R.id.tv_title);
// 初始化数据
mListDatas = new ArrayList<ImageView>();
for (int i = 0; i < imgs.length; i++) {
// 给集合添加ImageView
ImageView iv = new ImageView(this);
iv.setImageResource(imgs[i]);
//图片拉伸
iv.setScaleType(ScaleType.FIT_XY);
mListDatas.add(iv);
// 添加圆点
View point = new View(this);
point.setBackgroundResource(R.drawable.point_normal);
LayoutParams params = new LayoutParams(10, 10);
if (i != 0) {
params.leftMargin = 10;
} else {
point.setBackgroundResource(R.drawable.point_selected);
mTitle.setText(titles[i]);
}
//向容器LinearLayout中添加圆点
mPointContainer.addView(point, params);
}
// 设置适配器
mPager.setAdapter(new MyAdapter());
// 设置监听器
mPager.addOnPageChangeListener(this);
// 设置默认选中中间的item,实现循环轮播的效果
int middle = Integer.MAX_VALUE / 2;
int extra = middle % mListDatas.size();
int item = middle - extra;
mPager.setCurrentItem(item);
}
class MyAdapter extends PagerAdapter {
// 页面的数量
@Override
public int getCount() {
if (mListDatas != null) {
return Integer.MAX_VALUE;
}
return 0;
}
// 标记方法,用来判断缓存标记
// view:显示的view
// object: 标记
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
// 初始化item
@Override
public Object instantiateItem(ViewGroup container, int position) {
position = position % mListDatas.size();
// position: 要加载的位置
ImageView iv = mListDatas.get(position);
// 用来添加要显示的View的
mPager.addView(iv);
// 返回记录缓存标记
return iv;
}
// 销毁item条目
// object:缓存标记
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
position = position % mListDatas.size();
ImageView iv = mListDatas.get(position);
mPager.removeView(iv);
}
}
/************************************* ViewPager监听回调方法 *******************************************/
// 回调方法,当viewpager的滑动状态改变时的回调
// * @see ViewPager#SCROLL_STATE_IDLE : 闲置状态
// * @see ViewPager#SCROLL_STATE_DRAGGING :拖动状态
// * @see ViewPager#SCROLL_STATE_SETTLING: 固定状态
@Override
public void onPageScrollStateChanged(int state) {
}
// 回调方法,当viewpager滚动时的回调
// position: 当前选中的位置
// positionOffset: 滑动的百分比
// positionOffsetPixels: 偏移的距离,滑动的像素
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
}
// 回调方法,当viewpager的某个页面选中时的回调
@Override
public void onPageSelected(int position) {
position = position % mListDatas.size();
// 设置选中的点的样式
int count = mPointContainer.getChildCount();
for (int i = 0; i < count; i++) {
View view = mPointContainer.getChildAt(i);
view.setBackgroundResource(position == i ? R.drawable.point_selected
: R.drawable.point_normal);
}
// 设置标题
mTitle.setText(titles[position]);
}
}
深山老猿 wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
如对你有帮助,请我喝杯咖啡吧!
显示 Gitment 评论