photoView實(shí)現(xiàn)圖片多點(diǎn)觸控效果

更新時(shí)間：2017年12月15日 16:09:10 作者：陳如水

這篇文章主要為大家詳細(xì)介紹了photoView實(shí)現(xiàn)圖片多點(diǎn)觸控效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了PhotoView實(shí)現(xiàn)圖片多點(diǎn)觸控效果展示的具體代碼，供大家參考，具體內(nèi)容如下

效果:點(diǎn)擊后能夠自由縮放、平移；

添加依賴:

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>

代碼實(shí)現(xiàn):

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) { 
   // 只有一張圖片 就不顯示圓點(diǎn) 
  } else { 
   for (int i = 0; i < mImages.size(); i++) { 
    View point = new View(this); 
    //point.setId(i);//設(shè)置Id 
    point.setTag(i);//設(shè)置Tag 
    //設(shè)置背景 
    point.setBackgroundResource(R.drawable.point_selector); 
    //布局參數(shù) 
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(15, 15); 
    params.rightMargin = 20;//右邊距 
    //把點(diǎn)添加到線性布局 
    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); 
   //設(shè)置iv的寬高 
   ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ScreenUtils.getScreenWidth(this)); 
   iv.setLayoutParams(params); 
   //設(shè)置iv的填充樣式--->可能導(dǎo)致圖片變形 
   iv.setScaleType(ImageView.ScaleType.FIT_XY); 
   String url = mImages.get(i); 
   Glide.with(this).load(url).into(iv); 
 
   //設(shè)置圖片的點(diǎn)擊事件 
   //為每一個(gè)ImageView設(shè)置單獨(dú)的標(biāo)記、圖片的位置 
   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); 
     //傳遞當(dāng)前點(diǎn)擊的圖片的位置、圖片路徑集合 
     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);//獲取小圓點(diǎn) 
   if (index == i) { 
    //當(dāng)前選擇的頁面下標(biāo) 
    point.setEnabled(false); 
   } else { 
    point.setEnabled(true); 
   } 
  } 
 } 
}

PhotoShowActivity中代碼實(shí)現(xiàn):

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當(dāng)前page的數(shù)字 
  hViewPager.setCurrentItem(position); 
 } 
 
 public void getFrontPageData() { 
  //點(diǎn)擊圖片的位置 
  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) { 
   //創(chuàng)建顯示圖片的控件 
   PhotoView photoView = new PhotoView(container.getContext()); 
   //設(shè)置背景顏色 
   photoView.setBackgroundColor(Color.WHITE); 
   //把photoView添加到viewpager中，并設(shè)置布局參數(shù) 
   container.addView(photoView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); 
   //加載當(dāng)前PhtotoView要顯示的數(shù)據(jù) 
   String url = mDatas.get(position); 
 
   if (!TextUtils.isEmpty(url)) { 
    //使用使用Glide進(jìn)行加載圖片進(jìn)行加載圖片 
    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(屏幕參數(shù)工具類)

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接口中存儲(chǔ)字符串常量:

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); 
 } 
 
}

代碼下載

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: