【Android】实现支持Fragment的自动无限滚动ViewPager

时间 2019-11-08

标签 Android 实现支持 fragment 自动无限滚动 viewpager 栏目 Android 繁體版

原文原文链接

有一天，UI小姐姐给了我一张酱紫的Banner设计图php

以前作Banner都是普通样式的，就是直接铺满的一张图片，因此偷懒直接用了 youth的banner控件
然鹅此次的需求没有那么简单了，普通的banner确定是没法知足的。
先看一眼最终效果

最终效果

整理需求

先来捋一捋这个Banner要作成什么亚子
1.首先从图上能够看出每一页的底部有一个蓝色的阴影，这个颜色很明显和图片的颜色是不一致的，因此推测是一个图层（后来看PSD果真是个图层）
2.图片带有圆角
3.Banner的选中项没有撑满整个屏幕，边缘会露出相邻的item
4.相邻项的体积比选中项要小java

设计解决方案

根据需求一条一条来
1.蓝色阴影→直接叠一层ImageView在底下而后给一个MarginTop就完了
2.圆角→这个简单，Glide更新到4以上，直接传参便可
3.Banner选中项不撑满，露出边缘项→这个给布局文件设置android:clipChildren="false"而后给ViewPager设置android:clipToPadding="false"再给ViewPager一个左右的Margin便可
4.相邻项比选中项小→这里我考虑作成一个缩放动画效果，给ViewPager设置setPageTransformerandroid

item蓝色阴影

直接上代码，其中的shadow_banner是从设计图上切下来的阴影图层git

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="170dp">

    <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="15dp" android:adjustViewBounds="true" android:src="@drawable/shadow_banner" />

    <ImageView android:id="@+id/img" android:layout_width="match_parent" android:layout_height="150dp" android:layout_gravity="center" android:layout_marginTop="8dp" android:layout_marginBottom="15dp" android:adjustViewBounds="true" android:scaleType="centerCrop" tools:src="@mipmap/ic_launcher" />

</FrameLayout>
复制代码

Glide实现圆角

这里使用了一个封装好了的Glide工具类，由于直接使用Glide有时会在界面finish的时候抛出一个异常直接把APP搞崩（不知道Google怎么想的→_→）github

GlideLoadUtils

import android.app.Activity;
import android.content.Context;
import android.os.Build;
import android.util.Log;
import android.widget.ImageView;

import androidx.fragment.app.Fragment;

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.resource.bitmap.CenterCrop;
import com.bumptech.glide.load.resource.bitmap.CircleCrop;
import com.bumptech.glide.load.resource.bitmap.RoundedCorners;
import com.bumptech.glide.request.RequestOptions;
//import com.bumptech.glide.load.resource.bitmap.CircleCrop;
//import com.bumptech.glide.request.RequestOptions;

/** * Glide 加载 简单判空封装 防止异步加载数据时调用Glide 抛出异常 * Created by Li_Xavier on 2017/6/20 0020. */
public class GlideLoadUtils {
    private String TAG = "ImageLoader";

    /** * 借助内部类 实现线程安全的单例模式 * 属于懒汉式单例，由于Java机制规定，内部类SingletonHolder只有在getInstance() * 方法第一次调用的时候才会被加载（实现了lazy），并且其加载过程是线程安全的。 * 内部类加载的时候实例化一次instance。 */
    public GlideLoadUtils() {
    }

    private static class GlideLoadUtilsHolder {
        private final static GlideLoadUtils INSTANCE = new GlideLoadUtils();
    }

    public static GlideLoadUtils getInstance() {
        return GlideLoadUtilsHolder.INSTANCE;
    }

    public static boolean isValidContextForGlide(final Context context) {
        if (context == null) {
            return false;
        }
        if (context instanceof Activity) {
            final Activity activity = (Activity) context;
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
                if (activity.isDestroyed()) {
                    return false;
                } else return !activity.isFinishing();
            } else {
                return !activity.isFinishing();
            }
        }
        return true;
    }

    /** * Glide 加载 简单判空封装 防止异步加载数据时调用Glide 抛出异常 * * @param context * @param url 加载图片的url地址 String * @param imageView 加载图片的ImageView 控件 */
    public void glideLoad(Context context, String url, ImageView imageView) {
        if (isValidContextForGlide(context)) {
            try {
                Glide.with(context).load(url.replace("\\", "/"))
                        //.crossFade()
                        .into(imageView);
            } catch (Exception e) {
                e.printStackTrace();
            }
        } else {
            Log.i(TAG, "Picture loading failed,context is null");
        }
    }

    /** * Glide 加载 简单判空封装 防止异步加载数据时调用Glide 抛出异常 * * @param context * @param url 加载图片的url地址 String * @param imageView 加载图片的ImageView 控件 * @param roundRadius 圆角半径 */
    public void glideLoad(Context context, String url, int roundRadius, ImageView imageView) {
        if (isValidContextForGlide(context)) {
            try {
                Glide.with(context).load(url.replace("\\", "/"))
                        .apply(new RequestOptions().transform(new CenterCrop(),new RoundedCorners(roundRadius)))//圆角半径
                        //.crossFade()
                        .into(imageView);
            } catch (Exception e) {
                e.printStackTrace();
            }
        } else {
            Log.i(TAG, "Picture loading failed,context is null");
        }
    }

    /** * Glide 加载 简单判空封装 防止异步加载数据时调用Glide 抛出异常 * * @param context * @param url 加载图片的url地址 String * @param imageView 加载图片的ImageView 控件 * @param isCir 加载为圆形 */
    public void glideLoad(Context context, String url, ImageView imageView, boolean isCir) {
        if (!isCir) {
            glideLoad(context, url, imageView);
        } else {
            if (context != null) {
                try {
                    Glide.with(context).load(url.replace("\\", "/"))
                            //.crossFade()
                            .apply(RequestOptions.bitmapTransform(new CircleCrop()))
                            .into(imageView);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            } else {
                Log.i(TAG, "Picture loading failed,context is null");
            }
        }
    }

    /** * Glide 加载 简单判空封装 防止异步加载数据时调用Glide 抛出异常 * * @param context * @param url 加载图片的url地址 String * @param imageView 加载图片的ImageView 控件 * @param default_image 图片展现错误的本地图片 id */
    public void glideLoad(Context context, String url, ImageView imageView, int default_image) {
        if (context != null) {
            try {
                Glide.with(context).load(url.replace("\\", "/"))
                        .error(default_image)
                        //.crossFade()
                        .into(imageView);
            } catch (Exception e) {
                e.printStackTrace();
            }
        } else {
            Log.i(TAG, "Picture loading failed,context is null");
        }
    }

    public void glideLoad(Activity activity, String url, ImageView imageView, int default_image) {
        if (isValidContextForGlide(activity)) {
            try {
                Glide.with(activity).load(url.replace("\\", "/"))
                        .error(default_image)
                        //.crossFade()
                        .into(imageView);
            } catch (Exception e) {
                e.printStackTrace();
            }
        } else {
            Log.i(TAG, "Picture loading failed,activity is Destroyed");
        }
    }

    public void glideLoad(Fragment fragment, String url, ImageView imageView, int default_image) {
        if (fragment != null && fragment.getActivity() != null) {
            try {
                Glide.with(fragment).load(url.replace("\\", "/"))
                        .error(default_image)
                        //.crossFade()
                        .into(imageView);
            } catch (Exception e) {
                e.printStackTrace();
            }
        } else {
            Log.i(TAG, "Picture loading failed,fragment is null");
        }
    }

    public void glideLoad(android.app.Fragment fragment, String url, ImageView imageView, int default_image) {
        if (fragment != null && fragment.getActivity() != null) {
            try {
                Glide.with(fragment).load(url.replace("\\", "/"))
                        .error(default_image)
                        //.crossFade()
                        .into(imageView);
            } catch (Exception e) {
                e.printStackTrace();
            }
        } else {
            Log.i(TAG, "Picture loading failed,android.app.Fragment is null");
        }
    }

    /** * Glide 加载 简单判空封装 防止异步加载数据时调用Glide 抛出异常 * * @param context * @param url 加载图片的url地址 String * @param imageView 加载图片的ImageView 控件 */
    public void glideGifLoad(Context context, String url, ImageView imageView) {
        if (isValidContextForGlide(context)) {
            Glide.with(context).load(url.replace("\\", "/"))
// .asGif()
// .error(default_image)
                    //.crossFade()
                    .into(imageView);
        } else {
            Log.i(TAG, "Picture loading failed,context is null");
        }
    }

    public void glideGifLoad(Activity activity, String url, ImageView imageView) {
        if (isValidContextForGlide(activity)) {
            Glide.with(activity).load(url.replace("\\", "/"))
// .asGif()
// .error(default_image)
                    //.crossFade()
                    .into(imageView);
        } else {
            Log.i(TAG, "Picture loading failed,activity is Destroyed");
        }
    }

    public void glideGifLoad(Fragment fragment, String url, ImageView imageView) {
        if (fragment != null && fragment.getActivity() != null && isValidContextForGlide(fragment.getActivity())) {
            Glide.with(fragment).load(url.replace("\\", "/"))
// .asGif()
// .error(default_image)
                    //.crossFade()
                    .into(imageView);
        } else {
            Log.i(TAG, "Picture loading failed,fragment is null");
        }
    }

    public void glideGifLoad(android.app.Fragment fragment, String url, ImageView imageView) {
        if (fragment != null && fragment.getActivity() != null && isValidContextForGlide(fragment.getActivity())) {
            Glide.with(fragment).load(url.replace("\\", "/"))
// .asGif()
// .error(default_image)
                    //.crossFade()
                    .into(imageView);
        } else {
            Log.i(TAG, "Picture loading failed,android.app.Fragment is null");
        }
    }
}
复制代码

圆角加载网络图片
这里是用kotlin写的，因此没有get，java的话把resources换成getResources()就行了
最后一个参数是imageView，kotlin直接传ID，Java传ImageView对象缓存

GlideLoadUtils.getInstance().glideLoad(mContext, imgUrl, mContext.resources.getDimensionPixelOffset(R.dimen.dp_8), img)
复制代码

ViewPager显示相邻项

先把ViewPager放进布局里，注意android:clipToPadding="false"这句千万不能少
而后左右要给margin才能显示出相邻项安全

<androidx.viewpager.widget.ViewPager android:id="@+id/bannerViewPager" android:layout_width="match_parent" android:layout_height="180dp" android:layout_gravity="center_horizontal|top" android:layout_marginStart="16dp" android:layout_marginEnd="16dp" android:clipToPadding="false" android:overScrollMode="never" />
复制代码

而后要给ViewPager的父布局，以及父布局的父布局，还有父布局的父布局的父布局的父布局······一直到根布局
通通加上android:clipChildren="false"网络

如今效果应该是这样的app

再来一个缩放动画

ScalePageTransformer异步

import android.view.View;
import androidx.viewpager.widget.ViewPager;

/** * 设置中间放大两边缩小 */
public class ScalePageTransformer implements ViewPager.PageTransformer {

    public static final float MAX_SCALE = 1.0f;
    public static final float MIN_SCALE = 0.8f;
    private boolean isFill;

    public ScalePageTransformer(boolean isFill) {
        this.isFill = isFill;
    }

    @Override
    public void transformPage(View page, float position) {
        if (position < -1) {
            position = -1;
        } else if (position > 1) {
            position = 1;
        }
        float tempScale = position < 0 ? 1 + position : 1 - position;

        float slope = (MAX_SCALE - MIN_SCALE) / 1;

        float scaleValue = MIN_SCALE + tempScale * slope;
        if (isFill) {
            page.setScaleX(scaleValue);
        }
        page.setScaleY(scaleValue);
    }
}
复制代码

使用

bannerViewPager.setPageTransformer(true, ScalePageTransformer(true))
复制代码

为了看见左右两边的item，设置缓存

bannerViewPager.offscreenPageLimit = 3
复制代码

再给左右两边item之间加个边距

bannerViewPager.pageMargin = 0 - mContext.resources.getDimensionPixelOffset(R.dimen.dp_26)
复制代码

而后就能实现酱紫的效果了

最后咱们还须要让它自动滚动，还要支持无限循环，即一开始左边就有一个项，能够往左切换

实现自动滚动和无限滚动

我去度娘谷歌简书掘金爆栈CSDN GitHub找了很久很久，连什么垃圾代码笔记都找过了
有各类各样的实现方案，什么Integer.MAX_VALUE大法啊
什么handler给viewPager发消息大法啊
现成的封装好的能够无限自动滚动的ViewPager大把大把
可是吧，他们全都不支持Fragment的适配器，绝大多数是继承自FrameLayout，还有继承自ViewGroup的，根本不适用于这个场景。
最后我 ~~愣是没找到~~ 终于找到了一个能够直接用的控件
AutoScrollViewPager

替换控件

<com.github.demono.AutoScrollViewPager android:id="@+id/bannerViewPager" android:layout_width="match_parent" android:layout_height="180dp" android:layout_gravity="center_horizontal|top" android:layout_marginStart="16dp" android:layout_marginEnd="16dp" android:clipToPadding="false" android:overScrollMode="never" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:slideDirection="right" app:slideDuration="5000" app:slideInterval="5000" app:stopWhenTouch="true" />
复制代码

写一个Adapter

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.github.demono.adapter.InfinitePagerAdapter;
import com.rice.activity.WebViewActivity;
import com.rice.bohai.Constant;
import com.rice.bohai.R;
import com.rice.bohai.model.BannerModel;
import com.rice.imageloader.GlideLoadUtils;
import com.rice.tool.ActivityUtils;
import com.rice.tool.TextUtils;

import java.util.ArrayList;
import java.util.List;

public class BannerAdapter extends InfinitePagerAdapter {

    private List<BannerModel> data = new ArrayList();
    private Context mContext;

    public BannerAdapter(Context mContext, List<BannerModel> data) {
        this.mContext = mContext;
        this.data.clear();
        this.data.addAll(data);
    }

    @Override
    public int getItemCount() {
        return data == null ? 0 : data.size();
    }

    @Override
    public View getItemView(int position, View convertView, ViewGroup container) {
        final ViewHolder holder;
        if (convertView == null) {
            convertView = LayoutInflater.from(container.getContext()).inflate(R.layout.item_banner, container, false);
            holder = new ViewHolder(convertView);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        GlideLoadUtils.getInstance().glideLoad(mContext, TextUtils.getImgUrl(Constant.BASE_URL, data.get(position).getImage()),
                mContext.getResources().getDimensionPixelOffset(R.dimen.dp_8), holder.img);
        holder.img.setOnClickListener(
                //点击事件
        return convertView;
    }

    private class ViewHolder {
        private ImageView img;

        public ViewHolder(View v) {
            img = v.findViewById(R.id.img);
        }
    }

}
复制代码

调用Adapter再启用自动滚动

bannerViewPager.adapter = BannerAdapter(mContext, model.lists)
bannerViewPager.startAutoScroll()
复制代码

完美～(￣▽￣～)~