Android推荐一个比较好用的画廊展示图片(支持无限轮播)的控件ViewPagerGallery

释放双眼,带上耳机,听听看~!

1.在此我们引用 支持无限滑动的3D视觉的画廊效果、 平面普通广告栏轮播

这个例子中有可以运行的效果,大家可以下载下来先看一下,在我开始使用的时候,发现,想要调整 page item中的间距,比较困难,并没有暴露方法出来。所以就要看一下源代码,发现,在不使用3D效果,即初始化:initBanner(urlList,false),没有什么问题,(这里说的3D效果,就是左右item要比正在显示的item的高度小一些,并且添加动画的效果)

banner_3d.initBanner(urlList, true)//开启3D画廊效果
.addPageMargin(5, 15)//参数1page之间的间距,参数2中间item距离边界的间距
.addPoint(6)//添加指示器
.addPointBottom(7)
.addStartTimer(5)//自动轮播5秒间隔
.addRoundCorners(12)//圆角
.finishConfig()//这句必须加
.addBannerListener(new BannerViewPager.OnClickBannerListener() {
@Override
public void onBannerClick(int position) {
//点击item
showShort("效果1点击"+position);
Log.i("test","--------------00x1");
}
});

2.发现开启3D效果时,addPageMargin会失效,item左右的间距设置没有任何改变,页面非常丑陋,左右间距相差太大,罪魁祸首是 ZoomPageTransformer这个类

然后我们可以通过修改 setScaleX,setScaleY来分别改变page item间距以及 左右item的高度问题,以下我修改了原来的view.setScaleX(MIN_SCALE);为 view.setScaleY(X_SCALE);

package com.lzj.gallery.library.transformer;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;
/**
* Created by Administrator on 2018/11/28.
* 3D画廊效果其实就是ViewPager的item切换时,进行缩放的动画效果
*
*/
public class ZoomPageTransformer implements ViewPager.PageTransformer {
private static final float MAX_SCALE = 1.0f;//0缩放
//    private static final float MIN_SCALE = 0.85f;//0.85缩放
private static final float MIN_SCALE = 0.89f;//0.85缩放
private static final float X_SCALE = 0.99f;
private float MIN_ALPHA = 1.0f;//最小透明度
public ZoomPageTransformer() {
}
public ZoomPageTransformer(float MIN_ALPHA) {
this.MIN_ALPHA = MIN_ALPHA;
}
@Override
public void transformPage(View view, float position) {
//setScaleY只支持api11以上
/**
* (-oo,-1) 相对于左边第一页,其左边的所有页面 **
* x、y拉伸为MIN_SCALE、透明度MIN_ALPHA
*/
if (position < -1) {
Log.d("MyInfo","11111");
//            view.setScaleX(MIN_SCALE);
view.setScaleX(X_SCALE);
view.setScaleY(MIN_SCALE);
view.setAlpha(MIN_ALPHA);
}
/**
* [-1, 1 )当前页的左右第一页
*/
else if (position < 1) {
Log.d("MyInfo","2222");
float scaleFactor = MIN_SCALE + (1 - Math.abs(position)) * (MAX_SCALE - MIN_SCALE);
//[0, 1 ) 相对于当前选中页,其右边第一页 **
if (position > 0) {
Log.d("MyInfo","3333");
view.setTranslationX(-scaleFactor);
}
// [-1, 0 ) 相对于当前选中页,其左边的第一页**
else if (position < 0) {
Log.d("MyInfo","4444");
view.setTranslationX(scaleFactor);
}
view.setScaleY(scaleFactor);
//            view.setScaleX(scaleFactor);
view.setScaleX(X_SCALE);
// float alpha = 1f -  Math.abs(position) * (1 - );
float alpha = MIN_ALPHA + (1 - MIN_ALPHA) * (1 - Math.abs(position));
view.setAlpha(alpha);
}
/**
* [1,+oo) 相对于右边第一页,其右边的所有页面
* x、y拉伸为MIN_SCALE、透明度MIN_ALPHA
*/
else { // (1,+Infinity]
Log.d("MyInfo","5555");
//            view.setScaleX(MIN_SCALE);
view.setScaleX(X_SCALE);
view.setScaleY(MIN_SCALE);
view.setAlpha(MIN_ALPHA);
}
}
}

3.重要方法

  • view.setScaleX(X_SCALE);
  • view.setScaleY(MIN_SCALE);

4.如何使用

4.1xml中声明:

<com.lzj.gallery.library.views.BannerViewPager
android:id="@+id/banner_3d"
android:layout_marginTop="20dp"
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="150dp">
</com.lzj.gallery.library.views.BannerViewPager>

4.2 activity中调用

banner_3d.initBanner(urlList, true)//开启3D画廊效果
.addPageMargin(5, 15)//参数1page之间的间距,参数2中间item距离边界的间距
.addPoint(6)//添加指示器
.addPointBottom(7)
.addStartTimer(5)//自动轮播5秒间隔
.addRoundCorners(12)//圆角
.finishConfig()//这句必须加
.addBannerListener(new BannerViewPager.OnClickBannerListener() {
@Override
public void onBannerClick(int position) {
//点击item
showShort("效果1点击"+position);
Log.i("test","--------------00x1");
}
});

4.3 优化处理(页面中控制 banner轮播开始与暂停)

@Override
public void onStart() {
super.onStart();
if(mBanner!=null){
mBanner.startTimer();
}
}
@Override
public void onStop() {
super.onStop();
if(mBanner!=null){
mBanner.stopTimer();
}
}

注意:(如果在RecyclerView中使用的时候,要先进行 mBanner.removeAllView(),否则会有图案粘贴在背后的一个bug)

由于上面贴出的那个类还在类库文件中,可以将源代码下载下来并且将 gallery类库直接导进来,修改ZoomPageTransformer即可。下面贴一张改后的效果图(第一个显示为改后的效果):
在这里插入图片描述

人已赞赏
Android文章

androidStudio分包引起的系统崩溃,报错ClassNotFoundException: Didn't find class "XXXView" on path: DexPath../.apk

2020-3-5 18:16:19

Android文章

AndroidQ 强制黑暗(Force Dark)模式适配实践

2020-3-6 8:05:36

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索