画廊效果的ViewPager实现（附带无限自动轮播）
2024-05-17 10:28:21
废话不多说，先上效果图
根据效果所示，第一步实现适配器，完成无限循环
首先做数据上的处理
public static class LoopViewPagerAdapter extends PagerAdapter{.....LoopViewPagerAdapter(Context context, ArrayList<Integer> imgIds){this.context = context;this.ids.add(imgIds.get(imgIds.size()-1)); 将原本的最后一页复制一份放到第一页this.ids.addAll(imgIds);this.ids.add(imgIds.get(0)); 将原本的第一页复制一份放到最后一页views = new View[ids.size()];}.....}
配合OnPageChangeListener 即可实现无限循环
private OnPageChangeListener onPageChangeListener = new OnPageChangeListener() {@Overridepublic void onPageSelected(int position) {LogUtils.d("LoopViewPager onPageSelected --> " + loopViewPagerAdapter.getCount() + " : " + position);if (position == 0){// 滑动到第一页的时候直接跳到倒数第二页，因为两页内容完全一致，跳的过程不会被人眼捕捉到setCurrentItem(loopViewPagerAdapter.getCount() - 2, false);}if (position == loopViewPagerAdapter.getCount() - 1){// 同理滑动到倒数第一页的时候直接跳到第二页setCurrentItem(1, false);}}...
}
第二步 实现放大效果
借助OnPageChangeListener 的 onPageScrolled 滑动进度给指定的Item放大和缩小
private static final float BASE_SCALE = 0.9f; // 为方便调整放大幅度，设立的最小倍数
private static final float BASE_INCREMENT = 0.2f; // 最大放大倍数与最小放大倍数的差值
private OnPageChangeListener onPageChangeListener = new OnPageChangeListener() {...@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {float zoom = BASE_SCALE + (BASE_INCREMENT - Math.abs(positionOffset * BASE_INCREMENT));loopViewPagerAdapter.getViews(position).setScaleX(zoom);loopViewPagerAdapter.getViews(position).setScaleY(zoom);if (positionOffset > 0) {// 左滑，右侧放大View leftView = loopViewPagerAdapter.getViews(position + 1);if (leftView != null){float zoomNext = BASE_SCALE + Math.abs(positionOffset * BASE_INCREMENT);leftView.setScaleX(zoomNext);leftView.setScaleY(zoomNext);}}if (positionOffset < 0) {// 右滑，左侧放大View rightView = loopViewPagerAdapter.getViews(position - 1);if (rightView != null){float zoomNext = BASE_SCALE + Math.abs(positionOffset * BASE_INCREMENT);rightView.setScaleX(zoomNext);rightView.setScaleY(zoomNext);}}@Overridepublic void onPageScrollStateChanged(int state) {LogUtils.d("LoopViewPager onPageScrollStateChanged --> " + state);if (state == 0) {int position = getCurrentItem();for (int i = 0; i < loopViewPagerAdapter.getViews().length; i++) {View itemView = loopViewPagerAdapter.getViews(i);if (itemView != null){if (i == position){loopViewPagerAdapter.getViews(i).setScaleX(BASE_SCALE + BASE_INCREMENT);loopViewPagerAdapter.getViews(i).setScaleY(BASE_SCALE + BASE_INCREMENT);}else {loopViewPagerAdapter.getViews(i).setScaleX(BASE_SCALE);loopViewPagerAdapter.getViews(i).setScaleY(BASE_SCALE);}}}}}}
第三步 增加自动轮播功能
@SuppressLint("HandlerLeak")private class MyHandler extends Handler {WeakReference<Context> mWeakReference;MyHandler(Context context) {mWeakReference = new WeakReference<>(context);}@Overridepublic void handleMessage(Message msg) {Context context = mWeakReference.get();if (context == null) {return;}if (msg.what == HANDLE_LOOP_MSG) {int curItem = getCurrentItem() + 1;setCurrentItem(curItem);}if (isAutoLoop.get()){mHandler.sendEmptyMessageDelayed(HANDLE_LOOP_MSG, 3000);}}}// 开始自动轮播MyHandler mHandler = new MyHandler(getContext());mHandler.sendEmptyMessageDelayed(HANDLE_LOOP_MSG, 3000);
大功告成，附上完整代码
package com.zhlm.babyhearread.widget;import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;
import com.zhlm.babyhearread.base.utils.LogUtils;
import java.lang.ref.WeakReference;
import java.util.ArrayList;
import java.util.concurrent.atomic.AtomicBoolean;/*** 自动轮播ViewPager，画廊效果（当前展示的放大，两侧待展示的缩小），两侧可看到部分* 目前仅支持使用图片,需要其他的话请自行将PagerAdapter改造成FragmentPagerAdapter** 使用方法* <xxx.xxx.LoopViewPager* android:id="@+id/loopViewPager"* android:layout_width="match_parent"* android:layout_height="wrap_content"* android:paddingStart="40dp"* android:paddingEnd="40dp"* android:clipToPadding="false"* />** ArrayList<Integer> ids = new ArrayList<>();* ids.add(R.drawable.img1);* ids.add(R.drawable.img2);* ids.add(R.drawable.img3);* ids.add(R.drawable.img4);* LoopViewPager loopViewPager = findViewById(R.id.loopViewPager);* loopViewPager.setDates(ids); // 设置数据* loopViewPager.autoLoop(true); // 自动轮播** author liming 2019/12/9 16:40* e-mail : limit_round@163.com**/
public class LoopViewPager extends ViewPager {private MyHandler mHandler;private LoopViewPagerAdapter loopViewPagerAdapter;private final static int HANDLE_LOOP_MSG = 101;private AtomicBoolean isAutoLoop = new AtomicBoolean();private static final float BASE_SCALE = 0.9f;private static final float BASE_INCREMENT = 0.2f;public LoopViewPager(Context context) {this(context, null);}public LoopViewPager(Context context, AttributeSet attrs) {super(context, attrs);}public void autoLoop(boolean isAuto) {if (mHandler == null) {mHandler = new MyHandler(getContext());}if (isAuto) {mHandler.sendEmptyMessageDelayed(HANDLE_LOOP_MSG, 3000);} else {mHandler.removeCallbacksAndMessages(null);}isAutoLoop.set(isAuto);}public void setDates(ArrayList<Integer> imgIds){setOffscreenPageLimit(5);loopViewPagerAdapter = new LoopViewPagerAdapter(getContext(), imgIds);loopViewPagerAdapter.initItem();setAdapter(loopViewPagerAdapter);setCurrentItem(1);setOnPageChangeListener(onPageChangeListener);}private OnPageChangeListener onPageChangeListener = new OnPageChangeListener() {@Overridepublic void onPageSelected(int position) {LogUtils.d("LoopViewPager onPageSelected --> " + loopViewPagerAdapter.getCount() + " : " + position);if (position == 0){setCurrentItem(loopViewPagerAdapter.getCount() - 2, false);}if (position == loopViewPagerAdapter.getCount() - 1){setCurrentItem(1, false);}}@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {float zoom = BASE_SCALE + (BASE_INCREMENT - Math.abs(positionOffset * BASE_INCREMENT));loopViewPagerAdapter.getViews(position).setScaleX(zoom);loopViewPagerAdapter.getViews(position).setScaleY(zoom);if (positionOffset > 0) {// 左滑，右侧放大View leftView = loopViewPagerAdapter.getViews(position + 1);if (leftView != null){float zoomNext = BASE_SCALE + Math.abs(positionOffset * BASE_INCREMENT);leftView.setScaleX(zoomNext);leftView.setScaleY(zoomNext);}}if (positionOffset < 0) {// 右滑，左侧放大View rightView = loopViewPagerAdapter.getViews(position - 1);if (rightView != null){float zoomNext = BASE_SCALE + Math.abs(positionOffset * BASE_INCREMENT);rightView.setScaleX(zoomNext);rightView.setScaleY(zoomNext);}}}@Overridepublic void onPageScrollStateChanged(int state) {LogUtils.d("LoopViewPager onPageScrollStateChanged --> " + state);if (state == 0) {int position = getCurrentItem();for (int i = 0; i < loopViewPagerAdapter.getViews().length; i++) {View itemView = loopViewPagerAdapter.getViews(i);if (itemView != null){if (i == position){loopViewPagerAdapter.getViews(i).setScaleX(BASE_SCALE + BASE_INCREMENT);loopViewPagerAdapter.getViews(i).setScaleY(BASE_SCALE + BASE_INCREMENT);}else {loopViewPagerAdapter.getViews(i).setScaleX(BASE_SCALE);loopViewPagerAdapter.getViews(i).setScaleY(BASE_SCALE);}}}}}};@SuppressLint("HandlerLeak")private class MyHandler extends Handler {WeakReference<Context> mWeakReference;MyHandler(Context context) {mWeakReference = new WeakReference<>(context);}@Overridepublic void handleMessage(Message msg) {Context context = mWeakReference.get();if (context == null) {return;}if (msg.what == HANDLE_LOOP_MSG) {int curItem = getCurrentItem() + 1;setCurrentItem(curItem);}if (isAutoLoop.get()){mHandler.sendEmptyMessageDelayed(HANDLE_LOOP_MSG, 3000);}}}public int getWidth(Context context) {WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);DisplayMetrics outMetrics = new DisplayMetrics();if (wm != null) {wm.getDefaultDisplay().getMetrics(outMetrics);}return outMetrics.widthPixels;}public static class LoopViewPagerAdapter extends PagerAdapter{private Context context;private ArrayList<Integer> ids = new ArrayList<>();private View[] views;private int currItem = -1;LoopViewPagerAdapter(Context context, ArrayList<Integer> imgIds){this.context = context;this.ids.add(imgIds.get(imgIds.size()-1));this.ids.addAll(imgIds);this.ids.add(imgIds.get(0));views = new View[ids.size()];}View getViews(int position) {return views[position];}View[] getViews() {return views;}void initItem(){currItem = 1;}@Overridepublic int getCount() {return ids.size();}@Overridepublic boolean isViewFromObject(@NonNull View view, @NonNull Object object) {return view == object;}@NonNull@Overridepublic Object instantiateItem(@NonNull ViewGroup container, int position) {ImageView imageView = new ImageView(context);imageView.setImageResource(ids.get(position));if (position == currItem){imageView.setScaleX(BASE_SCALE + BASE_INCREMENT);imageView.setScaleY(BASE_SCALE + BASE_INCREMENT);currItem = -1;}else {imageView.setScaleX(BASE_SCALE);imageView.setScaleY(BASE_SCALE);}container.addView(imageView);views[position] = imageView;return imageView;}}
}
画廊效果的ViewPager实现（附带无限自动轮播）相关推荐
- Android之ViewPager实现图片无限循环轮播
很久没有写博客了,之前花时间写了一个Viewpager实现的无限图片轮播,个人感觉还是很好用的QAQ,源码和思路都还算清晰 实现的效果图如下: 这里要补充一下,在这个项目中我把图片轮播写进了一个Vie ...
- Android广告条效果--使用Volley实现网络图片的自动轮播（仿淘宝、网易广告页轮播效果）
最近在做自定义控件时,发现一个极其常用的效果--广告条,即图片的自动轮播效果.现在市面上大多数的APP软件都在使用这种展示广告的效果.闲来无事,我简单翻看了一下自己的手机软件,几乎都使用了这种图片自动 ...
- android viewpager实现画廊效果,android viewpager 实现画廊效果
首先看一下效果图: xml布局: activity代码: (这里我是在fragment里面写的 ,其实跟activity布局里面差不多) public class FollowFragment ext ...
- js实现文字无限滚动轮播
html代码 <div><ul id="ul1"><li>1111111111</li><li>2222222222&l ...
- 手把手带你用viewpager实现gallary效果，外加无限循环，自动轮播
手把手带你用viewpager实现gallary效果,外加无限循环,自动轮播 效果图:图很丑,各位看官且按需更改. 主要功能: ①Gallary样式 ②无限轮播 ③自动轮播和手势操作间冲突解决 提前说 ...
- Android开发学习之基于ViewPager实现Gallery画廊效果
通过我们前面的学习,我们知道ViewPager是可以做出近乎完美的滑动体验,回顾整个Android,我们发现Gallery具备同样的特点,于是我们大胆地猜想,Gallery是否和ViewPager之间 ...
- [原创]自定义ViewPager实现3D画廊效果
经常在群里看到有些开发者在提问:怎么实现3D画廊效果,没思路. 有人出谋划策,你重写onTouch,在里面去判断:或者你去重写滑动监听事件,滑动的时候去动态设置左右两边的图片的大小和缩放效果.可能你们 ...
- android控件翻书效果,android ViewPager实现滑动翻页效果实例代码
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下:import android.content.Context;import androi ...
- 仿朋友圈相册图片选择以及画廊效果
仿朋友圈相册图片选择以及画廊效果 1.效果展示 2.导入相关第三方库依赖 3.编写选择图片页面 a.编写布局 b.编写Activity c.相册选择工具类部分代码 d.相册4宫图适配器 4.编写画廊页 ...
最新文章
- 2022-2028年中国HDPE膜行业市场研究及投资发展分析报告
- SAP PI 业务处理引擎
- Android应用开发-快速入门
- 【正一专栏】疯狂溢价的转会市场，中国足球最奇葩
- MFC窗口位置和大小的获取
- js改变css样式_React 中使用CSS的7种方法
- NodeJS使用ES6
- java第三章_【Java】第三章 变量
- WCF添加服务失败一则
- 使用 MIDP 底层用户接口 API
- perl亲身试验ini---使用perl读写配置文件
- NP实验-1 华为MSTP+VRRP练习题
- java系统课程设计报告_201621123063《JAVA课程设计报告》
- 静态页面模板，比较不错的网站，效果比较多，html代码可以直接下载即可
- Mac如何用鼠标快速锁屏
- ROSDUCT：通过rosbridge在本地公开远程ROS主题、服务和参数
- 分享三种在Excel表格中自动求和的方法
- PTA第六章作业详解
- 域控服务器错误事件解决方法,求大神帮忙，域控总有事件报错，事件ID：1864 - winServer论坛 - 51CTO技术论坛_中国领先的IT技术社区...
- 无胁科技-TVD每日漏洞情报-2022-11-21