android 仿微信点击图片放大效果实现

1、要实现点击图片放大不难,这里使用的图片显示是用fresco,用一般的ImageView不能显示网络获取的url图片。http://fresco-cn.org/docs/getting-started.html点击打开链接这个是fresco的详细使用介绍。下面介绍详细代码:

fresco库,在build.gradle中添加:

//网络图片
    compile 'com.facebook.fresco:fresco:0.12.0'

布局代码,主要是一个图片显示控件和一个textview控件用于显示具体到哪一张。也可改成ImageView用于显示本地图片

<?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"
    android:gravity="center">

    <com.facebook.drawee.view.SimpleDraweeView
        android:layout_centerVertical="true"
        android:id="@+id/picture_display_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY" />

    <!--<ImageView-->
    <!---->
    <!--android:adjustViewBounds="true"-->
    <!--android:id="@+id/picture_display_image"-->
    <!--android:layout_width="match_parent"-->
    <!--android:layout_height="wrap_content" />-->
    <TextView
        android:layout_marginBottom="30dip"
        android:id="@+id/picture_display_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:gravity="center" />

</RelativeLayout>
2、实现的详细代码:这个主要是通过在需要的界面通过Intent 将图片数组传过来便好。imgUrl为图片数组。然后通过判断手指在屏幕滑动的距离判断如果向右滑大于120像素值就切换到下一张,当左滑动大于120就显示上一张。当点击屏幕默认关闭图片显示。(即关闭本activity)

Intent intent = new Intent(getApplication(),PictureDisplayActivity.class);
                intent.putExtra("position",position);
                intent.putStringArrayListExtra("enlargeImage",imgUrl);
                startActivity(intent);
3、详细的实现代码activity,首先是先将网络url转换存储在LruCache<String,Bitmap> 中,并先显示点击的那一张。

package com.coolgeer.aimeida.ui.circle;

import android.app.Activity;
import android.app.ProgressDialog;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Handler;
import android.os.Looper;
import android.os.Message;
import android.os.Bundle;
import android.util.LruCache;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.coolgeer.aimeida.R;
import com.coolgeer.aimeida.utils.LogUtil;
import com.coolgeer.aimeida.view.circle.ImageService;
import com.facebook.drawee.view.SimpleDraweeView;

import java.io.IOException;
import java.util.List;


public class PictureDisplayActivity extends Activity {
    private SimpleDraweeView imageView;
    private TextView pictureDisplayText;
    int downX = 0;
    int moveX = 0;
    int upX = 0;
    int a = 1; //显示的图片位置
    int imageKey = 1;

    final int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024);
    final int cacheSize = maxMemory / 9;//设置缓冲空间存储大小
    private LruCache<String, Bitmap> mMemoryCache = new LruCache<>(cacheSize);
    Bitmap bitmap = null;

    private final String TAG = "PictureDisplayActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_picture_display);

        initView();
    }

    private void initView() {

        imageView = (SimpleDraweeView) findViewById(R.id.picture_display_image);
        pictureDisplayText = (TextView) findViewById(R.id.picture_display_text);

        new Thread(runa).start();
    }

    /**
     * 显示下载图片
     */
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            if (msg.what == 0) {
                updateImageView((Bitmap) msg.obj);
            }
        }
    };

    /**
     * //将bitmap添加到缓存中
     *
     * @param bm
     */
    private void updateImageView(Bitmap bm) {
        //list.add(bm);

        mMemoryCache.put("imageKey" + imageKey, bm);
        imageView.setImageBitmap(mMemoryCache.get("imageKey" + a));
        // LogUtil.e("NSC", "=====" + bm.toString());
        imageKey++;
    }

    /**
     *
     */
    private Runnable runa = new Runnable() {
        @Override
        public void run() {

            Intent intent = getIntent();
            //int position = intent.getIntExtra("position");
            int position = intent.getIntExtra("position", -1);
            List url = intent.getStringArrayListExtra("enlargeImage");
            LogUtil.e(TAG, "a==" + position);
            a = position + 1;
            pictureDisplayText.setText((Integer.valueOf(a)) + "/" + Integer.valueOf(url.size()));
            //  bit(urlPosition);//先显示传进来的第一张
            for (int i = 0; i < url.size(); i++) {
                bit(url.get(i).toString());
                //LogUtil.e("NSC",url.get(i).toString()+"i = "+i);
                // addView();
            }

        }
    };

    /**
     * @param url
     */
    private void bit(String url) {
        byte[] data = new byte[0];
        try {
            data = ImageService.getImage(url);
            bitmap = BitmapFactory.decodeByteArray(data, 0, data.length);  //生成位图

            //  Looper.prepare();// 必须调用此方法,要不然会报错
            Message msg = new Message();
            msg.what = 0;
            msg.obj = bitmap;
            handler.sendMessage(msg);

        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN://获取点击的时候屏幕位置

                downX = (int) event.getRawX();

                // LogUtil.e("NSC","x = "+x+"  y="+y);
                break;

            case MotionEvent.ACTION_MOVE:
                moveX = (int) event.getRawX();

                //LogUtil.e("NSC","mx = "+mx+"  my="+my);
                break;

            case MotionEvent.ACTION_UP://手离开的时候位置
                upX = (int) event.getRawX();
                int pValue = upX - downX;//滑动的距离差

                LogUtil.e("NSC", "upX-downX = " + (upX - downX));
                if (upX - downX > 120) {//右滑的时候
                    LogUtil.e("NSC", "a = " + a + ":" + mMemoryCache.size());
                    if (a <= mMemoryCache.size()) {
                        // LogUtil.e(TAG, mMemoryCache.get("imageKey"+a).getWidth()+":"+mMemoryCache.get("imageKey"+a).getHeight());
                        //mMemoryCache.get("imageKey"+a).getWidth();
                        Animation rInAnimIn = AnimationUtils.loadAnimation(this, R.anim.push_right_in);
                        imageView.setAnimation(rInAnimIn);
                        imageView.setImageBitmap(mMemoryCache.get("imageKey" + a));
                        pictureDisplayText.setText((Integer.valueOf(a)) + "/" + Integer.valueOf(mMemoryCache.size()));

                        a++;
                        if (a > mMemoryCache.size()) {
                            a = 1;
                        }
                    }

                } else if (upX - downX < -120) {//左滑
                    LogUtil.e("NSC", "aaaa = " + a + ":" + mMemoryCache.size());
                    if (a > 0) {
                        Animation lInAnim = AnimationUtils.loadAnimation(this, R.anim.push_left_in);       // 向左滑动左侧进入的渐变效果(alpha 0.1  -> 1.0)
                        imageView.setAnimation(lInAnim);
                        imageView.setImageBitmap(mMemoryCache.get("imageKey" + a));
                        pictureDisplayText.setText((Integer.valueOf(a)) + "/" + Integer.valueOf(mMemoryCache.size()));
                        a--;
                        if (a == 0) {
                            a = mMemoryCache.size();
                        }
                    }

                }

                if (pValue == 0) {//点击触摸就关闭窗口
                    finish();
                }

                break;
        }

        return super.onTouchEvent(event);         // 注册手势事件
    }


    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (bitmap != null && !bitmap.isRecycled()) {
            // 回收并且置为null
            bitmap.recycle();
            bitmap = null;
        }
    }


}


4、为了让效果更好需要将在权限文件将activity设置成窗口模式,因为使用的是网络图片记得加上网络权限。

<activity
            android:name=".ui.circle.PictureDisplayActivity"
            android:theme="@style/Transparent" />
在styles.xml中添加一个自定义格式

   <!--图片点击放大style-->
    <style name="Transparent" parent="android:style/Theme.NoTitleBar.Fullscreen">
        <item name="android:windowBackground">@color/black</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowAnimationStyle">@android:style/Animation.Translucent</item>
    </style>

实现效果:


最后想说这个写得比较简单,可能有问题,欢迎指出。



已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页