使用photoView实现图片多点触控

效果:点击后能够自由缩放、平移;


添加依赖:

    compile 'com.commit451:PhotoView:1.2.4'
    compile 'com.github.bumptech.glide:glide:3.5.2'

布局文件:

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white">

        <!--  抽取所有的Viewpager布局-->
        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <LinearLayout
            android:id="@+id/ll_point"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/viewPager"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:orientation="horizontal" />
    </RelativeLayout>


</LinearLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <com.example.tuhuadmin.imagetouch.HackyViewPager
        android:id="@+id/hViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>


代码实现: 

package com.example.tuhuadmin.imagetouch;

import android.content.Intent;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import com.bumptech.glide.Glide;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private ViewPager vp;
    private LinearLayout ll_point;
    private ArrayList<String> mImages;
    //用于存放ImageView
    private ArrayList<ImageView> imageViewsList;

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

        initViews();
        initImageUrl();
        getImageData();
    }

    private void initImageUrl() {
        //要显示的图片地址添加到集合里面
        mImages = new ArrayList<String>();
        mImages.add(Constant.url1);
        mImages.add(Constant.url2);
        mImages.add(Constant.url4);
        mImages.add(Constant.url5);
        mImages.add(Constant.url6);

        imageViewsList = new ArrayList<>();
    }

    private void initViews() {
        vp = (ViewPager) findViewById(R.id.viewPager);
        ll_point = (LinearLayout) findViewById(R.id.ll_point);

        //让图片正方形显示
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, ScreenUtils.getScreenWidth(this));
        vp.setLayoutParams(params);

    }

    public void getImageData() {
        if (mImages.size() == 1) {
            // 只有一张图片   就不显示圆点
        } else {
            for (int i = 0; i < mImages.size(); i++) {
                View point = new View(this);
                //point.setId(i);//设置Id
                point.setTag(i);//设置Tag
                //设置背景
                point.setBackgroundResource(R.drawable.point_selector);
                //布局参数
                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(15, 15);
                params.rightMargin = 20;//右边距
                //把点添加到线性布局
                ll_point.addView(point, params);
            }
            View point = ll_point.getChildAt(0);
            point.setEnabled(false);
        }
        for (int i = 0; i < mImages.size(); i++) {
            ImageView iv = new ImageView(this);
            //设置iv的宽高
            ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ScreenUtils.getScreenWidth(this));
            iv.setLayoutParams(params);
            //设置iv的填充样式--->可能导致图片变形
            iv.setScaleType(ImageView.ScaleType.FIT_XY);
            String url = mImages.get(i);
            Glide.with(this).load(url).into(iv);

            //设置图片的点击事件
            //为每一个ImageView设置单独的标记、图片的位置
            iv.setTag(i);
            iv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    int position = (int) view.getTag();
                    Intent intent = new Intent(MainActivity.this, PhotoShowActivity.class);
                    //传递当前点击的图片的位置、图片路径集合
                    intent.putExtra("position", position);
                    intent.putStringArrayListExtra("mImages", mImages);
                    startActivity(intent);
                }
            });

            // 把图片添加到集合里面
            imageViewsList.add(iv);
        }

        vp.setAdapter(new ViewPagerAdapter(imageViewsList,vp) );
        vp.setOnPageChangeListener(new MyOnPageChangeListener());
    }

    private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrollStateChanged(int arg0) {
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        //页面选择
        @Override
        public void onPageSelected(int index) {
            changePager(index);
        }
    }

    private void changePager(int index) {
        int childCount = ll_point.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View point = ll_point.getChildAt(i);//获取小圆点
            if (index == i) {
                //当前选择的页面下标
                point.setEnabled(false);
            } else {
                point.setEnabled(true);
            }
        }
    }
}

PhotoShowActivity中代码实现:

package com.example.tuhuadmin.imagetouch;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.text.TextUtils;
import android.view.View;
import android.view.ViewGroup;

import com.bumptech.glide.Glide;

import java.util.ArrayList;

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

/**
 * Created on 2016/7/19.
 * Author:crs
 * Description:XXX
 */
public class PhotoShowActivity extends Activity {

    private int position;
    private ArrayList<String> mDatas;
    private HackyViewPager hViewPager;

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

        getFrontPageData();
        initViews();

    }

    private void initViews() {
        hViewPager = (HackyViewPager) findViewById(R.id.hViewPager);
        hViewPager.setAdapter(new ImageAdapter());
        //为ViewPager当前page的数字
        hViewPager.setCurrentItem(position);
    }

    public void getFrontPageData() {
        //点击图片的位置
        position = getIntent().getIntExtra("position", 0);
        //获取传递过来的图片地址
        mDatas = getIntent().getStringArrayListExtra("mImages");
    }


    public class ImageAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return null == mDatas ? 0 : mDatas.size();
        }

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

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            //创建显示图片的控件
            PhotoView photoView = new PhotoView(container.getContext());
            //设置背景颜色
            photoView.setBackgroundColor(Color.WHITE);
            //把photoView添加到viewpager中,并设置布局参数
            container.addView(photoView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            //加载当前PhtotoView要显示的数据
            String url = mDatas.get(position);

            if (!TextUtils.isEmpty(url)) {
                //使用使用Glide进行加载图片进行加载图片
                Glide.with(PhotoShowActivity.this).load(url).into(photoView);
            }

            //图片单击事件的处理
            photoView.setOnViewTapListener(new PhotoViewAttacher.OnViewTapListener() {
                @Override
                public void onViewTap(View view, float x, float y) {
                    finish();
                }
            });
            return photoView;
        }

    }
}

ScreenUtils中代码:WindowManager类的使用     WINDOW_SERVICE  Display(屏幕参数工具类)

package com.example.tuhuadmin.imagetouch;

import android.content.Context;
import android.view.Display;
import android.view.WindowManager;

/**
 * Created on 2016/7/19.
 * Author:crs
 * Description:XXX
 */
public class ScreenUtils {

    public static int getScreenWidth(Context context) {
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        Display defaultDisplay = wm.getDefaultDisplay();
        int width = defaultDisplay.getWidth();
        return width;

    }
}


Constant接口中存储字符串常量:

package com.example.tuhuadmin.imagetouch;

/**
 * Created on 2016/7/19.
 * Author:crs
 * Description:XXX
 */
public interface Constant {

    String url1 = "http://pic.yesky.com/uploadImages/2016/181/06/L3JL486FYCL7.jpg";
    String url2 = "http://pic.yesky.com/uploadImages/2016/181/07/9MXS11F0HOC2.jpg";
    String url5 = "http://xm.fjsen.com/images/attachement/jpg/site2/20160629/38c986e7161c18dd5a6c1d.jpg";
    String url4 = "http://pimg.damai.cn/perform/project/281/28183_n.jpg";
    String url6 = "http://i3.hunantv.com/p1/20110905/1702374043.jpg";

}

ViewPagerAdapter:

package com.example.tuhuadmin.imagetouch;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.ArrayList;

/**
 * Created on 2016/7/19.
 * Author:crs
 * Description:XXX
 */
public class ViewPagerAdapter extends PagerAdapter {

    ArrayList<ImageView> mImages;
    ViewPager vp;

    public ViewPagerAdapter(ArrayList<ImageView> mImages, ViewPager vp) {
        this.mImages = mImages;
        this.vp = vp;
    }

    @Override
    public int getCount() {
        return null == mImages ? 0 : mImages.size();
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ImageView iv = mImages.get(position);
        vp.removeView(iv);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView iv = mImages.get(position);
        vp.addView(iv);
        return mImages.get(position);
    }

}

代码下载



  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
要在 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 上。 你可以根据需要修改涂鸦的样式、颜色和大小。 希望这些信息对你有所帮助!如果你有任何其他问题,请随时提问。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值