微信公众号

Android 轮播图从 0 到 1

漏洞百出

轮播图是 Android 常用功能之一,效果大概是这样的:

之前我封装写了一个,基本达到了要求,是继承了 Fragment(当时脑袋肯定锈掉了),里面 Viewpager add Fragment,这次项目多处有轮播图,发现之前封装的不够用,简直漏洞百出:
1、比如底部 point 的位置,之前固定在中间,现在可能要放在右下角,point 最好也能动态改图片;
2、现在项目跟微信一样,底部 tab 切换,中间是 Fragment 替换,发现轮播图有问题,Fragment A 循环的 point 的 positoin 居然影响到了 Fragment B,照理,这是两个 BannerFragment,不会影响的啊,报以下错误:

1
java.lang.IllegalStateException: The application's PagerAdapter changed the adapter's contents without calling PagerAdapter#notifyDataSetChanged!

经过排查,找到了原因,因为 Viewpager add Fragment 我全部放在一个类,因此:

1
public static List<Object> bannerList = new ArrayList<>();

这里 static 坏事了,之前一个 banner 没有暴露出来。
3、继承了 Fragment,引用比较麻烦,Fragment 有两者引用方法,xml 和代码,两者方式 addData 却报错;
4、banner 没有写点击回调。

再次封装

综合以上问题,我进行了优化,继承 LinearLayout,当一个控件来引用,省去不必要的麻烦,底部 point 的位置可以设置:

1
pointLayout.setGravity(bannerPointGravity);

另外自定义了属性,动态设置 point 大小和图片,轮播图循环时间,也能代码设置,完整代码示例:

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
/**
* Created by WuXiaolong on 2017/8/24.
* 个人博客:http://wuxiaolong.me
*/
public class BannerLayout extends LinearLayout {
private ViewPager viewPager;
private LinearLayout pointLayout;
private ScheduledExecutorService scheduler;
private int mPosition = 0;
private int mBannerCount = 1;
private Context context;
private Activity activity;
private int bannerPointSize;
private int bannerPointGravity;
private int bannerPointDrawableSelected, bannerPointDrawableUnselected;
private int bannerDelaySecond;
public BannerLayout(Context context) {
this(context, null);
}
public BannerLayout(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public BannerLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context, attrs);
}
private void initView(Context context, AttributeSet attrs) {
this.context = context;
activity = (Activity) context;
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BannerLayout);
bannerPointSize = typedArray.getDimensionPixelSize(R.styleable.BannerLayout_bannerPointSize, 10);
bannerPointGravity = typedArray.getInt(R.styleable.BannerLayout_bannerPointGravity, Gravity.CENTER);
bannerDelaySecond = typedArray.getInt(R.styleable.BannerLayout_bannerDelaySecond, 5);
bannerPointDrawableSelected = typedArray.getResourceId(R.styleable.BannerLayout_bannerPointDrawableSelected, R.mipmap.point01);
bannerPointDrawableUnselected = typedArray.getResourceId(R.styleable.BannerLayout_bannerPointDrawableUnselected, R.mipmap.point02);
typedArray.recycle();
View view = View.inflate(context, R.layout.banner_view_pager, null);
addView(view);
viewPager = (ViewPager) view.findViewById(R.id.viewPager);
pointLayout = (LinearLayout) view.findViewById(R.id.pointLayout);
pointLayout.setGravity(bannerPointGravity);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
addPointLayout(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
public void start(List<Object> bannerList) {
bannerShutdown();
mBannerCount = bannerList.size();
BannerPagerAdapter bannerPagerAdapter = new BannerPagerAdapter(context, bannerList);
viewPager.setAdapter(bannerPagerAdapter);
addPointLayout(0);
startScheduler();
}
private void addPointLayout(int position) {
pointLayout.removeAllViews();
for (int i = 0; i < mBannerCount; i++) {
ImageView imageView = new ImageView(context);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(bannerPointSize, bannerPointSize);
layoutParams.setMargins(10, 0, 0, 0);
imageView.setLayoutParams(layoutParams);
if (position == i) {
imageView.setImageResource(bannerPointDrawableSelected);
} else {
imageView.setImageResource(bannerPointDrawableUnselected);
}
pointLayout.addView(imageView);
}
}
private void startScheduler() {
scheduler = Executors.newSingleThreadScheduledExecutor();
scheduler.scheduleAtFixedRate(new Runnable() {
@Override
public void run() {
mPosition = viewPager.getCurrentItem();
if (mPosition < mBannerCount - 1) {
mPosition++;
} else {
mPosition = 0;
}
activity.runOnUiThread(new Runnable() {
@Override
public void run() {
viewPager.setCurrentItem(mPosition);
}
});
}
}, 1, bannerDelaySecond, TimeUnit.SECONDS);
}
public void bannerShutdown() {
if (scheduler != null)
scheduler.shutdown();
}
private class BannerPagerAdapter extends PagerAdapter {
private List<Object> bannerList = new ArrayList<>();
private Context context;
BannerPagerAdapter(Context context, List<Object> bannerList) {
this.context = context;
this.bannerList.clear();
this.bannerList.addAll(bannerList);
}
@Override
public int getCount() {
return bannerList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
ImageView imageView = new ImageView(context);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
Object object = bannerList.get(position);
//这里我封装了 Glide 4.0 的工具类,用于显示图片
ImageLoaderUtil.load(context, object, imageView);
container.addView(imageView);
return imageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
public int dp2px(float var0) {
float var1 = context.getResources().getDisplayMetrics().density;
return (int) (var0 * var1 + 0.5F);
}
public void setBannerPointSize(int bannerPointSize) {
this.bannerPointSize = dp2px(bannerPointSize);
}
public void setBannerPointGravity(int bannerPointGravity) {
this.bannerPointGravity = bannerPointGravity;
pointLayout.setGravity(bannerPointGravity);
}
public void setBannerPointDrawableSelected(int bannerPointDrawableSelected) {
this.bannerPointDrawableSelected = bannerPointDrawableSelected;
}
public void setBannerPointDrawableUnselected(int bannerPointDrawableUnselected) {
this.bannerPointDrawableUnselected = bannerPointDrawableUnselected;
}
public void setBannerDelaySecond(int bannerDelaySecond) {
this.bannerDelaySecond = bannerDelaySecond;
}
}

其中自定义属性的attrs.xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="BannerLayout">
<!--轮播图点的大小-->
<attr name="bannerPointSize" format="dimension" />
<!--轮播图点的位置,分别有左中右-->
<attr name="bannerPointGravity" format="enum">
<enum name="left" value="3" />
<enum name="center" value="17" />
<enum name="right" value="5" />
</attr>
<!--轮播图点选中的图片-->
<attr name="bannerPointDrawableSelected" format="reference" />
<!--轮播图点未选中的图片-->
<attr name="bannerPointDrawableUnselected" format="reference" />
<!--轮播图循环时间,单位秒-->
<attr name="bannerDelaySecond" format="integer" />
</declare-styleable>
</resources>

使用说明

xml

1
2
3
4
5
6
7
8
9
<com.wuxiaolong.bannersample.BannerLayout
android:id="@+id/bannerView"
android:layout_width="match_parent"
android:layout_height="198dp"
app:bannerDelaySecond="3"
app:bannerPointDrawableSelected="@drawable/gray_radius"
app:bannerPointDrawableUnselected="@drawable/white_radius"
app:bannerPointGravity="right"
app:bannerPointSize="10dp" />

调用:

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
public class MainActivity extends AppCompatActivity {
private BannerLayout bannerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bannerView = (BannerLayout) findViewById(R.id.bannerView);
List<Object> bannerList = new ArrayList<>();
bannerList.add(R.mipmap.horizontal_default);
bannerList.add("http://pic1.win4000.com/wallpaper/5/598161750eddb.jpg");
bannerList.add("http://pic1.win4000.com/wallpaper/4/597efb5b6aae8.jpg");
bannerView.setBannerPointSize(10);
bannerView.setBannerPointGravity(Gravity.CENTER);
bannerView.setBannerPointDrawableSelected(R.drawable.gray_radius);
bannerView.setBannerPointDrawableUnselected(R.mipmap.point01);
bannerView.setBannerDelaySecond(5);
//banner 设置方法完毕时最后调用 start 方法
bannerView.start(bannerList);
}
@Override
protected void onStop() {
super.onStop();
bannerView.bannerShutdown();
}
}

最后

完整源码分享了我的知识星球(原名:小密圈),如果以上还满足不了你的需求,可以使用 GitHub上的库 banner,它丰富了 pointLayout,可能是文字,它还依赖了ViewPagerTransforms,因此 ViewPager 切换有各种炫酷效果,不过我觉得有些多余。



联系我

1、我的知识星球:更多分享只对你公开,¥99/永久。
2、我的微信公众号:吴小龙同学,欢迎关注交流~
3、我的微信群,可以加我微信,拉你进群,加我时请备注真名
由于多说和网易云跟帖评论服务相继关闭,本博客决定不再折腾评论,大家可以前往我的公众号留言交流,抱歉了!其实有 Disqus ……