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

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

image

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

最终效果

image

整理需求

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

设计解决方案

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

item蓝色阴影

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

<?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怎么想的→_→）

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"

现在效果应该是这样的
(动图如果加载不出来可以搜索文章标题去juejin看)

image

再来一个缩放动画

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)

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


image

最后我们还需要让它自动滚动，还要支持无限循环，即一开始左边就有一个项，可以往左切换

实现自动滚动和无限滚动

我去度娘谷歌简书掘金爆栈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()

完美～(￣▽￣～)~


image
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,590评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 86,808评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,151评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,779评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,773评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,656评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,022评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,678评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,038评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,411评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,005评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2赞 343