Android ViewPager导航小圆点实现无限循环效果
时间:2022-07-27
本文章向大家介绍Android ViewPager导航小圆点实现无限循环效果,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
之前用View Pager做了一个图片切换的推荐栏(就类似与淘宝、头条客户端顶端的推荐信息栏),利用View Pager很快就能实现,但是一次无意间使用淘宝APP的时候,突然发现它的效果和我做的还不一样,淘宝APP的推荐栏可以左右无限循环切换,而ViewPager自身其实并没有支持这个功能。
其实实现这个无限循环不难,只需要在数据源的首尾各添加一张多余的图片,在onPagerChangeListener()中监听position<1和position (总数据条目-1)就可以了。另外一点需要注意的是,这里的数据源+2,而导航小圆点却比数据源少2,这样在无限循环的时候,小圆点的切换就不好办了。本人最开始也是写逻辑在onPageSelected()里面判断条件,总感觉挺麻烦的,有没有更好的实现方式呢。答案是肯定的。只需将小圆点也首尾各家一个,并设置为invisible不就好了?
我的代码实现如下:
xml布局:
<?xml version="1.0" encoding="utf-8"?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
<android.support.v4.view.ViewPager
android:id="@+id/vp_homepage"
android:layout_width="match_parent"
android:layout_height="match_parent"
</android.support.v4.view.ViewPager
<LinearLayout
android:id="@+id/ll_dots_homepage_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:gravity="center"
android:orientation="horizontal"
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:visibility="invisible"
android:src="@drawable/dots"/
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:src="@drawable/dots"/
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:src="@drawable/dots"/
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:src="@drawable/dots"/
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:src="@drawable/dots"/
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:visibility="invisible"
android:src="@drawable/dots"/
</LinearLayout
</RelativeLayout
界面实现:
public class HomePageFragment extends BaseFragment {
private View view;
private ViewPager mViewPager;//顶部信息推荐栏
private MyViewPagerAdapter mViewPagerAdapter;
private LinearLayout ll_dots_homepage_top;//顶部信息推荐栏导航点
private int GUIDE_NUMBER = 4; //顶部信息推荐栏的数量
private ImageView[] dotImages; //顶部信息推荐栏引导小圆点
private int dotCurrentIndex; //顶部信息推荐栏小圆点偏移量
private MyOnPageChangeListener mOnPageChangeListener;
private List<View mListDataViewPage;
private Context context;
@Override
public void onAttach(Context context) {
super.onAttach(context);
this.context = context;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable
Bundle savedInstanceState) {
view = inflater.inflate(R.layout.frament_homepage, container, false);
initData();
initView();
return view;
}
/**
* 初始化一些基础数据
*/
private void initData() {
if (mListDataViewPage != null) {
mListDataViewPage.clear();
mListDataViewPage = null;
} else {
mListDataViewPage = new ArrayList< ();
// 为了实现无限循环,首位两张图片都是重复的
int[] resource = new int[]{
R.drawable.test_viewpager_homepage_4, R.drawable.test_viewpager_homepage_1, R.drawable.test_viewpager_homepage_2, R
.drawable.test_viewpager_homepage_3, R.drawable.test_viewpager_homepage_4,R.drawable.test_viewpager_homepage_1,};
for (int i = 0; i < 6; i++) {
WeakReference<Bitmap bitmao = new WeakReference<Bitmap (BitmapFactory
.decodeResource(getResources(), resource[i]));
ImageView imageView = new ImageView(context);
imageView.setImageBitmap(bitmao.get());
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
mListDataViewPage.add(imageView);
}
}
}
/**
* 初始化底部推信息推荐栏引导小圆点View
*/
private void initDots() {
dotImages = new ImageView[mListDataViewPage.size()];
for (int i = 0; i < mListDataViewPage.size(); i++) {
dotImages[i] = (ImageView) ll_dots_homepage_top.getChildAt(i);
dotImages[i].setEnabled(false);
}
**//将第一个小圆点设置为高亮,这里的第一个偏移量是1,不是0
dotImages[1].setEnabled(true);
dotCurrentIndex = 1;**
}
/**
* initView
*/
private void initView() {
findLayout();
findView();
}
/**
* findLayout
*/
private void findLayout() {
ll_dots_homepage_top = (LinearLayout) view.findViewById(R.id.ll_dots_homepage_top);
initDots();
}
/**
* 初始化控件
*/
private void findView() {
mViewPager = (ViewPager) view.findViewById(R.id.vp_homepage);
mViewPagerAdapter = new MyViewPagerAdapter(mListDataViewPage);
mOnPageChangeListener = new MyOnPageChangeListener();
mViewPager.setAdapter(mViewPagerAdapter);
mViewPager.setOnPageChangeListener(mOnPageChangeListener);
**mViewPager.setCurrentItem(1,false); //默认选中第二张图片**
}
private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
if (position < 0 || position mListDataViewPage.size() || position == dotCurrentIndex) {
return;
}
if ( mListDataViewPage.size() 1) { //多于1,才会循环跳转
if ( position < 1) { //首位之前,跳转到末尾(N)
position = 4;
mViewPager.setCurrentItem(position,false);
} else if ( position 4) { //末位之后,跳转到首位(1)
position = 1;
mViewPager.setCurrentItem(position,false); //false:不显示跳转过程的动画
}else {
dotImages[dotCurrentIndex].setEnabled(false);
dotImages[position].setEnabled(true);
dotCurrentIndex = position;
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
}
注意代码中加粗的代码。初始的小圆点选中和ViewPager的position选中。
以上就是本文的全部内容,希望对大家的学习有所帮助。
- Java多线程详解4【面试+工作】
- Java多线程详解5【面试+工作】
- Java多线程详解6【面试+工作】
- MySQL备份恢复第二篇(r5笔记第6天)
- SpringMVC 中配置 Swagger 插件.
- MySQL和Oracle对比学习之事务(r5笔记第4天)
- 【面试宝典】Java如何打印数组
- MySQL数据导入导出牛刀小试(r5笔记第3天)
- SpringMVC 异常处理.
- 一条简单的sql在11g和12c中的不同(r5笔记第2天)
- 浅析 SpringMVC 原理和配置.
- 使用impdp不当导致的数据丢失问题(r5笔记第1天)
- MySQL数据库 Event 定时执行任务.
- Tomcat 日志分割.
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- IDEA 热部署配置 HotSwapAgent-IntelliJ-IDEA-plugin
- 在tinycolinux上编译odoo8
- 在tinycolinux上编译jupyter和rootcling组建混合cpp,python学习环境
- 110分钟使用Python搭建自己的IP定位查询接口
- python实现在线微博数据可视化
- 在tinycolinux上安装chrome
- 如何在Ubuntu 18.04服务器上安装Python 3和设置编程环境
- python趣味题-数字加密
- 快手解析视频真实链接(爬取快手视频)
- 在tinycolinux上安装和使用cloudwall
- 洛谷 P1896 [SCOI2005]互不侵犯(状压dp)
- Mybatis 详解
- 用Python玩转微信
- Python播放暂停音乐
- Leetcode 785. 判断二分图(贪心,二分图判定,DFS)