最近工作不是很忙，也跟大神学习下总结一些小的技术点：
对于一个App几乎都有Banner广告功能，也就是我们常见的轮播图，当然目前市场第三方框架已经非常成熟了，尤其是youth5201314/banner这里有github地址也可以学习下：https://github.com/youth5201314/banner.git
那么下面给大家介绍我的一些总结：
首先分析下轮播图的设计
- 多张轮播图定时效果
- 指示点以及每张图片的文字说明
- 实现无限轮播，可滑动，图片点击事件
开始布局：
|
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
|
<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.yangziling.carousel.MainActivity"><!--轮播图--> <FrameLayout android:layout_width="match_parent" android:layout_height="200dp"> <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="match_parent"/> <!--指示点和图片标题--> <LinearLayout android:layout_width="match_parent" android:layout_height="35dip" android:layout_gravity="bottom" android:background="#33000000" android:gravity="center" android:orientation="vertical"> <!--图片配文--> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="图片标题" android:textColor="@android:color/white" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="3dip" android:orientation="horizontal" > <!--指示点--> <View android:id="@+id/dot_0" style="@style/view_attr" android:background="@drawable/dot_focused"/> <View android:id="@+id/dot_1" style="@style/view_attr" android:background="@drawable/dot_normal"/> <View android:id="@+id/dot_2" style="@style/view_attr" android:background="@drawable/dot_normal"/> <View android:id="@+id/dot_3" style="@style/view_attr" android:background="@drawable/dot_normal"/> <View android:id="@+id/dot_4" style="@style/view_attr" android:background="@drawable/dot_normal"/> </LinearLayout> </LinearLayout> </FrameLayout></RelativeLayout> |
布局中抽取的view属性：
|
1
2
3
4
5
6
|
<style name="view_attr"> <item name="android:layout_width">5dp</item> <item name="android:layout_height">5dp</item> <item name="android:layout_marginLeft">5dp</item> <item name="android:layout_marginRight">5dp</item></style> |
这里我展示的一些图片是在本地的，通过网络框架加载图片原理也是一样的。
这里直接给大家贴出来核心代码：
|
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
|
public class MainActivity extends AppCompatActivity { private ViewPager mMyViewPaper; private List<ImageView> images; private List<View> dots; private int currentItem; private TextView title; private MyAdapter adapter; //当前显示图片的位置 private int localPosition = 0; //图片的id private int[] imageIds = new int[]{R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e}; //图片的标题 private String[] titles = new String[]{"蓝天白云", "青山绿水", "枯藤老树", "人间仙境", "岛屿大树"}; private TimerTask mTimerTask; //创建一个定时器 private final Timer timer = new Timer(); private ImageView mImageView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mMyViewPaper = (ViewPager) findViewById(R.id.vp); //显示的图片 images = new ArrayList<>(); for (int i = 0; i < imageIds.length; i++) { mImageView = new ImageView(this); mImageView.setBackgroundResource(imageIds[i]); images.add(mImageView); } //指示点 dots = new ArrayList<>(); dots.add(findViewById(R.id.dot_0)); dots.add(findViewById(R.id.dot_1)); dots.add(findViewById(R.id.dot_2)); dots.add(findViewById(R.id.dot_3)); dots.add(findViewById(R.id.dot_4)); title = (TextView) findViewById(R.id.title); title.setText(titles[0]); adapter = new MyAdapter(MainActivity.this, images); mMyViewPaper.setAdapter(adapter); mMyViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { position = position % images.size(); title.setText(titles[position]); dots.get(position).setBackgroundResource(R.drawable.dot_focused); dots.get(localPosition).setBackgroundResource(R.drawable.dot_normal); localPosition = position; currentItem = position; } /** * 页面滑动时回调 */ @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } /** * 当ViewPager状态改变时，回调 */ @Override public void onPageScrollStateChanged(int state) { } }); } /** * 轮播任务 */ @Override protected void onStart() { super.onStart(); mTimerTask = new TimerTask() { @Override public void run() { currentItem = (currentItem + 1) % imageIds.length; mHandler.sendEmptyMessage(0); } }; timer.schedule(mTimerTask, 2000, 2000);}/** * 接收子线程传递的数据 */private Handler mHandler = new Handler() { public void handleMessage(android.os.Message msg) { //轮播到最后一张图片时，直接跳转至第一页，并且取消滑动效果 if (currentItem % images.size() == 0) { mMyViewPaper.setCurrentItem(currentItem, false); } //非最后一张展示图片的滑动效果 mMyViewPaper.setCurrentItem(currentItem, true); }}; @Override protected void onStop() { super.onStop(); timer.cancel(); }} |
自定义了一个Adapter适配器：
|
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
|
public class MyAdapter extends PagerAdapter { private List<ImageView> images; private Context mContext; public MyAdapter(Context context,List<ImageView> images) { this.mContext =context; this.images = images; } //返回Viewpager中的view个数 @Override public int getCount() { return Integer.MAX_VALUE; } //判断instantiateItem中的函数返回的key与一个页面示图是不是代表同一个 //通常直接相等就OK啦 @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } //移除一个固定位置的页面 @Override public void destroyItem(ViewGroup view, int position, Object object) { view.removeView((View) object); } //将固定位置的View添加到Viewgroup中，并创建显示出来 @Override public Object instantiateItem(ViewGroup view, final int position) { ImageView imageView = images.get(position % images.size()); ViewGroup parent = (ViewGroup) imageView.getParent(); //这里是动态添加示图，一个子类只能有一个父类 //判断下如果parent存在一定要记得移除 if (parent != null) { parent.removeView(imageView); } view.addView(imageView); //给图片添加点击事件 imageView.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v) { Toast.makeText(mContext,"点击了第"+(position % images.size()+1)+"图片",Toast.LENGTH_SHORT).show(); } }); return images.get(position % images.size()); } @Override public int getItemPosition(Object object) { return POSITION_NONE; }} |
在这里面也遇到一些问题，做了一些“妥协”，比如说无限轮播的时候发现播放到最后一张时会返回到第一张再次轮播，但是会有那种卡顿的感觉。所以我做了个“妥协的处理”，就是在播放到最后一张时，取消自带的动画效果，直接跳转到第一张，然后进行轮播。
|
1
2
3
4
5
6
7
8
9
10
|
private Handler mHandler = new Handler() { public void handleMessage(android.os.Message msg) { //轮播到最后一张图片时，直接跳转至第一页，并且取消滑动效果 if (currentItem % images.size() == 0) { mMyViewPaper.setCurrentItem(currentItem, false); } //非最后一张展示图片的滑动效果 mMyViewPaper.setCurrentItem(currentItem, true); }}; |
项目的github地址：https://github.com/yangziling/Carousel.git
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://juejin.im/post/5a54a5a451882573443c908d
