模仿微信圖片放大頁功能以及進入退出效果

模仿微信圖片放大頁功能以及進入退出效果

類似微信圖片放大頁的進出動畫、圖片預覽支持圖片手勢縮放、拖拽等操作,基於ImageViewer微修改,修復了一處崩潰,一處體驗

效果:

在這裏插入圖片描述在這裏插入圖片描述

在這裏插入圖片描述

自定義屬性

屬性名 描述
ivr_show_index 是否顯示圖片位置
ivr_do_enter 是否開啓進場動畫
ivr_do_exit 是否開啓退場動畫
ivr_duration 進場與退場動畫的執行時間
ivr_do_drag 是否允許圖片拖拽
ivr_drag_type 拖拽模式(classic:今日頭條效果

自定義方法

方法名 描述
setStartPosition(int position) 設置開始展示的圖片的位置
setImageData(List list) 設置圖片資源
setViewData(List list) 設置目標 view 的相關數據
setImageLoader(ImageLoader loader) 設置圖片加載類
showIndex(boolean show) 是否顯示圖片索引
doDrag(boolean isDo) 是否允許圖片被拖拽
setDragType(@ImageDraggerType int type) 設置拖拽模式
doEnterAnim(boolean isDo) 是否開啓進場動畫
doExitAnim(boolean isDo) 是否開啓退場動畫
setDuration(int duration) 設置打開和關閉的動畫執行時間
setOnImageChangedListener(OnImageChangedListener listener) 設置圖片切換監聽
setOnItemClickListener(OnItemClickListener listener) 設置圖片的單擊擊監聽
setOnItemLongClickListener(OnItemLongClickListener listener) 設置圖片的長按擊監聽
setOnPreviewStatusListener(OnPreviewStatusListener listener) 設置圖片預覽狀態監聽
watch() 開啓圖片預覽
close() 關閉圖片預覽
clear() 清除所有數據
getViewState() 獲取圖片預覽器的當前狀態
setImageScaleable(boolean scaleable) 是否允許圖片縮放
isImageScaleable() 圖片是否可縮放
getImageScale() 獲取圖片當前的縮放等級
setImageMaxScale 設置圖片的最大縮放等級
getImageMaxScale() 獲取圖片的最大縮放等級
setImageMinScale(float minScale) 設置圖片的最小縮放等級
getImageMinScale() 獲取圖片的最小縮放等級
getCurrentView() 獲取當前 Item 的視圖
getCurrentPosition() 獲取當前圖片的位置
onKeyDown(int keyCode, KeyEvent event) 返回鍵監聽(使用方法見demo)

簡單示例

XML 中添加 ImageViewer

  <com.liyi.viewer.widget.ImageViewer
        android:id="@+id/imagePreivew"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

代碼中設置 WXZoomView

  // 圖片瀏覽的起始位置
  imageViewer.setStartPosition(position);
  // 圖片的數據源
  imageViewer.setImageData(mImageList);
  // 目標 View 的位置以及尺寸等信息
  imageViewer.setViewData(mViewDatas);
  // 自定義圖片的加載方式
  imageViewer.setImageLoader(new ImageLoader() {
        @Override
        public void displayImage(final int position, Object src, final ImageView view) {
               Glide.with(SimplePreviewActivity.this)
                    .load(src)
                    .into(new SimpleTarget<Drawable>() {
                          @Override
                          public void onLoadStarted(@Nullable Drawable placeholder) {
                                 super.onLoadStarted(placeholder);
                                 view.setImageDrawable(placeholder);
                          }

                          @Override
                          public void onLoadFailed(@Nullable Drawable errorDrawable) {
                                 super.onLoadFailed(errorDrawable);
                                 view.setImageDrawable(errorDrawable);
                          }

                          @Override
                          public void onResourceReady(Drawable resource, Transition<? super Drawable> transition) {
                                 view.setImageDrawable(resource);
                                 mViewDatas.get(position).setImageWidth(resource.getIntrinsicWidth());
                                 mViewDatas.get(position).setImageHeight(resource.getIntrinsicHeight());
                          }
                     });
   }});
   // 開啓圖片瀏覽
   imageViewer.watch();

代碼傳送門:

WXZoomView

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章