ViewPager 实现 Galler 效果, 中间大图显示,两边小图展示(优化篇)
上一张效果图:
之前的项目有一个Galley的项目,但是代码结构特别乱,别问我为什么,我也是刚接手这个项目,为了方便以后阅读和维护我对一些模块进行了重构。ViewPager实现Galler效果,但是当时时间比较急,写的比较仓促,上一篇实现了简单的效果,但是对于初始的时候左边滑动是有问题的,这是因为我们在自己的Adapter的时候对于getCount,我们想通过Integer.MAX_VALUE来实现无限循环,简单的说这个是向右(无限大)吧,所以也就只是实现了向右的循环,对于像左的还是不行的。
那么怎么解决呢?
首先我们对Adapter还是需要按以前的写法,其实Adapter适配器就是帮我们做界面的,其他的逻辑最好不要加,我之前的想法是用过
viewPager.addOnPageChangeListener来实现,通过判断是否滑到最左边或者最右边来实现循环滑到。
int realPosition = mAdapter.toRealPosition(position); if (mPreviousPosition != realPosition) { mPreviousPosition = realPosition; if (mOuterPageChangeListener != null) { mOuterPageChangeListener.onPageSelected(realPosition); } }这里我封装了一个类,只要将你的ViewPager改为我封装好的ViewPager就行
LoopViewPager
public class LoopViewPager extends ViewPager { private static final boolean DEFAULT_BOUNDARY_CASHING = false; private OnPageChangeListener mOuterPageChangeListener; private LoopPagerAdapterWrapper mAdapter; private boolean mBoundaryCaching = DEFAULT_BOUNDARY_CASHING; public static int toRealPosition( int position, int count ){ position = position-1; if( position < 0 ){ position += count; }else{ position = position%count; } return position; } public void setBoundaryCaching(boolean flag) { mBoundaryCaching = flag; if (mAdapter != null) { mAdapter.setBoundaryCaching(flag); } } @Override public void setAdapter(PagerAdapter adapter) { mAdapter = new LoopPagerAdapterWrapper(adapter); mAdapter.setBoundaryCaching(mBoundaryCaching); super.setAdapter(mAdapter); setCurrentItem(0, false); } @Override public PagerAdapter getAdapter() { return mAdapter != null ? mAdapter.getRealAdapter() : mAdapter; } @Override public int getCurrentItem() { return mAdapter != null ? mAdapter.toRealPosition(super.getCurrentItem()) : 0; } public void setCurrentItem(int item, boolean smoothScroll) { int realItem = mAdapter.toInnerPosition(item); super.setCurrentItem(realItem, smoothScroll); } @Override public void setCurrentItem(int item) { if (getCurrentItem() != item) { setCurrentItem(item, true); } } @Override public void setOnPageChangeListener(OnPageChangeListener listener) { mOuterPageChangeListener = listener; }; public LoopViewPager(Context context) { super(context); init(); } public LoopViewPager(Context context, AttributeSet attrs) { super(context, attrs); init(); } private void init() { super.setOnPageChangeListener(onPageChangeListener); } private OnPageChangeListener onPageChangeListener = new OnPageChangeListener() { private float mPreviousOffset = -1; private float mPreviousPosition = -1; @Override public void onPageSelected(int position) { int realPosition = mAdapter.toRealPosition(position); if (mPreviousPosition != realPosition) { mPreviousPosition = realPosition; if (mOuterPageChangeListener != null) { mOuterPageChangeListener.onPageSelected(realPosition); } } } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { int realPosition = position; if (mAdapter != null) { realPosition = mAdapter.toRealPosition(position); if (positionOffset == 0 && mPreviousOffset == 0 && (position == 0 || position == mAdapter.getCount() - 1)) { setCurrentItem(realPosition, false); } } mPreviousOffset = positionOffset; if (mOuterPageChangeListener != null) { if (realPosition != mAdapter.getRealCount() - 1) { mOuterPageChangeListener.onPageScrolled(realPosition, positionOffset, positionOffsetPixels); } else { if (positionOffset > .5) { mOuterPageChangeListener.onPageScrolled(0, 0, 0); } else { mOuterPageChangeListener.onPageScrolled(realPosition, 0, 0); } } } } @Override public void onPageScrollStateChanged(int state) { if (mAdapter != null) { int position = LoopViewPager.super.getCurrentItem(); int realPosition = mAdapter.toRealPosition(position); if (state == ViewPager.SCROLL_STATE_IDLE && (position == 0 || position == mAdapter.getCount() - 1)) { setCurrentItem(realPosition, false); } } if (mOuterPageChangeListener != null) { mOuterPageChangeListener.onPageScrollStateChanged(state); } } }; }LoopPagerAdapterWrapperpublic class LoopPagerAdapterWrapper extends PagerAdapter { private PagerAdapter mAdapter; private SparseArray<ToDestroy> mToDestroy = new SparseArray<ToDestroy>(); private boolean mBoundaryCaching; void setBoundaryCaching(boolean flag) { mBoundaryCaching = flag; } LoopPagerAdapterWrapper(PagerAdapter adapter) { this.mAdapter = adapter; } @Override public void notifyDataSetChanged() { mToDestroy = new SparseArray<ToDestroy>(); super.notifyDataSetChanged(); } int toRealPosition(int position) { int realCount = getRealCount(); if (realCount == 0) return 0; int realPosition = (position-1) % realCount; if (realPosition < 0) realPosition += realCount; return realPosition; } public int toInnerPosition(int realPosition) { int position = (realPosition + 1); return position; } private int getRealFirstPosition() { return 1; } private int getRealLastPosition() { return getRealFirstPosition() + getRealCount() - 1; } @Override public int getCount() { return mAdapter.getCount() + 2; } public int getRealCount() { return mAdapter.getCount(); } public PagerAdapter getRealAdapter() { return mAdapter; } @Override public Object instantiateItem(ViewGroup container, int position) { int realPosition = (mAdapter instanceof FragmentPagerAdapter || mAdapter instanceof FragmentStatePagerAdapter) ? position : toRealPosition(position); if (mBoundaryCaching) { ToDestroy toDestroy = mToDestroy.get(position); if (toDestroy != null) { mToDestroy.remove(position); return toDestroy.object; } } return mAdapter.instantiateItem(container, realPosition); } @Override public void destroyItem(ViewGroup container, int position, Object object) { int realFirst = getRealFirstPosition(); int realLast = getRealLastPosition(); int realPosition = (mAdapter instanceof FragmentPagerAdapter || mAdapter instanceof FragmentStatePagerAdapter) ? position : toRealPosition(position); if (mBoundaryCaching && (position == realFirst || position == realLast)) { mToDestroy.put(position, new ToDestroy(container, realPosition, object)); } else { mAdapter.destroyItem(container, realPosition, object); } } @Override public void finishUpdate(ViewGroup container) { mAdapter.finishUpdate(container); } @Override public boolean isViewFromObject(View view, Object object) { return mAdapter.isViewFromObject(view, object); } @Override public void restoreState(Parcelable bundle, ClassLoader classLoader) { mAdapter.restoreState(bundle, classLoader); } @Override public Parcelable saveState() { return mAdapter.saveState(); } @Override public void startUpdate(ViewGroup container) { mAdapter.startUpdate(container); } @Override public void setPrimaryItem(ViewGroup container, int position, Object object) { mAdapter.setPrimaryItem(container, position, object); } static class ToDestroy { ViewGroup container; int position; Object object; public ToDestroy(ViewGroup container, int position, Object object) { this.container = container; this.position = position; this.object = object; } } }这里需要注意对于上一篇的WelfareAdapter ,我们就按常规写法就行。
public class WelfareAdapter extends PagerAdapter { private Context mContext; private List<PanicBean> dataList = new ArrayList<>(); public WelfareAdapter(Context mContext) { this.mContext = mContext; } public void setDatas(List<PanicBean> list) { if (list.size() <= 0) { dataList.clear(); notifyDataSetChanged(); return; } dataList.clear(); dataList.addAll(list); notifyDataSetChanged(); } @Override public int getCount() { return /*Integer.MAX_VALUE*/dataList.size(); } @Override public int getItemPosition(Object object) { return POSITION_NONE; } @Override public void destroyItem(View container, int position, Object object) { } @Override public Object instantiateItem(ViewGroup container, int position) { // position %= dataList.size(); // if (position<0){ // position = dataList.size()+position; // } PanicBean data = dataList.get(position); ViewHolder viewHolder = null; View view = LayoutInflater.from(mContext).inflate( R.layout.item_finefare_layout, null); if (viewHolder == null) { viewHolder = new ViewHolder(view); } bindView(viewHolder, data); container.addView(view, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); return view; } private void bindView(ViewHolder viewholder, final PanicBean data) { Glide.with(mContext).load(data.pic).into(viewholder.welfareImage); viewholder.welfareImage.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { ToastUtils.showToast("你点击了"+data.href); } }); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } class ViewHolder { @BindView(R.id.welfare_image) RoundedImageView welfareImage; ViewHolder(View view) { ButterKnife.bind(this, view); view.setTag(this); } public void reset() { welfareImage.setBackground(mContext.getResources().getDrawable(R.drawable.welfare_default_icon)); } } }
ViewPager 实现 Galler 效果, 中间大图显示,两边小图展示(优化篇)的更多相关文章
- ViewPager 实现 Galler 效果, 中间大图显示,两边小图展示
正常情况下, ViewPager 一页只能显示一项数据, 但是我们常常看到网上,特别是电视机顶盒的首页经常出现中间大图显示两端也都露出一点来,这种效果怎么实现呢?先上一张效果图: 大家第一眼肯定想到了 ...
- 【笔记】WPF实现ViewPager引导界面效果及问题汇总
最近在开发项目的首次使用引导界面时,遇到了问题,引导界面类似于安卓手机ViewPager那样的效果,希望通过左右滑动手指来实现切换不同页面,其间伴随动画. 实现思路: 1.界面布局:新建一个UserC ...
- 基于jQuery左侧小图滚动右侧大图显示代码
今天给大家分享一款 jQuery左侧小图滚动右侧大图显示代码是一款基于jQuery实现的左侧滚动图片点击大图查看效果代码.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari. ...
- jQuery 效果 —— 隐藏和显示
jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...
- windows7文件夹怎样默认图片大图显示?
先打开一个含有图片的文件夹,在文件夹空白处右键选择属性,打开自定义选项卡. 确定自定义选项卡 显示的是:“优化此文件夹:图片”. 然后,选择:组织--文件夹和搜索选项--查看--文件夹视图,应用到文件 ...
- 精致3D图片切换效果,最适合企业产品展示
这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...
- TexturePacker大图还原成小图工具带源码
TexturePacker是一个把好多小图打成大图的软件,生成的是大图以及小图在大图位置的.plist描述文件,但是不支持把大图还原成小图.网上偷的图一般都是大图和plist,想得到小图比较麻烦,于是 ...
- Python - 工具:将大图切片成小图,将小图组合成大图
训练keras时遇到了一个问题,就是内存不足,将 .fit 改成 .fit_generator以后还是放不下一张图(我的图片是8192×8192的大图==64M).于是解决方法是将大图切成小图,把小图 ...
- Android照片墙加强版,使用ViewPager实现画廊效果
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/12646775 记得关于照片墙的文章我已经写过好几篇了,有最基本的照片墙,有瀑布流模 ...
随机推荐
- C++笔记001:Microsoft Visual Studio 2010软件的安装与建立第一个cpp文件
原创笔记,转载请注明出处! 点击[关注],关注也是一种美德~ 我学习C++使用软件为Microsoft Visual Studio 2010. 首先,软件的安装包 链接:https://pan.bai ...
- TypeScript入门教程
TypeScript是什么 TypeScript是JavaScript的一个超集 TypeScript需要编译为JavaScript才能运行(语法糖) TypeScript提供了类型系统,规范类似Ja ...
- 01_自动化构建工具之Maven
目前技术中存在问题(为什么使用Maven): 一个项目就是一个工程: 缺陷:如果项目太过庞大,就不适合使用package来划分层次,最好是一个模块就是一个工程,利于分工协作. 解决:Maven可以将一 ...
- BDD敏捷开发入门与实战
BDD敏捷开发入门与实战 1.BDD的来由 2003年,Dan North首先提出了BDD的概念,并在随后开发出了JBehave框架.在Dan North博客上介绍BDD的文章中,说到了BDD的想法是 ...
- Winform DevExpress控件库(一) DevExpress控件库的安装与新建第一个DevExpress项目
前言:因为这段时间要接触到DevExpress控件库,而我本身甚至对winform的控件都了解甚少,所以处在学习中,写下博客主要是为了方便后期的回顾,当然也可以给一些新人第一次接触时做为学习的参考,以 ...
- zookeeper基本原理及适用场景 转:http://blog.chinaunix.net/uid-26748613-id-4536290.html
1.1 zookeeper简介 Zookeeper 是 Hadoop 生态系统中的协同实现,是Hadoop集群管理的一个必不可少的模块,它主要来控制集群中的数据,如它管理Hadoop集群中的NameN ...
- android MultiDex multiDex原理(一)
android MultiDex 原理(一) Android分包MultiDex原理详解 转载请注明:http://blog.csdn.net/djy1992/article/details/5116 ...
- Docker学习笔记3:CentOS7下安装Docker-Compose
Docker-Compose是一个部署多个容器的简单但是非常必要的工具. 安装Docker-Compose之前,请先安装 python-pip,请参考我的另一篇博文CentOS7下安装python-p ...
- Dynamics CRM2013 从subgrid中打开快速创建窗体创建数据
在页面上使用subgrid时,在subgrid中新建数据时需要跳转到另一个页面,这种操作比较麻烦且很不友好,这时我们想到了快速创建窗体,像下图这样直接在当前页上方下拉出现一个窗体,填写内容后点击保存就 ...
- EJB通过ANT提高EJB应用的开发效率、开发具有本地接口的无状态bean、开发有状态bean
把jboss集成进eclipse 关闭Jboss控制台按Ctrl+c,在MyEclipse→Servers→Jboss里面可以配置JBoss. 通过ANT提高EJB应用的开发效率 在HelloWorl ...