photoView实现图片多点触控效果

本文实例为大家分享了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)

相关推荐

  • Android PhotoView使用步骤实例详解

    Android PhotoView使用步骤实例详解 1.步骤一:在布局文件中的代码: <uk.co.senab.photoview.PhotoView android:id="@+id/img_showimgview" android:layout_width="match_parent" android:layout_height="match_parent" /> 2.步骤二:进行找到控件的id photoview = (Phot

  • Android使用PhotoView实现图片双击放大单击退出效果

    本文实例为大家分享了PhotoView实现图片双击放大单击退出的具体代码,供大家参考,具体内容如下 实现思路 1.复制PhotoView  到libs下,然后进行添加小奶瓶 2.布局xml文件,添加PhotoView控件,src加载一张图片,就已经实现了放大缩小 3.Photoview设置点击事件,实现单击退出Activity 导jar包 compile files('libs/uk-co-senab-photoview.jar') 进行布局 <RelativeLayout xmlns:andr

  • Android第三方控件PhotoView使用方法详解

    PhotoView的简介: 这是一个图片查看库,实现图片浏览功能,支持pinch(捏合)手势或者点击放大缩小.支持在ViewPager中翻页浏览图片. PhotoView 是一款扩展自Android ImageView ,支持通过单点/多点触摸来进行图片缩放的智能控件.功能实用和强大. PhotoView的功能: 图片浏览查看 双指缩放 单点触摸缩放 图片缩放模式设置 基本用法: 导入jar包,布局XML里设置PhotoView 将ImageView传入PhotoViewAttacher 代码演

  • viewpager+photoview实现图片查看器

    本文实例为大家分享了Android实现图片查看器的具体代码,供大家参考,具体内容如下 效果需要两个手指禁止缩放,所以没有光标,只能用手机投放电脑上录制动态图片: demo中实用了一个第三方的photoview,非常简单实用:可实现图片双击放大,手势放大缩小,当手指离开屏幕时如果图片小于原图可自动恢复原图大小,可实现点击监听,长按图片监听: 整个demo非常简单,整体就是一个activity,页面布局只有一个viewpager和textview <RelativeLayout xmlns:andr

  • photoView实现图片多点触控效果

    本文实例为大家分享了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多点触控实现对图片放大缩小平移,惯性滑动等功能

    文章将在原有基础之上做了一些扩展功能: 1.图片的惯性滑动 2.图片缩放小于正常比例时,松手会自动回弹成正常比例 3.图片缩放大于最大比例时,松手会自动回弹成最大比例 实现图片的缩放,平移,双击缩放等基本功能的代码如下,每一行代码我都做了详细的注释 public class ZoomImageView extends ImageView implements ScaleGestureDetector.OnScaleGestureListener, View.OnTouchListener , V

  • Android多点触控技术实战 针对图片自由缩放和移动

    在上一篇文章中我带着大家一起实现了Android瀑布流照片墙的效果,虽然这种效果很炫很酷,但其实还只能算是一个半成品,因为照片墙中所有的图片都是只能看不能点的.因此本篇文章中,我们就来对这一功能进行完善,加入点击图片就能浏览大图的功能,并且在浏览大图的时候还可以通过多点触控的方式对图片进行缩放. 如果你还没有看过 Android瀑布流照片墙实现,体验不规则排列的美感 这篇文章,请尽量先去阅读完再来看本篇文章,因为这次的代码完全是在上次的基础上进行开发的. 那我们现在就开始动手吧,首先打开上次的P

  • Android实现多点触控,自由缩放图片的实例代码

    Android多点触控涉及到的知识点 1.ScaleGestureDetector 2.OnScaleGestureListener 3.Matrix 4.OnTouchListener 四个知识点需要了解一下,需要注意的是Matrix在内存中是一个一维数组,操控图片的Matrxi是一个3X3的矩阵,在内存中也就是一个大小为9的一维数组. 实现多点触控,自由变化图片 1. ImageView的基础上继承 2.因为要在图片加载完成就获取到相关的属性,所以实现OnGlobalLayoutListen

  • Android多点触控实现图片自由缩放

    Android多点触控涉及到的知识点 1.ScaleGestureDetector 2.OnScaleGestureListener 3.Matrix 4.OnTouchListener 四个知识点需要了解一下,需要注意的是Matrix在内存中是一个一维数组,操控图片的Matrxi是一个3X3的矩阵,在内存中也就是一个大小为9的一维数组. 实现多点触控,自由变化图片 1. ImageView的基础上继承 2.因为要在图片加载完成就获取到相关的属性,所以实现OnGlobalLayoutListen

  • Android通过多点触控的方式对图片进行缩放的实例代码

    在上一篇文章中我带着大家一起实现了Android瀑布流照片墙的效果,虽然这种效果很炫很酷,但其实还只能算是一个半成品,因为照片墙中所有的图片都是只能看不能点的.因此本篇文章中,我们就来对这一功能进行完善,加入点击图片就能浏览大图的功能,并且在浏览大图的时候还可以通过多点触控的方式对图片进行缩放. 如果你还没有看过Android瀑布流照片墙实现 体验不规则排列的美感 这篇文章,请尽量先去阅读完再来看本篇文章,因为这次的代码完全是在上次的基础上进行开发的. 那我们现在就开始动手吧,首先打开上次的Ph

  • unity实现多点触控代码

    这是我在论坛看到的,unity多点触控.感觉还不错,分享给大家 //用于绑定参照物对象 var target : Transform; //缩放系数 var distance = 10.0; //左右滑动移动速度 var xSpeed = 250.0; var ySpeed = 120.0; //缩放限制系数 var yMinLimit = -20; var yMaxLimit = 80; //摄像头的位置 var x = 0.0; var y = 0.0; //记录上一次手机触摸位置判断用户是

  • Android开发实例之多点触控程序

    智能终端设备的多点触控操作为我们带来了种种炫酷体验,这也使得很多Android开发者都对多点触控程序的开发感兴趣.实际上多点触控程序的实现并不是那么遥不可及,而是比较容易.本文就主要通过一个实例具体讲解多点触控程序的实现.        首先来了解一下Android中多点触控的原理. Android多点触控在本质上需要LCD驱动和程序本身设计上支持,目前市面上HTC.Motorola和Samsung等知名厂商只要使用电容屏触控原理的手机均可以支持多点触控Multitouch技术,对于网页缩放.手

  • Android实现多点触控功能

    使用了Android的系统API实现了多点触控功能,多点触控对设备的硬件有一定的要求,目前市面上的手机几乎都能实现多点触控了.实现多点触控最关键的API: event.getPointerCount() 意思是这事件中包含的数据的指针的数量,总是大于或等于1.可以简单理解为放在手机屏幕上的手指的数目,为什么总是大于或等于1呢?因为触发事件需要用手指去触屏,一触屏必然产生一个指针. 重写这两个函数: 一: public boolean onTouchEvent(MotionEvent event)

  • Android实现手指触控图片缩放功能

    这次记录的是实现Android图片两手触控缩放的功能. 编译环境:eclipse Android版本4.0 创建工程过程略 实现图片在页面两手触控缩放 原理图---图片缩放 两手拉开图片变大,两手合拢图片缩小,根据两手的移动距离来判断图片放大和缩小的倍数,两手的移动距离计算方法如下: 两手不管是正着还是斜着拉伸,用勾股定理都能计算出两点的距离. 除此之外,还要确定两个手位置的中心点,图片以这个中心点为参照进行放大和缩小: 计算两点之间的中心点的方法是,点1距原点位置X1(或者Y1)加上点2距原点

随机推荐