在这篇RecyclerView<第十二篇>：SnapHelper使用文章中，已经为指出两种自带的SnapHelper了，分别是LinearSnapHelper、PagerSnapHelper，本章会基于LinearSnapHelper或PagerSnapHelper上进行扩展，来优化画廊效果或者类似ViewPager效果。
就拿PagerSnapHelper为例，我们需要做到的最终效果如下：
115.gif
看图分析：
- 假设，当前卡片为B，左边的卡片为A，右边的卡片为C
- 默认情况下，当前卡片大小没有缩放，而两边卡片会缩小
- 当图片切换时，图片的大小有逐渐缩放的效果
- B卡片缩放规律是逐渐递减，用方程来表示
y = (scale-1) * x + 1
y为最终缩放比，递减，取值范围是[scale,1]。
x为变化率，取值范围是[0,1/2]。
scale为缩放因子，取值范围是[0,1]。
- A、C卡片的缩放规律是逐渐递增，用方程来表示
y = (1-scale) * x + scale
y为最终缩放比，递增，取值范围是[scale,1]。
x为变化率，取值范围是[0,1/2]。
scale为缩放因子，取值范围是[0,1]。
大致分以下几个步骤：
【第一步】 使用PagerSnapHelper
PagerSnapHelper pagerSnapHelper = new PagerSnapHelper();
pagerSnapHelper.attachToRecyclerView(mRecyclerView);
这样，图片的切换就会和ViewPager差不多了，如图：
112.gif
【第二步】 为了增强用户友好，引入CardView控件，将图片添加圆形角和阴影效果
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardBackgroundColor="@color/colorPrimary"
app:cardElevation="18dp"
app:cardMaxElevation="18dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true"
app:cardCornerRadius="20dp">
<ImageView
android:id="@+id/iv_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/che4"/>
</android.support.v7.widget.CardView>
效果如下：
113.gif
【第三步】 设置Item之间的marin和padding
这里自定义一个辅助类CardAdapterHelper就可以搞定
/**
* 常量定义
*/
public class CardScaleConstant {
public static int PAGER_PADDING = 25;
public static int PAGER_MARGIN = 25;
}
public class CardAdapterHelper {
public void onCreateViewHolder(ViewGroup parent, View itemView) {
RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) itemView.getLayoutParams();
lp.width = parent.getWidth() - ScreenUtil.dip2px(itemView.getContext(), 2 * (CardScaleConstant.PAGER_PADDING + CardScaleConstant.PAGER_MARGIN));
itemView.setLayoutParams(lp);
}
public void onBindViewHolder(View itemView, final int position, int itemCount) {
int padding = ScreenUtil.dip2px(itemView.getContext(), CardScaleConstant.PAGER_PADDING);
itemView.setPadding(padding, 0, padding, 0);
int leftMarin = position == 0 ? padding + ScreenUtil.dip2px(itemView.getContext(), CardScaleConstant.PAGER_MARGIN) : 0;
int rightMarin = position == itemCount - 1 ? padding + ScreenUtil.dip2px(itemView.getContext(), CardScaleConstant.PAGER_MARGIN) : 0;
setViewMargin(itemView, leftMarin, 0, rightMarin, 0);
}
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);
}
}
public void setPagePadding(int pagePadding) {
CardScaleConstant.PAGER_PADDING = pagePadding;
}
public void setPageMarin(int pagerMargin) {
CardScaleConstant.PAGER_MARGIN = pagerMargin;
}
}
使用方法也比较简单，使用方法如下：
图片.png
我们将margin和padding都添加25dp之后的效果如下：
114.gif
【第四步】 将左右两边的Item缩小
调用setScaleY方法，将Item缩小，其缩小算法上面已经指出
leftView.setScaleY((1 - mScale) * percent + mScale);
currentView.setScaleY((mScale - 1) * percent + 1);
rightView.setScaleY((1 - mScale) * percent + mScale);
求出卡片宽度，即RecyclerView宽度减去padding和margin
mCardWidth = mRecyclerView.getWidth() - ScreenUtil.dip2px(mContext, 2 * (CardScaleConstant.PAGER_PADDING + CardScaleConstant.PAGER_MARGIN));
求出卡片当前位置
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
// dx>0则表示右滑, dx<0表示左滑, dy<0表示上滑, dy>0表示下滑
if(dx != 0){
mCurrentItemOffset += dx;
//计算当前位置
mCurrentItemPos = Math.round(mCurrentItemOffset * 1.0f / mCardWidth);
}
}
});
CardScaleHelper全部代码如下：
public class CardScaleHelper {
private RecyclerView mRecyclerView;
private Context mContext;
private float mScale = 0.5f; // 两边卡片的缩放量
private int mCardWidth; // 卡片宽度
private int mCurrentItemPos;//卡片当前位置
private int mCurrentItemOffset;//当前偏移量
private PagerSnapHelper pagerSnapHelper = new PagerSnapHelper();
public void attachToRecyclerView(final RecyclerView mRecyclerView) {
this.mRecyclerView = mRecyclerView;
mContext = mRecyclerView.getContext();
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
// dx>0则表示右滑, dx<0表示左滑, dy<0表示上滑, dy>0表示下滑
if(dx != 0){
mCurrentItemOffset += dx;
//计算当前位置
mCurrentItemPos = Math.round(mCurrentItemOffset * 1.0f / mCardWidth);
changedCardSize();
}
}
});
mRecyclerView.post(new Runnable() {
@Override
public void run() {
//求出卡片宽度
mCardWidth = mRecyclerView.getWidth() - ScreenUtil.dip2px(mContext, 2 * (CardScaleConstant.PAGER_PADDING + CardScaleConstant.PAGER_MARGIN));
mRecyclerView.smoothScrollToPosition(mCurrentItemPos);
changedCardSize();
}
});
pagerSnapHelper.attachToRecyclerView(mRecyclerView);
}
public void setCurrentItemPos(int currentItemPos) {
this.mCurrentItemPos = currentItemPos;
}
public int getCurrentItemPos() {
return mCurrentItemPos;
}
/**
* 改变卡片大小
*/
private void changedCardSize() {
//求出当前Item滑动偏移量，它的绝对值的取值变化时从小到大再变小
//变化范围是[0,mCardWidth/2],[-mCardWidth/2,0]
int offset = mCurrentItemOffset - mCurrentItemPos * mCardWidth;
//求出缩放百分比，最小值为0.0001，最大值为1/2，百分比的变化是从小变大，再变小
float percent = (float) Math.max(Math.abs(offset) * 1.0 / mCardWidth, 0.0001);
View leftView = null;
View currentView;
View rightView = null;
if (mCurrentItemPos > 0) {
leftView = mRecyclerView.getLayoutManager().findViewByPosition(mCurrentItemPos - 1);
}
currentView = mRecyclerView.getLayoutManager().findViewByPosition(mCurrentItemPos);
if (mCurrentItemPos < mRecyclerView.getAdapter().getItemCount() - 1) {
rightView = mRecyclerView.getLayoutManager().findViewByPosition(mCurrentItemPos + 1);
}
if (leftView != null) {
leftView.setScaleY((1 - mScale) * percent + mScale);
}
if (currentView != null) {
currentView.setScaleY((mScale - 1) * percent + 1);
}
if (rightView != null) {
}
}
public void setScale(float scale) {
mScale = scale;
}
public void setPagePadding(int pagePadding) {
CardScaleConstant.PAGER_PADDING = pagePadding;
}
public void setPageMarin(int pagerMargin) {
CardScaleConstant.PAGER_MARGIN = pagerMargin;
}
}
使用方法如下：
CardScaleHelper cardScaleHelper = new CardScaleHelper();
cardScaleHelper.setCurrentItemPos(2);
cardScaleHelper.attachToRecyclerView(mRecyclerView);
[本章完...]
网友评论