photoView实现图片多点触控效果

砸漏

发布于 2020-10-28 19:18:06

7410

发布于 2020-10-28 19:18:06

文章被收录于专栏：恩蓝脚本

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

以上就是本文的全部内容，希望对大家的学习有所帮助。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-09-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除

display