ViewPager实现轮播

最新推荐文章于 2020-12-30 15:01:30 发布

原创最新推荐文章于 2020-12-30 15:01:30 发布 · 7.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ViewPager 轮播 #viewpager #布局

Android 专栏收录该内容

2 篇文章

订阅专栏

本文通过示例展示了如何使用ViewPager实现一个无限轮播的效果，包括布局文件和Java代码的详细实现。首先介绍了ViewPager的基本使用，然后创建了一个IndexViewPagerAdapter适配器，并通过ImageHandler处理轮播的逻辑，如轮播间隔、页面切换监听和暂停恢复操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.ViewPager是来自android.support.v4.view.ViewPager

2.ViewPager是一个容器所以也需要有一个适配器，可以是PagerAdapter或者FragmentPagerAdapter

下面列举一个例子

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical" >

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<android.support.v4.view.ViewPager
android:id="@+id/home_viewpager"
android:layout_width="fill_parent"
android:layout_height="160dp"
android:layout_gravity="center" >
</android.support.v4.view.ViewPager>

<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right" >

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15dip"
android:src="@drawable/point" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15dip"
android:src="@drawable/point" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15dip"
android:src="@drawable/point" />
</LinearLayout>
</FrameLayout>

</LinearLayout>

</LinearLayout>

Java代码

import java.util.ArrayList;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewParent;

public class IndexViewPagerAdapter extends PagerAdapter{
//界面列表
private ArrayList<View> views;

public IndexViewPagerAdapter(ArrayList<View> views) {
this.views=views;
}

//获得当前界面总数
@Override
public int getCount() {
return Integer.MAX_VALUE; //最大值
}

//初始化position位置的界面
@Override
public Object instantiateItem(ViewGroup container, int position) {

position=position%views.size();
if(position<0){
position=position+views.size();
}
View view=views.get(position);
ViewParent parent=view.getParent();
if(parent!=null){
ViewGroup viewGroup=(ViewGroup) parent;
viewGroup.removeView(view);
}
container.addView(view);
return view;
}

//判断是否由对象生成界面
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;

}

//销毁position位置的界面
@Override
public void destroyItem(View view, int position, Object arg2) {
}
}

public class ImageHandler extends Handler {

/**
* 请求更新显示的View。
*/
public static final int MSG_UPDATE_IMAGE = 1;
/**
* 请求暂停轮播。
*/
public static final int MSG_KEEP_SILENT = 2;
/**
* 请求恢复轮播。
*/
public static final int MSG_BREAK_SILENT = 3;
/**
* 记录最新的页号，当用户手动滑动时需要记录新页号，否则会使轮播的页面出错。例如当前如果在第一页，本来准备播放的是第二页，而这时候用户滑动到了末页，
* 则应该播放的是第一页，如果继续按照原来的第二页播放，则逻辑上有问题。
*/
public static final int MSG_PAGE_CHANGED = 4;

// 轮播间隔时间
public static final long MSG_DELAY = 3000;

private IndexFragment homeFragment;

public ImageHandler(IndexFragment homeFragment) {
this.homeFragment = homeFragment;
}

private int currentItem = 0;

@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (homeFragment == null) {
return;
}
if (homeFragment.imageHandler.hasMessages(MSG_UPDATE_IMAGE)) {
homeFragment.imageHandler.removeMessages(MSG_UPDATE_IMAGE);
}
//判断消息的类型进行处理
switch (msg.what) {
case MSG_UPDATE_IMAGE:
currentItem++;
homeFragment.viewPager.setCurrentItem(currentItem);
homeFragment.imageHandler.sendEmptyMessageDelayed(MSG_UPDATE_IMAGE,
MSG_DELAY);
break;
case MSG_KEEP_SILENT:
break;
case MSG_BREAK_SILENT:
homeFragment.imageHandler.sendEmptyMessageDelayed(MSG_UPDATE_IMAGE,
MSG_DELAY);
break;
case MSG_PAGE_CHANGED:
currentItem = msg.arg1;
break;

default:
break;
}
}

}

public class IndexFragment extends Fragment {

private LinearLayout view;
// 定义ViewPager对象
public ViewPager viewPager;
// 定义ViewPager适配器
private IndexViewPagerAdapter indexViewAdapter;
public ImageHandler imageHandler = new ImageHandler(this);

// 定义一个ArrayList来存放View
private ArrayList<View> views;
// 引导图片资源
private static final int[] bannerPicturs = { R.drawable.banner_one,
R.drawable.banner_two, R.drawable.banner_three };

// 底部小点的图片
private ImageView[] points;
// 记录当前选中位置
private int currentIndex;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

view = (LinearLayout) inflater
.inflate(R.layout.index, container, false);
// 初始化组件
initView();
// 初始化数据
initData();
// 设置监听
setViewPagerOnChangeListener();
viewPager.setCurrentItem(0);
imageHandler.sendEmptyMessageDelayed(ImageHandler.MSG_UPDATE_IMAGE,
ImageHandler.MSG_DELAY);
return view;
}

private void setViewPagerOnChangeListener() {
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
/**
* 当滑动状态改变时调用
*/
@Override
public void onPageScrollStateChanged(int id) {
switch (id) {
case ViewPager.SCROLL_STATE_DRAGGING:
imageHandler.sendEmptyMessage(ImageHandler.MSG_KEEP_SILENT);
break;
case ViewPager.SCROLL_STATE_IDLE:
imageHandler.sendEmptyMessageDelayed(
ImageHandler.MSG_UPDATE_IMAGE,
ImageHandler.MSG_DELAY);
break;
default:
break;
}
}

/**
* 当当前页面被滑动时调用
*/

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}

/**
* 当新的页面被选中时调用
*/

@Override
public void onPageSelected(int position) {
imageHandler.sendMessage(Message.obtain(imageHandler,
ImageHandler.MSG_PAGE_CHANGED, position, 0));
// 设置底部小点选中状态
setCurDot(position % points.length);
}

});
}

/**
* 初始化组件
*/
private void initView() {
// 实例化ArrayList对象
views = new ArrayList<View>();
// 实例化ViewPager
viewPager = (ViewPager) view.findViewById(R.id.home_viewpager);
// 实例化ViewPager适配器
indexViewAdapter = new IndexViewPagerAdapter(views);
}

/**
* 初始化数据
*/
private void initData() {

// 初始化引导图片列表
for (int i = 0; i < bannerPicturs.length; i++) {
ImageView iv = new ImageView(getActivity());
iv.setMaxWidth(200);
iv.setScaleType(ScaleType.FIT_XY);
iv.setImageResource(bannerPicturs[i]);
views.add(iv);
}
// 设置数据
// 前面的views中没有数据在前面的循环中才插入数据而此时vpAdapter中已经有数据说明
// 初始化adapter的时候参数传递是传引用
viewPager.setAdapter(indexViewAdapter);
// 初始化底部小点
initPoint();

}

/**
* 初始化底部小点
*/
private void initPoint() {
LinearLayout linearLayout = (LinearLayout) view
.findViewById(R.id.linearLayout);

points = new ImageView[bannerPicturs.length];

// 循环取得小点图片
for (int i = 0; i < points.length; i++) {
// 得到一个LinearLayout下面的每一个子元素
points[i] = (ImageView) linearLayout.getChildAt(i);
// 默认都设为灰色
points[i].setEnabled(false);
}
// 设置当面默认的位置
currentIndex = 0;
// 设置为白色，即选中状态
points[currentIndex].setEnabled(true);
}

/**
* 设置当前的小点的位置
*/
private void setCurDot(int position) {
// 排除异常情况
if (position < 0 || position > points.length - 1
|| currentIndex == position) {
return;
}
resetDot();
points[position % points.length].setEnabled(true);
currentIndex = position;
}

private void resetDot() {
for (int i = 0; i < points.length; i++) {
points[i].setEnabled(false);
}
}

}