【Android】實現支持Fragment的自動無限滾動ViewPager
有一天，UI小姐姐給了我一張醬紫的Banner設計圖php
然鵝此次的需求沒有那麼簡單了，普通的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()
複製代碼
完美～(￣▽￣～)~
相關文章
- 1. 【Android】ViewPager實現無限循環滾動
- 2. Android ViewPager真正的實現無限循環滾動
- 3. Android中ViewPager支持一屏多個View、切換動畫以及無限滾動
- 4. UGUI 實現無限滾動
- 5. 無限循環,自動滾動,兼容PageIndicator的ViewPager
- 6. TabLayout,ViewPager,Fragment實現聯動
- 7. iOS-利用UIScrollView實現展現圖片的無限滾動及自動滾動
- 8. ViewPager+Fragment實現滑動顯示，且Fragment裏面又放Fragment+viewPager
- 9. Android 一個無限循環滾動的卡片式ViewPager
- 10. Android無限循環自動滾動信息展現
- 更多相關文章...
- • ionic 滾動條 - ionic 教程
- • Spring自動裝配Bean - Spring教程
- • ☆基於Java Instrument的Agent實現
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 【Android】ViewPager實現無限循環滾動
- 2. Android ViewPager真正的實現無限循環滾動
- 3. Android中ViewPager支持一屏多個View、切換動畫以及無限滾動
- 4. UGUI 實現無限滾動
- 5. 無限循環,自動滾動,兼容PageIndicator的ViewPager
- 6. TabLayout,ViewPager,Fragment實現聯動
- 7. iOS-利用UIScrollView實現展現圖片的無限滾動及自動滾動
- 8. ViewPager+Fragment實現滑動顯示，且Fragment裏面又放Fragment+viewPager
- 9. Android 一個無限循環滾動的卡片式ViewPager
- 10. Android無限循環自動滾動信息展現