【Android】實(shí)現(xiàn)支持Fragment的自動(dòng)無限滾動(dòng)ViewPager

有一天，UI小姐姐給了我一張醬紫的Banner設(shè)計(jì)圖

image

之前做Banner都是普通樣式的，就是直接鋪滿的一張圖片，所以偷懶直接用了youth的banner控件
然鵝這次的需求沒有那么簡單了，普通的banner肯定是無法滿足的。
先看一眼最終效果

最終效果

image

整理需求

先來捋一捋這個(gè)Banner要做成什么亞子
1.首先從圖上可以看出每一頁的底部有一個(gè)藍(lán)色的陰影，這個(gè)顏色很明顯和圖片的顏色是不一致的，所以推測是一個(gè)圖層（后來看PSD果然是個(gè)圖層）
2.圖片帶有圓角
3.Banner的選中項(xiàng)沒有撐滿整個(gè)屏幕，邊緣會(huì)露出相鄰的item
4.相鄰項(xiàng)的體積比選中項(xiàng)要小

設(shè)計(jì)解決方案

根據(jù)需求一條一條來
1.藍(lán)色陰影→直接疊一層ImageView在底下然后給一個(gè)MarginTop就完了
2.圓角→這個(gè)簡單，Glide更新到4以上，直接傳參即可
3.Banner選中項(xiàng)不撐滿，露出邊緣項(xiàng)→這個(gè)給布局文件設(shè)置android:clipChildren="false"然后給ViewPager設(shè)置android:clipToPadding="false"再給ViewPager一個(gè)左右的Margin即可
4.相鄰項(xiàng)比選中項(xiàng)小→這里我考慮做成一個(gè)縮放動(dòng)畫效果，給ViewPager設(shè)置setPageTransformer

item藍(lán)色陰影

直接上代碼，其中的shadow_banner是從設(shè)計(jì)圖上切下來的陰影圖層

<?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實(shí)現(xiàn)圓角

這里使用了一個(gè)封裝好了的Glide工具類，因?yàn)橹苯邮褂肎lide有時(shí)會(huì)在界面finish的時(shí)候拋出一個(gè)異常直接把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 加載 簡單判空封裝 防止異步加載數(shù)據(jù)時(shí)調(diào)用Glide 拋出異常
 * Created by Li_Xavier on 2017/6/20 0020.
 */
public class GlideLoadUtils {
    private String TAG = "ImageLoader";

    /**
     * 借助內(nèi)部類 實(shí)現(xiàn)線程安全的單例模式
     * 屬于懶漢式單例，因?yàn)镴ava機(jī)制規(guī)定，內(nèi)部類SingletonHolder只有在getInstance()
     * 方法第一次調(diào)用的時(shí)候才會(huì)被加載（實(shí)現(xiàn)了lazy），而且其加載過程是線程安全的。
     * 內(nèi)部類加載的時(shí)候?qū)嵗淮蝘nstance。
     */
    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 加載 簡單判空封裝 防止異步加載數(shù)據(jù)時(shí)調(diào)用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 加載 簡單判空封裝 防止異步加載數(shù)據(jù)時(shí)調(diào)用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 加載 簡單判空封裝 防止異步加載數(shù)據(jù)時(shí)調(diào)用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 加載 簡單判空封裝 防止異步加載數(shù)據(jù)時(shí)調(diào)用Glide 拋出異常
     *
     * @param context
     * @param url           加載圖片的url地址  String
     * @param imageView     加載圖片的ImageView 控件
     * @param default_image 圖片展示錯(cuò)誤的本地圖片 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 加載 簡單判空封裝 防止異步加載數(shù)據(jù)時(shí)調(diào)用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");
        }
    }
}

圓角加載網(wǎng)絡(luò)圖片
這里是用kotlin寫的，所以沒有g(shù)et，java的話把resources換成getResources()就好了
最后一個(gè)參數(shù)是imageView，kotlin直接傳ID，Java傳ImageView對(duì)象

GlideLoadUtils.getInstance().glideLoad(mContext, imgUrl, mContext.resources.getDimensionPixelOffset(R.dimen.dp_8), img)

ViewPager顯示相鄰項(xiàng)

先把ViewPager放進(jìn)布局里，注意android:clipToPadding="false"這句千萬不能少
然后左右要給margin才能顯示出相鄰項(xiàng)

 <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的父布局，以及父布局的父布局，還有父布局的父布局的父布局的父布局······一直到根布局
統(tǒng)統(tǒng)加上android:clipChildren="false"

現(xiàn)在效果應(yīng)該是這樣的
(動(dòng)圖如果加載不出來可以搜索文章標(biāo)題去juejin看)

image

再來一個(gè)縮放動(dòng)畫

ScalePageTransformer

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

/**
 * 設(shè)置中間放大兩邊縮小
 */
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，設(shè)置緩存

bannerViewPager.offscreenPageLimit = 3

再給左右兩邊item之間加個(gè)邊距

bannerViewPager.pageMargin = 0 - mContext.resources.getDimensionPixelOffset(R.dimen.dp_26)

然后就能實(shí)現(xiàn)醬紫的效果了


image

最后我們還需要讓它自動(dòng)滾動(dòng)，還要支持無限循環(huán)，即一開始左邊就有一個(gè)項(xiàng)，可以往左切換

實(shí)現(xiàn)自動(dòng)滾動(dòng)和無限滾動(dòng)

我去度娘谷歌簡書掘金爆棧CSDN GitHub找了好久好久，連什么垃圾代碼筆記都找過了
有各種各樣的實(shí)現(xiàn)方案，什么Integer.MAX_VALUE大法啊
什么handler給viewPager發(fā)消息大法啊
現(xiàn)成的封裝好的可以無限自動(dòng)滾動(dòng)的ViewPager大把大把
但是吧，他們?nèi)疾恢С諪ragment的適配器，絕大多數(shù)是繼承自FrameLayout，還有繼承自ViewGroup的，根本不適用于這個(gè)場景。
最后我 愣是沒找到 終于找到了一個(gè)可以直接用的控件
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" />

寫一個(gè)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(
                //點(diǎn)擊事件
        return convertView;
    }

    private class ViewHolder {
        private ImageView img;

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

}

調(diào)用Adapter再啟用自動(dòng)滾動(dòng)

bannerViewPager.adapter = BannerAdapter(mContext, model.lists)
bannerViewPager.startAutoScroll()

完美～(￣▽￣～)~


image
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容