前言
由於業務需求，需要做一個卡片分享功能，前期做了一些預研，實現類似效果可以採用如下兩種方式：
- 採用ViewPager實現
- 採用RecyclerView實現
由於RecyclerView自帶複用設計，方便後期擴充，所以就採用RecyclerView這個方案，主要實現的細節效果和功能如下：
- 分頁，自動居中
- 卡片樣式及效果，陰影等
- 背景色漸變
- 切換卡片，卡片的縮放效果
- 指示器
- 卡片分享
效果圖：
RecyclerView這個方向的資料還是比較好查詢，不過細節和想實現的效果還是有些許出入。針對這些問題，逐步探索，經過多次改良後，得到了較為滿意的結果。
本文滑動是橫向滑動，如果讀者想要縱向的，可以使用RecyclerView的LinearLayoutManager設定方向，其他程式碼大體相同。
下面我就根據效果逐一給讀者提供相關程式碼實現，並針對實現細節、難點，附上開發思路供大家參考。
難點：
- 卡片比例適配
- 滑動時卡片縮放動畫。
- 滑動時距離計算、速度控制、頁碼計算。
- 記憶體控制
技術實現
分頁、自動居中
public class CardPagerSnapHelper extends PagerSnapHelper {
public boolean mNoNeedToScroll = false;
@Override
public int[] calculateDistanceToFinalSnap(@NonNull RecyclerView.LayoutManager layoutManager, @NonNull View targetView) {
if (mNoNeedToScroll) {
return new int[]{0, 0};
} else {
return super.calculateDistanceToFinalSnap(layoutManager, targetView);
}
}
}
//使用.
mPageSnapHelp.attachToRecyclerView(mRecyclerView);
複製程式碼這裡繼承PagerSnapHelper是因為想要的效果是一頁的滑動。如果想要的是可以滑動多頁，可以使用LinearSnapHelper，設定對應的朝向即可，另外繼承這個也可以設定阻尼大小，還可控制滑動速度。
卡片效果
我這裡主要是根據要求做了如下方面的修改，讀者可以根據需求，增加動畫，列表，點選反饋等。
1）陰影、圓角等
- cardElevation 設定z軸陰影
- cardCornerRadius 設定圓角大小
- cardMaxElevation 設定z軸最大高度值
- cardPreventCornerOverlap 是否新增內邊距(避免內容與邊緣重疊)
- cardUseCompatPadding 設定內邊距，V21+的版本和之前的版本仍舊具有一樣的計算方式
這是我用到的設定，讀者可以根據實際效果對比介面設計做調整：
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:cardBackgroundColor="@color/white"
app:cardElevation="6dp"
app:cardMaxElevation="12dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="false">
複製程式碼2）卡片比例動態調整
卡片
要保持在不同螢幕下卡片比例保持不變，就需要根據螢幕的解析度動態的設定卡片的寬高。
---- CardAdapter.java ----
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_poster, parent, false);
mCardAdapterHelper.onCreateViewHolder(parent, itemView, 0.72f, (float) (17.0 / 25.0));
return new ViewHolder(itemView);
}
---- CardAdapterHelper.java ----
/**
* @param parent
* @param itemView
* @param cardPercentWidth 卡片佔據螢幕寬度的百分比.
* @param aspectRatio 寬高比.
*/
public void onCreateViewHolder(ViewGroup parent, View itemView, float cardPercentWidth, float aspectRatio) {
RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) itemView.getLayoutParams();
lp.width = (int) (DisplayUtil.getScreenWidth(parent.getContext()) * cardPercentWidth);
lp.height = (int) (lp.width / aspectRatio);
itemView.setLayoutParams(lp);
}
複製程式碼二維碼
由於整個卡片都是按比例劃分的，為了展示儘可能大的二維碼區域，二維碼卡片也需要動態設定，按照底部欄的最大高度的80%作為寬高（二維碼是正方形）
//根據實際底部欄大小設定寬高.
private void setQRCodeImageView(final ImageView imageView, final ViewGroup root) {
if (imageView == null || root == null) {
return;
}
imageView.post(new Runnable() {
@Override
public void run() {
int height = root.getMeasuredHeight();
int targetHeight = (int) (height * 0.8);
if (height == 0) {
return;
}
ViewGroup.LayoutParams params = imageView.getLayoutParams();
params.width = targetHeight;
params.height = targetHeight;
imageView.setLayoutParams(params);
}
});
}
複製程式碼背景色漸變
這部分主要方法網上都有，就不重複造輪子了。這裡是連貫步驟，就是根據當前卡片的底圖做一張模糊圖，列舉出來只是方便讀者快速實現。
----QRCodePosterActivity.java----
private void initBlurBackground() {
mBlurView = (ImageView) findViewById(R.id.blurView);
mContentRv.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
if (newState == RecyclerView.SCROLL_STATE_IDLE) {
notifyBackgroundChange();
//指示器
}
}
});
setDefaultBackground();
}
private void notifyBackgroundChange() {
if (mPosterModule == null || mPosterModule.getBannerInfo().size() == 0) {
setDefaultBackground();
return;
}
/**
* 延時設定說明，由於滑動距離會出現正好一頁的距離或偏離.
* 所以滑動停止事件觸發會出現一次或兩次（偏離的時候，偏差.
* 量將自動修正後再次停止),所以延時並取消上一次背景切換可以消除畫面閃爍。.
*/
mBlurView.removeCallbacks(mBlurRunnable);
mBlurRunnable = new Runnable() {
@Override
public void run() {
Bitmap bitmap = mCardScaleHelper.getCurrentBitmap();
ViewSwitchUtils.startSwitchBackgroundAnim(mBlurView, BlurBitmapUtils.getBlurBitmap(mBlurView.getContext(), bitmap, 15));
}
};
mBlurView.postDelayed(mBlurRunnable, 500);
}
private void setDefaultBackground() {
if (mBlurView == null) {
return;
}
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon_card_default);
mBlurView.setImageBitmap(BlurBitmapUtils.getBlurBitmap(mBlurView.getContext(), bitmap, 15));
}
---- CardScaleHelper.java ----
public Bitmap getCurrentBitmap() {
View view = mRecyclerView.getLayoutManager().findViewByPosition(getCurrentItemPos());
if (view == null) {
return null;
}
ImageView mBgIv = (ImageView) view.findViewById(R.id.iv_bg);
final Bitmap bitmap = ((BitmapDrawable) mBgIv.getDrawable()).getBitmap();
return bitmap;
}
---- ViewSwitchUtils.java ----
public static void startSwitchBackgroundAnim(ImageView view, Bitmap bitmap) {
if (view == null || bitmap == null) {
return;
}
Drawable oldDrawable = view.getDrawable();
Drawable oldBitmapDrawable;
TransitionDrawable oldTransitionDrawable = null;
if (oldDrawable instanceof TransitionDrawable) {
oldTransitionDrawable = (TransitionDrawable) oldDrawable;
oldBitmapDrawable = oldTransitionDrawable.findDrawableByLayerId(oldTransitionDrawable.getId(1));
} else if (oldDrawable instanceof BitmapDrawable) {
oldBitmapDrawable = oldDrawable;
} else {
oldBitmapDrawable = new ColorDrawable(0xffc2c2c2);
}
if (oldTransitionDrawable == null) {
oldTransitionDrawable = new TransitionDrawable(new Drawable[]{oldBitmapDrawable, new BitmapDrawable(view.getResources(), bitmap)});
oldTransitionDrawable.setId(0, 0);
oldTransitionDrawable.setId(1, 1);
oldTransitionDrawable.setCrossFadeEnabled(true);
view.setImageDrawable(oldTransitionDrawable);
} else {
oldTransitionDrawable.setDrawableByLayerId(oldTransitionDrawable.getId(0), oldBitmapDrawable);
oldTransitionDrawable.setDrawableByLayerId(oldTransitionDrawable.getId(1), new BitmapDrawable(view.getResources(), bitmap));
}
oldTransitionDrawable.startTransition(1000);
}
---- BlurBitmapUtils.java ----
/**
* 得到模糊後的bitmap
*
* @param context
* @param bitmap
* @param radius
* @return
*/
public static Bitmap getBlurBitmap(Context context, Bitmap bitmap, int radius) {
if (bitmap == null || context == null) {
return null;
}
// 將縮小後的圖片做為預渲染的圖片。
Bitmap inputBitmap = Bitmap.createScaledBitmap(bitmap, SCALED_WIDTH, SCALED_HEIGHT, false);
// 建立一張渲染後的輸出圖片。
Bitmap outputBitmap = Bitmap.createBitmap(inputBitmap);
try {
// 建立RenderScript核心物件
RenderScript rs = RenderScript.create(context);
// 建立一個模糊效果的RenderScript的工具物件
ScriptIntrinsicBlur blurScript = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
// 由於RenderScript並沒有使用VM來分配記憶體,所以需要使用Allocation類來建立和分配記憶體空間。
// 建立Allocation物件的時候其實記憶體是空的,需要使用copyTo()將資料填充進去。
Allocation tmpIn = Allocation.createFromBitmap(rs, inputBitmap);
Allocation tmpOut = Allocation.createFromBitmap(rs, outputBitmap);
// 設定渲染的模糊程度, 25f是最大模糊度
blurScript.setRadius(radius);
// 設定blurScript物件的輸入記憶體
blurScript.setInput(tmpIn);
// 將輸出資料儲存到輸出記憶體中
blurScript.forEach(tmpOut);
// 將資料填充到Allocation中
tmpOut.copyTo(outputBitmap);
} catch (Exception e) {
e.printStackTrace();
}finally {
inputBitmap.recycle();
}
return outputBitmap;
}
複製程式碼切換卡片，卡片的縮放效果
我們要實現如上效果，基本的滑動展示，RecyclerView都有實現，需要解決是滑動過程中卡片的縮放問題、卡片透明度變化、滑動距離的判定、頁碼的計算、多張卡片的記憶體問題等。
為了複用，主要的程式碼都是通過幫助類實現。用法如下
---- QRCodePosterActivity.java ----
// mRecyclerView繫結scale效果.
mCardScaleHelper = new CardScaleHelper();
mCardScaleHelper.setCurrentItemPos(0);//初始化指定頁面.
mCardScaleHelper.setScale(0.8f);//兩側縮放比例.
mCardScaleHelper.setCardPercentWidth(0.72f);//卡片佔螢幕寬度比例.
mCardScaleHelper.attachToRecyclerView(mContentRv);
複製程式碼下面我們來看看具體實現
初始化
我們從繫結開始初始化
---- CardScaleHelper.java ----
private int mCardWidth; // 卡片寬度.
private int mOnePageWidth; // 滑動一頁的距離.
private int mCardGalleryWidth;
private int mCurrentItemPos;
private int mCurrentItemOffset;
private float mScale = 0.9f; // 兩邊檢視scale.
private float mCardPercentWidth = 0.60f;//卡片佔據螢幕寬度的百分比，需要與CardAdapterHelper中的一致.
private CardPagerSnapHelper mPageSnapHelp = new CardPagerSnapHelper();
public void attachToRecyclerView(final RecyclerView mRecyclerView) {
this.mRecyclerView = mRecyclerView;
mContext = mRecyclerView.getContext();
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
if (newState == RecyclerView.SCROLL_STATE_IDLE) {
mPageSnapHelp.mNoNeedToScroll = mCurrentItemOffset == 0 || mCurrentItemOffset == getDestItemOffset(mRecyclerView.getAdapter().getItemCount() - 1);
} else {
mPageSnapHelp.mNoNeedToScroll = false;
}
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
if (dx == 0) {
initWidth();
return;
}
// dx>0則表示右滑, dx<0表示左滑, dy<0表示上滑, dy>0表示下滑
mCurrentItemOffset += dx;
computeCurrentItemPos();
onScrolledChangedCallback();
}
});
mPageSnapHelp.attachToRecyclerView(mRecyclerView);
}
/** 初始化卡片寬度**/
private void initWidth() {
mCardGalleryWidth = mRecyclerView.getWidth();
mCardWidth = (int) (mCardGalleryWidth * mCardPercentWidth);
mOnePageWidth = mCardWidth;
mRecyclerView.smoothScrollToPosition(mCurrentItemPos);
onScrolledChangedCallback();
}
複製程式碼計算當前卡片索引
---- CardScaleHelper.java ----
private void computeCurrentItemPos() {
if (mOnePageWidth <= 0) return;
boolean pageChanged = false;
// 滑動超過一頁說明已翻頁.
if (Math.abs(mCurrentItemOffset - mCurrentItemPos * mOnePageWidth) >= (mOnePageWidth)) {
pageChanged = true;
}
if (pageChanged) {
int tempPos = mCurrentItemPos;
mCurrentItemPos = mCurrentItemOffset / (mOnePageWidth);
}
}
複製程式碼卡片滑動切換計算
下面的這個方法是比較核心，包含了所有卡片的縮放比計算，透明度計算，為了達到平滑過度，這裡用到了三角函式，也包含了一些適配問題的解決。由於水平有限，如下方法可能還是存在優化的空間或細節修正，僅供參考，感興趣的朋友可以自行研究。
---- CardScaleHelper.java ----
/**
* RecyclerView位移事件監聽, view大小隨位移事件變化.
*/
public void onScrolledChangedCallback() {
for (int i = 0; i < mRecyclerView.getAdapter().getItemCount(); i++) {
LinearLayoutManager layoutManager = (LinearLayoutManager) mRecyclerView.getLayoutManager();
final View view = layoutManager.getChildAt(i);
if (view == null) {
continue;
}
//計算當前這個view相對於中間View的偏移頁碼量.
//(view相對的X的起始位置-當前scrollview滾動的位置)/每頁大小.
// = 0 為居中頁.
// = 1 為下一頁 2 為下下頁.
// = -1 為上一頁 -2 為上上頁.
double offsetPage = ((int) view.getTag() * (double) mOnePageWidth - mCurrentItemOffset) / (double) mOnePageWidth;
double scale = (float) Math.cos(offsetPage);
if (Math.abs(scale) < mScale)
scale = mScale;
view.setScaleX((float) scale);
view.setScaleY((float) scale);
BigDecimal bd = new BigDecimal((scale * 0.8)).setScale(1, RoundingMode.UP);
if (scale > 0.99f) {
view.setAlpha(1);
} else {
view.setAlpha((bd.floatValue()));
//解決透明顯示異常的問題，強制重新繪製.
view.invalidate();
}
}
}
複製程式碼Tag值，及滑動時卡片間隙計算。
---- CardAdapter.java ----
@Override
public void onBindViewHolder(final ViewHolder holder, final int position) {
holder.itemView.setTag(position);
mCardAdapterHelper.onBindViewHolder(holder.itemView, position, getItemCount());
setQRCodeImageView(holder.mQRCodeIv, holder.mBottomLl);
//業務程式碼.
}
---- CardScaleHelper.java ----
private int mPagePadding = 15;
public void onBindViewHolder(View itemView, final int position, int itemCount) {
int mOneSideWidth = (int) ((DisplayUtil.getScreenWidth(itemView.getContext()) - itemView.getLayoutParams().width) / 2.0);
int leftMarin = position == 0 ? mOneSideWidth : 0;
int rightMarin = position == itemCount - 1 ? mOneSideWidth : 0;
setViewMargin(itemView, leftMarin, 0, rightMarin, 10);
}
private void setViewMargin(View view, int left, int top, int right, int bottom) {
ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
if (lp.leftMargin != left || lp.topMargin != top || lp.rightMargin != right || lp.bottomMargin != bottom) {
lp.setMargins(left, top, right, bottom);
view.setLayoutParams(lp);
}
}
複製程式碼多張卡片記憶體控制
- 方案一：利用第三方框架去顯示，如glide，pessones等，最簡單，如果對記憶體沒有極細的要求的話推薦使用這個方案。
- 方案二：可以考慮回收不顯示卡片的那部分記憶體，然後利用LruCache進行快取管理。
指示器
由於指示器比較簡單，這裡簡述一種實現思路， 可以直接用LinearLayout動態新增包含指示器圖案的view，每次滑動結束後更新指示器位置。
卡片分享
在銅板街的應用上，卡片最終是要分享出去，所以我們繼續分析下，如何在分享前做好準備，由於分享有需要檔案,也有需要Bitmap的.
@Override
public void onClick(View v) {
if (v.getId() == R.id.iv_back) {
finish();
return;
}
createBitmap(v);
}
public void createBitmap(final View clickView) {
showLoadingCustomDialog();
ThreadPoolManager.getInstance().addTask(new Runnable() {
@Override
public void run() {
View view = linearLayoutManager.findViewByPosition(mCardScaleHelper.getCurrentItemPos());
View mContentRl = view.findViewById(R.id.rl_content);
mContentRl.setDrawingCacheEnabled(true);
mContentRl.buildDrawingCache(); //啟用DrawingCache並建立點陣圖.
final Bitmap bitmap = Bitmap.createBitmap(mContentRl.getDrawingCache()); //建立一個DrawingCache的拷貝，因為DrawingCache得到的點陣圖在禁用後會被回收.
mContentRl.setDrawingCacheEnabled(false); //禁用DrawingCahce否則會影響效能.
mContentRl.destroyDrawingCache();
file = FileUtil.saveImage(Constant.IMAGE_CACHE_PATH, "share" + System.currentTimeMillis(), bitmap);
dismissLoadingCustomDialog();
clickView.post(new Runnable() {
@Override
public void run() {
//分享.
}
});
}
});
}
複製程式碼注意幾個細節，一個是bitmap的回收，第二個是檔案的處理，由於QQ分享的問題，我們並不能分享完成後立馬刪除原檔案，所以我的做法是關閉當前頁面時，會清理（檔案有最後修改時間方法：lastModified）過期的檔案快取。
總結
本文總結了在開發畫廊型卡片分享的一些心得和體會，對於一個複雜的程式來說，演算法往往是最關鍵的，整個功能的開發可以說一半的時間都是在除錯滑動時卡片的縮放效果。而工作中多數應用開發用到的演算法往往比較簡單，所以如果想提升，就必須自己去專研。
作者簡介
蘇哲，銅板街Android開發工程師，2017年12月加入團隊，目前主要負責APP端 Android 日常開發。
