ViewPage实现无限轮播画廊效果
1. 效果图
2. 布局文件
主要使用的 android:clipChildren的意思:是否限制子View在其范围内。再父布局和viewpager中设置该属性 ,要显示三个界面 ,还要设置marginleft和marginRight
<?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:clipChildren="false"
>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:clipChildren="false"
android:layout_marginTop="30dp"
android:layout_marginLeft="60dp"
android:layout_marginRight="60dp"
android:layout_height="150dp"></android.support.v4.view.ViewPager> </RelativeLayout>
3. Adapter
private class MyAdapter extends PagerAdapter{ @Override
public int getCount() {
return Integer.MAX_VALUE;//无限轮播
} @Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
return view==o;
} @NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
View view=LayoutInflater.from(Grally2Activity.this).inflate(R.layout.item_vp,null);
int newwPos=position%(datas.size());//对应数据中的位置
ImageView img=view.findViewById(R.id.img);
img.setImageResource(datas.get(newwPos));
container.addView(view);
return view;
} @Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object
object) {
// super.destroyItem(container, position, object);
container.removeView((View) object);
}
}
4.关键点PageTransformer
public class Scalltransformer implements ViewPager.PageTransformer {
private float MINSCALE=0.8f;//最小缩放值 /**
* position取值特点:
* 假设页面从0~1,则:
* 第一个页面position变化为[0,-1]
* 第二个页面position变化为[1,0]
*
* @param view
* @param v
*/
@Override
public void transformPage(@NonNull View view, float v) { float scale;//view 应缩放的值
if(v>1||v<-1){
scale=MINSCALE;
}else if(v<0){
scale=MINSCALE+(1+v)*(1-MINSCALE);
}else{
scale=MINSCALE+(1-v)*(1-MINSCALE);
}
view.setScaleY(scale);
view.setScaleX(scale);
}
}
5.Activity代码
public class Grally2Activity extends AppCompatActivity {
@BindView(R.id.vp)
ViewPager vp; private List<Integer> datas=new ArrayList<>();
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_grally);
ButterKnife.bind(this);
initDatas();
initVP();
} private void initVP() {
vp.setPageMargin(20);//设置ViewPager中子布局的间隔
vp.setOffscreenPageLimit(2);
vp.setPageTransformer(false,new Scalltransformer());
vp.setAdapter(new MyAdapter());
vp.setCurrentItem(Integer.MAX_VALUE/2-(Integer.MAX_VALUE/2%datas.size()));//设置首个轮播显示的位置 实现左右滑动 且首页面对应的是第一个数据
} private void initDatas() {
datas.add(R.mipmap.p2);
datas.add(R.mipmap.p3);
datas.add(R.mipmap.p4);
datas.add(R.mipmap.p5);
} private class MyAdapter extends PagerAdapter{ @Override
public int getCount() {
return Integer.MAX_VALUE;
} @Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
return view==o;
} @NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
View view=LayoutInflater.from(Grally2Activity.this).inflate(R.layout.item_vp,null);
int newwPos=position%(datas.size());
ImageView img=view.findViewById(R.id.img);
img.setImageResource(datas.get(newwPos));
container.addView(view);
return view;
} @Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object
object) {
// super.destroyItem(container, position, object);
container.removeView((View) object);
}
}
}
ViewPage实现无限轮播画廊效果的更多相关文章
- ViewPager实现无限轮播踩坑记
最近笔者想通过ViewPager来实现一个广告Banner,并实现无限轮播的效果,但是在这个过程中踩了不少的坑,听我慢慢道来.如果大家有遇到和我一样的情况,可以参考我的解决方法,没有那就更好,如果针对 ...
- 用UICollectionView实现无限轮播图
用UICollectionView实现无限轮播图 效果 源码 https://github.com/YouXianMing/Animations 细节
- Android--ViewPager的无限轮播
ViewPage_RadioButton实现带小圆点的无限轮播,效果还能凑合着用. 1.在ViewPage的监听里面这样处理 @Override public void onPageSelected( ...
- iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)
这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...
- iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView
iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView 时间:2016-01-19 19:13:43 阅读:630 评论:0 收藏:0 ...
- iOS开发之ImageView复用实现图片无限轮播
在上篇博客中iOS开发之多图片无缝滚动组件封装与使用给出了图片无限轮播的实现方案之一,下面在给出另一种解决方案.今天博客中要说的就是在ScrollView上贴两个ImageView, 把ImageVi ...
- iOS开发UI篇—无限轮播(新闻数据展示)
iOS开发UI篇—无限轮播(新闻数据展示) 一.实现效果 二.实现步骤 1.前期准备 (1)导入数据转模型的第三方框架MJExtension (2)向项目中添加保存有“新闻”数据的pli ...
- iOS开发UI篇—无限轮播(功能完善)
iOS开发UI篇—无限轮播(功能完善) 一.自动滚动 添加并设置一个定时器,每个2.0秒,就跳转到下一条. 获取当前正在展示的位置. [self addNSTimer]; } -(void)addNS ...
- Android之仿京东淘宝的自动无限轮播控件
在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于Re ...
随机推荐
- java web 程序---购物车项目内容:
1.项目介绍 典型电子商务系统(在线购物平台).模拟了当当系统部分功能.2.功能需求 1)用户管理模块(3天)user 实现登录.注册功能 2)产品浏览模块(2天)ma ...
- python3 关联规则Apriori代码模版
#!/usr/bin/env python3 # -*- coding: utf-8 -*- from numpy import * def loadDataSet(): return [['a', ...
- centos6挂载U盘
一.FAT格式的U盘 插入U盘 [root@localhost ~]# dmesg | grep usb usbcore: registered new interface driver usbfs ...
- 在Ubuntu 16.04上使用bazel交叉编译tensorflow
鸽了这么久,正式开工 Author: carbon email: ecras_y@163.com 参考资料: https://github.com/tensorflow/tensorflow http ...
- [Octave] optimset()
Create options struct for optimization functions. optimset('parameter', value, ...); %设置所有参数及其值,未设置的 ...
- leetcode119
public class Solution { public IList<int> GetRow(int rowIndex) { List<List<int>> l ...
- IOS上架(九) AppStore编译生成ipa文件并上传
IOS上架上传ipa文件 AppStore https://itunesconnect.apple.com delphi project>option里的CFBundleVersion 上传的版 ...
- linux nohup命令使程序在后台运行的方法
在linux操作系统中从后台一直运行某个程序的方法,就是使用nohup命令了. Unix/Linux下一般比如想让某个程序在后台运行,很多都是使用 & 在程序结尾来让程序自动运行. 比如要运行 ...
- 迷你MVVM框架 avalonjs 1.3.3发布
大家可以在仓库中看到,多出了一个叫avalon.observe的东西,它是基于Object.observe,dataset, Promise等新API实现.其中,它也使用全新的静态收集依赖的机制,这个 ...
- javascript数组操作(创建、元素删除、数组的拷贝)
这篇文章主要介绍了javascript数组操作,包括创建.元素的访问.元素删除.数组的拷贝等操作,还有其它示例,需要的朋友可以参考下 1.数组的创建 复制代码 代码如下: var arrayObj = ...