Android实现图片点击放大

本文实例为大家分享了Android实现图片点击放大的具体代码，供大家参考，具体内容如下

在我的项目中，有点击图片banner后放大浏览的功能。我的做法就是创建一个专门的图片显示Activity，布局里面用ViewPage,这样就能控制图片的左右滑动，并且控制首先显示第几张图片。
功能是ok的，显示也是正常的。但我花费了好几天的时间来实现、完善这个功能。

ShowMoreImageActivity

/**
* 图片放大
*/
public class ShowMoreImageActivity extends BaseActivity {

@FindId(R.id.vp)
private ViewPager vp;
@FindId(R.id.ll_point)
private LinearLayout ll_point;

private List<String> imgs;
@FindId(R.id.btn_save)
private ImageView btn_save;

private int index;

public static int type;
private Activity activity;

@Override
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_show_more_image);
 initViews();
activity = this;
}

private void initViews() {
 AutoFindId.findId(context);

imgs = (ArrayList<String>) getIntent().getSerializableExtra("img");
 index = getIntent().getIntExtra("index", 0);

type = getIntent().getIntExtra("type", 0);
 vp.setAdapter(new MoreImgPagerAdapter(context, imgs));

vp.addOnPageChangeListener(new OnPageChangeListener() {
  @Override
  public void onPageSelected(int arg0) {
   index = arg0;
   setUpPoint(imgs.size(), arg0);
  }

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

@Override
  public void onPageScrollStateChanged(int arg0) {
  }
 });
 setUpPoint(imgs.size(), 0);

vp.setCurrentItem(index);
}

protected void downLoad(final String urls) {
 String[] split = urls.split("\\?");
 final String url = split[0];
 if (url.startsWith("file")) {
  G.toast(context, "此为本地图片，不用下载,路径为" + url.replace("file://", ""));
  return;
 }

if (OKHttpUtils.isNetworkAvailable(context)) {
  G.showPd(context);
  TDUtils.execute(new Runnable() {
   @Override
   public void run() {
    try {
     File file = new File(C.getDownloadPath());
     if (!file.exists()) {
      file.mkdir();
     }
     File jpg = new File(C.getDownloadPath() + G.urlToFileName(url));
     // 如果已经存在则不需要下载
     if (jpg != null && jpg.exists()) {
      G.dismissProgressDialogInThread();

G.toastInThread(context,
        "该文件已被下载到" + jpg.getParent() + context.getResources().getString(R.string.xia));
      return;
     }
     // 先从缓存中查找
     File tmpFile = NetAide.getBitmapUtils().getBitmapFileFromDiskCache(url);
     if (tmpFile != null && tmpFile.exists()) {
      G.look("---从缓存中查找到图片----");
      Bitmap bm = BitmapFactory.decodeFile(tmpFile.getAbsolutePath());

FileOutputStream fos = new FileOutputStream(jpg);
      bm.compress(CompressFormat.JPEG, 100, fos);
      fos.close();
      G.dismissProgressDialogInThread();

// 通知图库更新
      C.noticeImageRefresh(context, jpg);

G.toastInThread(context, context.getResources().getString(R.string.downLoadUrl)
        + jpg.getParent() + context.getResources().getString(R.string.xia));
      return;
     }

// 从网络上下载保存
     Bitmap bm = BitmapFactory.decodeStream(new URL(url).openStream());

FileOutputStream fos = new FileOutputStream(jpg);
     bm.compress(CompressFormat.JPEG, 100, fos);
     fos.close();
     G.dismissProgressDialogInThread();

// 通知图库更新
     C.noticeImageRefresh(context, jpg);
     G.toastInThread(context, "你现在可以在图库中查看该图片了");

} catch (Exception e) {
     e.printStackTrace();
     G.dismissProgressDialogInThread();

G.toastInThread(context, context.getResources().getString(R.string.downLoadFail));

File jpg = new File(C.getDownloadPath() + G.urlToFileName(url));
     if (jpg != null && jpg.exists()) {
      jpg.delete();
     }
    }
   }
  });
 }

}

private void setUpPoint(int size, int choose) {
 ll_point.removeAllViews();
 if (size <= 1) {
  return;
 }

for (int i = 0; i < size; i++) {
  ImageView point = new ImageView(context);
  point.setLayoutParams(new LinearLayout.LayoutParams(DensityUtil.dip2px(context, 15), -2));
  point.setScaleType(ScaleType.FIT_CENTER);
  if (i == choose) {
   point.setImageResource(R.drawable.white_choosed);
  } else {
   point.setImageResource(R.drawable.white_no_choosed);
  }
  ll_point.addView(point);
 }
}

public void doClcik(View view) {
 switch (view.getId()){
case R.id.btn_save:
   PermissionUtils permissionUtils = new PermissionUtils();
   permissionUtils.setPermission(this, "存储", "保存图片", new PermissionUtils.AfterPermission() {
    @Override
    public void doNext() {
     downLoad(imgs.get(index));
    }
   },Manifest.permission.WRITE_EXTERNAL_STORAGE);
break;
}
}
}

对应布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black"
android:orientation="vertical">

<androidx.viewpager.widget.ViewPager
 android:id="@+id/vp"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />

<LinearLayout
 android:layout_width="match_parent"
 android:layout_height="40dp"
 android:layout_marginTop="25dp">

<LinearLayout
  android:layout_width="50dp"
  android:layout_height="match_parent"
  android:onClick="onFinish">

<ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_vertical"
   android:layout_marginLeft="10dp"
   android:background="@drawable/nav_back" />

</LinearLayout>

<View
  android:layout_width="0dp"
  android:layout_height="0dp"
  android:layout_weight="1" />

<ImageView
  android:id="@+id/btn_save"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center_vertical"
  android:layout_marginRight="10dp"
  android:onClick="doClcik"
  android:src="@drawable/download_img" />
</LinearLayout>

<LinearLayout
 android:id="@+id/ll_point"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:layout_marginBottom="40dp"
 android:gravity="center"
 android:orientation="horizontal"/>

</FrameLayout>

MoreImgPagerAdapter

public class MoreImgPagerAdapter extends PagerAdapter {

private Context context;
private List<String> images;

private SparseArray<SoftReference<View>> ivs;

public MoreImgPagerAdapter(Context context, List<String> images) {
this.context = context;
this.images = images;
ivs = new SparseArray<SoftReference<View>>();
}

@Override
public int getCount() {
return images.size();
}

@Override
public void destroyItem(ViewGroup arg0, int arg1, Object arg2) {
SoftReference<View> reference = ivs.get(arg1);
if (reference != null && reference.get() != null) {
arg0.removeView(reference.get());
}
}

@Override
public Object instantiateItem(ViewGroup arg0, final int arg1) {
SoftReference<View> reference = ivs.get(arg1);
if (reference == null || reference.get() == null) {
View v = LayoutInflater.from(context).inflate(R.layout.item_show_more_image, null);
reference = new SoftReference<View>(v);
ivs.put(arg1, reference);
}

View v = reference.get();

final ViewHolder holder = new ViewHolder(v);
Glide.with(context).asBitmap().load(images.get(arg1)).into(holder.image);
arg0.addView(v);

return v;

}

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

class ViewHolder {
@FindId(R.id.image)
private ImageView image;

@FindId(R.id.rl_percent)
private RelativeLayout rl_percent;
@FindId(R.id.tv_percent)
private TextView tv_percent;
@FindId(R.id.iv_top)
private ImageView iv_top;

public ViewHolder(View v) {
AutoFindId.findIdByView(this, v);
}
}
}

对应布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black"
android:orientation="vertical" >

<FrameLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_marginBottom="50dp"
 android:layout_marginTop="70dp" >

<ImageView
  android:layout_gravity="center"
  android:id="@+id/image"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />

<ImageView
  android:id="@+id/iv_top"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="top|right"
  android:visibility="gone"
  android:background="@drawable/shuiyin" />
</FrameLayout>

<RelativeLayout
 android:visibility="gone"
 android:id="@+id/rl_percent"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true" >

<ProgressBar
  android:layout_width="40dp"
  android:layout_height="40dp" />

<TextView
  android:id="@+id/tv_percent"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerInParent="true"
  android:textColor="@android:color/white"
  android:textSize="12sp" />
</RelativeLayout>

</RelativeLayout>

上面都是次要的，因为我发现了一个更为简便的轮子。

github地址

在我的项目中，我只需要两步就完成了此功能。

第一步：

// 查看大图
implementation 'com.github.SherlockGougou:BigImageViewPager:v4_6.1.1'

第二步：

在点击图片事件那里调用：

ImagePreview
 .getInstance()
 // 上下文，必须是activity，不需要担心内存泄漏，本框架已经处理好；
 .setContext(context)
 // 设置从第几张开始看（索引从0开始）
 .setIndex(position)
 // 有三种设置数据集合的方式，根据自己的需求进行三选一：
 // 1：第一步生成的imageInfo List
 //.setImageInfoList(imageInfoList)
 // 2：直接传url List
 .setImageList(imageList)
 // 3：只有一张图片的情况，可以直接传入这张图片的url
 //.setImage(String image)
 // 开启预览
.start();

就这样完成了图片放大浏览、下载的功能，在这里记录下。

来源：https://blog.csdn.net/u014714188/article/details/109305641