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

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地址