Android realizes picture click enlargement

  • 2021-12-09 10:11:40
  • OfStack

In this paper, we share the specific code of Android to realize picture click enlargement for your reference. The specific contents are as follows

In my project, click on the image banner and then enlarge the browsing function. My approach is to create a special picture display Activity, layout inside with ViewPage, so that you can control the left and right slide of the picture, and control which picture to display first.
The function is ok, and the display is normal. But it took me several days to realize and perfect this function.

ShowMoreImageActivity


/**
 *  Picture enlargement 
 */
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, " This is a local picture, so you don't need to download it , The path is " + 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));
      //  Do not need to download if it already exists 
      if (jpg != null && jpg.exists()) {
       G.dismissProgressDialogInThread();

       G.toastInThread(context,
         " The file has been downloaded to " + jpg.getParent() + context.getResources().getString(R.string.xia));
       return;
      }
      //  Find it from the cache first 
      File tmpFile = NetAide.getBitmapUtils().getBitmapFileFromDiskCache(url);
      if (tmpFile != null && tmpFile.exists()) {
       G.look("--- Find a picture from the cache ----");
       Bitmap bm = BitmapFactory.decodeFile(tmpFile.getAbsolutePath());

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

       //  Notify gallery updates 
       C.noticeImageRefresh(context, jpg);

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

      //  Download and save from the network 
      Bitmap bm = BitmapFactory.decodeStream(new URL(url).openStream());

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

      //  Notify gallery updates 
      C.noticeImageRefresh(context, jpg);
      G.toastInThread(context, " You can now view the picture in the gallery ");

     } 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, " Storage ", " Save Picture ", new PermissionUtils.AfterPermission() {
     @Override
     public void doNext() {
      downLoad(imgs.get(index));
     }
    },Manifest.permission.WRITE_EXTERNAL_STORAGE);
 break;
 }
 }
}

Corresponding layout:


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

Corresponding layout:


<?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>

The above is secondary, because I found a simpler wheel.

github Address

In my project, I only need two steps to complete this function.

Step 1:


//  View the larger picture 
implementation 'com.github.SherlockGougou:BigImageViewPager:v4_6.1.1'

Step 2:

Called from the Click Picture event:


ImagePreview
  .getInstance()
  //  Context, must be activity There is no need to worry about memory leakage, and this framework has already handled it; 
  .setContext(context)
  //  Set the number from which to start (the index is from 0 Start) 
  .setIndex(position)
  //  Have 3 A way to set up a data set according to your own needs 3 Choose 1 : 
  // 1 : No. 1 1 Step generated imageInfo List
  //.setImageInfoList(imageInfoList)
  // 2 Direct transmission url List
  .setImageList(imageList)
  // 3 : Only 1 The situation of a picture can be directly passed into this picture url
  //.setImage(String image)
  //  Open preview 
 .start();

In this way, the functions of enlarging, browsing and downloading pictures are completed, which are recorded here.


Related articles: