前言:目前来说各大流行的商城app都会有轮播图这个功能,有的可以一直循环轮播,有的只能手动轮播,今天我们就来打造属于我们自己的轮播图!
----------------------------分割线-----------------------------------
先看一下效果展示图:
当然看了这个效果图是不是很一般,不过我们会在后期加上沉浸式的状态栏,效果很更好,今天我们就着重介绍轮播图的实现(我们下一章节介绍沉浸式效果的轮播图,你也可以自己仿照《Android开发之实现QQ空间、美团首页沉浸式状态栏》来实现)。
----------------------分割线-----------------------
原理:1.ViewPager+adapter。
2.绘制的小圆点。
3.监听滑动的ViewPager。
4.Handler或new Thread开启自动轮播。
----------------------分割线-----------------------
实现:
1初始化View视图:
private void initViews() {
viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setOnPageChangeListener(this);// 设置页面更新监听
ll_point_container = (LinearLayout) findViewById(R.id.ll_point_container);
tv_desc = (TextView) findViewById(R.id.tv_desc);
}
2.准备好显示的数据:
private void initData() {
// 初始化要显示的数据
// 图片资源id数组
imageResIds = new int[]{R.drawable.img01, R.drawable.img02, R.drawable.img03, R.drawable.img04, R.drawable.img05};
// 文本描述
contentDescs = new String[]{
"红米手机4x",
"小米手机6",
"小米手机6白色",
"小米手机6黑色",
"苹果手机"
};
// 初始化要展示的5个ImageView
imageViewList = new ArrayList<ImageView>();
ImageView imageView;
View pointView;
LayoutParams layoutParams;
for (int i = 0; i < imageResIds.length; i++) {
// 初始化要显示的图片对象
imageView = new ImageView(this);
imageView.setBackgroundResource(imageResIds[i]);
imageViewList.add(imageView);
// 加小白点, 指示器
pointView = new View(this);
pointView.setBackgroundResource(R.drawable.selector_bg_point);
layoutParams = new LayoutParams(5, 5);
if (i != 0)
layoutParams.leftMargin = 10;
// 设置默认所有都不可用
pointView.setEnabled(false);
ll_point_container.addView(pointView, layoutParams);
}
}
注意:这里需要注意的是小白点的初始化以及图片添加到数组里面。
两个简单的小白点的实现:
selector_bg_point:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:drawable="@drawable/shape_bg_point_enable"/>
<item android:state_enabled="false" android:drawable="@drawable/shape_bg_point_disable"/>
</selector>
shape_bg_point_enable:
<?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="#FFFFFF" />
</shape>
shape_bg_point_disable:
<?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/darker_gray" />
</shape>
这两个点以及选择器放在Drawable文件夹下即可。
3.初始化下Adapter:
private void initAdapter() {
ll_point_container.getChildAt(0).setEnabled(true);
tv_desc.setText(contentDescs[0]);
previousSelectedPosition = 0;
// 设置适配器
viewPager.setAdapter(new MyAdapter());
// 默认设置到中间的某个位置
int pos = Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % imageViewList.size());
// 2147483647 / 2 = 1073741823 - (1073741823 % 5)
viewPager.setCurrentItem(5000000); // 设置到某个位置
}
ViewPager的适配器:
class MyAdapter extends PagerAdapter { @Override public int getCount() { return Integer.MAX_VALUE; } // 3. 指定复用的判断逻辑, 固定写法 @Override public boolean isViewFromObject(View view, Object object) { // 当划到新的条目, 又返回来, view是否可以被复用. // 返回判断规则 return view == object; } // 1. 返回要显示的条目内容, 创建条目 @Override public Object instantiateItem(ViewGroup container, int position) { int newPosition = position % imageViewList.size(); ImageView imageView = imageViewList.get(newPosition); // a. 把View对象添加到container中 container.addView(imageView); // b. 把View对象返回给框架, 适配器 return imageView; // 必须重写, 否则报异常 } // 2. 销毁条目 @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } }
4.来实现下ViewPager的监听(MainActivity实现了OnPageChangeListener的接口):
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// 滚动时调用
}
@Override
public void onPageSelected(int position) {
// 新的条目被选中时调用
int newPosition = position % imageViewList.size();
//设置文本
tv_desc.setText(contentDescs[newPosition]);
// 把之前的禁用, 把最新的启用, 更新指示器
ll_point_container.getChildAt(previousSelectedPosition).setEnabled(false);
ll_point_container.getChildAt(newPosition).setEnabled(true);
// 记录之前的位置
previousSelectedPosition = newPosition;
}
@Override
public void onPageScrollStateChanged(int state) {
// 滚动状态变化时调用
}
6.开启图片的轮训:
方法一:使用new Thread开启循环
new Thread() {
public void run() {
isRunning = true;
while (isRunning) {
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
// 往下跳一位
runOnUiThread(new Runnable() {
@Override
public void run() {
System.out.println("设置当前位置: " + viewPager.getCurrentItem());
viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
}
});
}
};
}.start();
方法二:使用Handler开启循环
private Handler mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
int currentItem = viewPager.getCurrentItem();// 获取当前页面位置
currentItem++;
viewPager.setCurrentItem(currentItem);// 跳到下一个页面
// 继续发送延时2秒的消息, 形成类似递归的效果, 使广告一直循环切换
mHandler.sendEmptyMessageDelayed(0, 4000);
}
};
然后发送一个延迟空的延迟消息:
mHandler.sendEmptyMessageDelayed(0, 4000);
我们还可以给ViewPager添加一个OntouchListener的事件。
作用:在我们用手指滑动的时候关闭自动轮播,手指抬起的时候然后再继续开启轮播。
viewPager.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mHandler.removeCallbacksAndMessages(null);// 清除所有消息和Runnable对象
break;
case MotionEvent.ACTION_UP:
// 继续轮播广告
mHandler.sendEmptyMessageDelayed(0, 4000);
break;
}
return false;
}
});
7.当然了当我们退出的时候我们记得要关闭轮播这个线程。(针对用new Thread开启的线程)
@Override
protected void onDestroy() {
super.onDestroy();
isRunning = false;
}
----------------------源码下载链接-----------------------
Android开发之轮播图广告的实现的源码下载(此轮播图实现用的new Thread)
----------------------下一章实现沉浸式状态的轮播图-----------------------