超自然的点击图片放大

1,点击图片放大low的实现

利用布局重叠.点击小图片时,设置展示大图片的布局显示出来.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:visibility="visible">
        <!--小图片的布局-->
        <GridView
            android:id="@+id/gv_small_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>
    <!--展示大图片的布局 gridview中item点击时设置该framelayout布局可见,将图片资源设置到PhotoView中-->
    <FrameLayout 
    android:layout_width="match_parent"
    android:visibility="gone"
    android:layout_height="match_parent"
    android:background="#80000000">
        <RelativeLayout
            android:layout_marginLeft="@dimen/pic_margin"
            android:layout_marginRight="@dimen/pic_margin"
            android:layout_gravity="center"
            android:layout_width="match_parent"
            android:layout_height="@dimen/pic_layout_hight">
            <uk.co.senab.photoview.PhotoView
                android:id="@+id/details_bitmap_image_view"
                android:layout_width="match_parent"
                android:layout_height="@dimen/pic_hight"
                android:scaleType="fitXY"
                android:layout_centerHorizontal="true" />
            <RelativeLayout
                android:layout_gravity="center"
                android:orientation="horizontal"
                android:background="@color/blue1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/details_bitmap_image_view"
                android:layout_alignLeft="@+id/details_bitmap_image_view"
                android:layout_alignStart="@+id/details_bitmap_image_view">
                <Button
                    android:background="@color/blue1"
                    android:visibility="gone"
                    android:id="@+id/details_bitmap_change_button"
                    android:layout_width="wrap_content"
                    android:text="修改"
                    android:textColor="@drawable/return_text"
                    android:layout_height="wrap_content" />
                <Button
                    android:visibility="gone"
                    android:textColor="@drawable/return_text"
                    android:background="@color/blue1"
                    android:id="@+id/details_bitmap_delete_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="删除"
                    android:layout_alignParentTop="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true" />
            </RelativeLayout>
        </RelativeLayout>
    </FrameLayout>
</RelativeLayout>

这种做法实现虽然简便,但是从效果上看大图展示时显得十分突兀,所以才说这样的做法low.
参考了stackoverflow一个问题的做法:
问题链接

有时候stackoverflow的答案就是完美的,虽然能解决问题,但却不一定是最佳的解决方案.

2,点击图片放大使用android原生代码即可实现.

我们习惯于造轮子,却有时候忽略了android官方已经帮我们造好了好多很好用的轮子.
例子:我们可以看看另一位博主通过自己造轮子实现点击图片放大的效果

20140510230150187.gif
技术博客链接
分析
有兴趣不妨看看这篇博客,还是有干货的,但如果真正在项目开发中,我心中浮现出两个字:费劲
明明android官方已经有这样的轮子了,还自己搞各位看官会觉得费劲吗?
android如何实现
一,先看效果 androidzoomin.gif
二,源码实现

private OnMeizhiTouchListener getOnMeizhiTouchListener() {
        return (v, meizhiView, card, meizhi) -> {
            if (meizhi == null) return;
            if (v == meizhiView && !mMeizhiBeTouched) {
                //点击妹子小图片时的事件处理
                Picasso.with(this).load(meizhi.url).fetch(new Callback() {

                    @Override public void onSuccess() {
                        mMeizhiBeTouched = false;
                        //实现点击放大图片的关键方法
                        startPictureActivity(meizhi, meizhiView);
                    }


                    @Override public void onError() {mMeizhiBeTouched = false;}
                });
            } else if (v == card) {
                startGankActivity(meizhi.publishedAt);
            }
        };
    }

关键方法

private void startPictureActivity(Meizhi meizhi, View transitView) {
        Intent intent = PictureActivity.newIntent(MainActivity.this, meizhi.url, meizhi.desc);
        //android V4包的类,用于两个activity转场时的缩放效果实现
        ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(
                MainActivity.this, transitView, PictureActivity.TRANSIT_PIC);
        try {
            ActivityCompat.startActivity(MainActivity.this, intent, optionsCompat.toBundle());
        } catch (IllegalArgumentException e) {
            e.printStackTrace();
            startActivity(intent);
        }
    }

分析
只是用了android V4包的两个类即可实现,而且效果还特别赞,大家注意到没有,点击时有放大效果,而且还是从图片位置开始放大的,不仅如此,在退出放大图片activity时还有缩放到原来小图片位置的效果,这就是我觉得很赞的超自然效果.
最后,能学习到这些,还得感谢
《妹子》开源app:
meizhi-github地址