使用Photoview实现图片左右滑动及缩放功能

我想,不管是做什么样的app。一般都会涉及到图片点击方法,和左右滑动的功能吧。今天我就把自己的实现拿来分享一下。图片的加载用到了picasso的图片加载工具。
第一步:注入依赖

compile 'com.squareup.picasso:picasso:2.5.2'
compile 'com.github.chrisbanes:PhotoView:1.3.0'

第二步,我们就来实现这个功能。多张图片左右滑动,这需要用到ViewPager这个类。
且看布局:

<uk.co.senab.photoview.sample.HackyViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/iv_photo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

这里用到了自定义的ViewPager

public class HackyViewPager extends ViewPager {

    public HackyViewPager(Context context) {
        super(context);
    }

    public HackyViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        try {
            return super.onInterceptTouchEvent(ev);
        } catch (IllegalArgumentException e) {
            e.printStackTrace();
            return false;
        }
    }
}

这个是点击之后跳转到大图的Activity,来显示大图。最重要也是很简单的一步:

package uk.co.senab.photoview.sample;

import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;

import com.squareup.picasso.Callback;
import com.squareup.picasso.Picasso;

import uk.co.senab.photoview.PhotoView;
import uk.co.senab.photoview.PhotoViewAttacher;

public class PicassoSampleActivity extends AppCompatActivity {

    ViewPager mViewPager;
    //String position;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_simple);
        mViewPager = (HackyViewPager) findViewById(R.id.iv_photo);
        setContentView(mViewPager);
        mViewPager.setAdapter(new SamplePagerAdapter());
        //position=getIntent().getStringExtra("position");

        //设置默认的坐标,实际情况不要写死,只需点击哪张图片的position,并传过来接受就可以了,就默认显示点击图片的大图。
        //mViewPager.setCurrentItem(Integer.parseInt(position));
        mViewPager.setCurrentItem(2);
    }

    static class SamplePagerAdapter extends PagerAdapter {
        //这里暂时写死了,实际情况中要从服务端获取图片地址结合,传过来
        private static final String[] url = {"http://pbs.twimg.com/media/Bist9mvIYAAeAyQ.jpg", "http://d.hiphotos.bdimg.com/album/whcrop%3D657%2C370%3Bq%3D90/sign=2c994e578a82b9013df895711cfd9441/09fa513d269759eede0805bbb2fb43166d22df62.jpg",
                "http://www.fwjia.com/d/file/2013-11-14/13631d143b7076dc3257b1e516a2a9a2.jpg", "http://img2.3lian.com/2014/f5/63/d/7.jpg"};

        @Override
        public int getCount() {
            return url.length;
        }

        @Override
        public View instantiateItem(ViewGroup container, int position) {
            PhotoView photoView = new PhotoView(container.getContext());
            final PhotoViewAttacher attacher = new PhotoViewAttacher(photoView);
            Picasso.with(container.getContext())
                    .load(url[position])
                    .into(photoView, new Callback() {
                        @Override
                        public void onSuccess() {
                            attacher.update();
                        }

                        @Override
                        public void onError() {

                        }
                    });

            container.addView(photoView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

            return photoView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

    }
}

有了这个工具我们很轻松就实现了图片点击放大,左右活动,缩放等功能。

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在 PhotoView实现涂鸦功能,你可以按照以下步骤进行操作: 1. 添加 PhotoView 依赖: 在你的项目的 `build.gradle` 文件中添加 PhotoView 依赖项: ```groovy dependencies { implementation 'com.github.chrisbanes:PhotoView:2.3.0' } ``` 确保使用的是最新版本的 PhotoView。 2. 在布局文件中添加 PhotoView: 在你的布局文件中添加 PhotoView 控件,并设置好相关属性,例如图片资源、类型等: ```xml <com.github.chrisbanes.photoview.PhotoView android:id="@+id/photo_view" android:layout_width="match_parent" android:layout_height="match_parent" app:srcCompat="@drawable/your_image" /> ``` 3. 添加涂鸦功能: 在代码中获取 PhotoView 对象,并设置触摸事件监听器,以实现涂鸦功能。你可以使用 Canvas 和 Paint 类来绘制路径。 ```java PhotoView photoView = findViewById(R.id.photo_view); photoView.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() { @Override public void onPhotoTap(ImageView view, float x, float y) { // 获取触摸点坐标,并将其转换为图片上的坐标 Drawable drawable = photoView.getDrawable(); if (drawable != null) { int drawableWidth = drawable.getIntrinsicWidth(); int drawableHeight = drawable.getIntrinsicHeight(); int viewWidth = photoView.getWidth(); int viewHeight = photoView.getHeight(); float imageX = (x * drawableWidth) / viewWidth; float imageY = (y * drawableHeight) / viewHeight; // 在图片上绘制涂鸦 Bitmap bitmap = Bitmap.createBitmap(drawableWidth, drawableHeight, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); Paint paint = new Paint(); paint.setColor(Color.RED); paint.setStrokeWidth(5); canvas.drawPoint(imageX, imageY, paint); // 将修改后的图片显示在 PhotoViewphotoView.setImageBitmap(bitmap); } } }); ``` 在以上代码中,通过监听 `onPhotoTap` 方法获取触摸点的坐标,并将其转换为图片上的坐标。然后,使用 Canvas 和 Paint 绘制涂鸦,最后将修改后的图片显示在 PhotoView 上。 你可以根据需要修改涂鸦的样式、颜色和大小。 希望这些信息对你有所帮助!如果你有任何其他问题,请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值