Android 首页实现放大缩小的画廊效果

最近项目中有一个横向的画廊效果,先贴图:

这个效果要分两步实现:

1.滑动结束后停留的某张图片居中。

2.滑动缩放

对于类似的画廊效果我爷淘到了些,而且介绍的也较为详细:我们参考下这两个同类的

http://www.cnblogs.com/fuyaozhishang/p/6794627.html

http://www.jianshu.com/p/85bf072bfeed

这是其他的效果:

http://www.cnblogs.com/wjtaigwh/p/5982068.html

http://www.cnblogs.com/libertycode/p/5790040.html

http://blog.csdn.net/giousa/article/details/51260443

我们看下怎么分两步走实现这个效果:

1.滑动结束后停留的某张图片居中。
Support RecyclerView 24.2.0中增加一个非常重要的类SnapHelper,他的作用是让RecyclerView滑动视图后使停止位置正好停在某页的正中间。使用方式很简单
重点在于new LinearSnapHelper().attachToRecyclerView(recyclerView);

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false); 
recyclerView.setLayoutManager(linearLayoutManager);

new LinearSnapHelper().attachToRecyclerView(recyclerView);

LinearSnapHelper源码解析:http://www.jianshu.com/p/d8f0842f5f06

2.滑动过程中缩放

RecyclerView的滑动缩放必须要监听RecyclerView的滑动

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表示下滑
        mCurrentItemOffset += dx;
        computeCurrentItemPos();
        onScrolledChangedCallback();
    }
});

mCurrentItemOffset为滑动总距离,Card每页滑动的距离是固定的,根据这个可以计算出当前显示的位置。缩放看onScrolledChangedCallback这个函数,有了滑动位置就能实时计算滑动某页的百分比
float percent = (float) Math.max(Math.abs(offset) * 1.0 / mOnePageWidth, 0.0001);

得到百分比, 再获取当前位置相邻的视图调用setScaleY函数实现缩放

    /**
     * RecyclerView位移事件监听, view大小随位移事件变化
     */
    private void onScrolledChangedCallback() {
        int offset = mCurrentItemOffset - mCurrentItemPos * mOnePageWidth;
        float percent = (float) Math.max(Math.abs(offset) * 1.0 / mOnePageWidth, 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) {
            // y = (1 - mScale)x + mScale
            leftView.setScaleY((1 - mScale) * percent + mScale);
        }
        if (currentView != null) {
            // y = (mScale - 1)x + 1
            currentView.setScaleY((mScale - 1) * percent + 1);
        }
        if (rightView != null) {
            // y = (1 - mScale)x + mScale
            rightView.setScaleY((1 - mScale) * percent + mScale);
        }
    }//这样缩放也搞定了.


这里贴出一个xml文件,主要控制图片的间隔,圆角,阴影,具边框距离

<?xml version="1.0" encoding="utf-8"?>
<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:cardCornerRadius="8dp"
    app:cardElevation="6dp"
    app:cardMaxElevation="6dp"
    app:cardUseCompatPadding="true">

    <!--   app:cardElevation="6dp" 阴影-->
    <!-- app:cardCornerRadius="8dp"圆角-->
    <!--  app:cardMaxElevation="12dp" 据边框距离 猜的-->


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/pic4" />

</android.support.v7.widget.CardView>

具体情况我们参考下源码:http://download.csdn.net/download/lijinweii/9944399


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值