【Android】实现支持Fragment的自动无限滚动View
2019-11-06 本文已影响0人
天枢破军
有一天，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
