相似微信圖片瀏覽,常見應用場景如微信朋友圈照片九宮格和微信聊天圖片預覽

本項目受Google官方demo Zooming a View 啓發,實現了點擊小圖放大至全屏預覽,退出全屏恢復至原來位置這兩個過程的動畫過渡。 常見應用場景如微信朋友圈照片九宮格和微信聊天圖片預覽,某些手機系統相冊等viewpager圖片查看 縮放 拖拽下拉縮小退出(效果同微信圖片瀏覽)html

be6e713b424d163e63f15d4571c34a5b_15211010745aaa291204056.gif

特色
1.支持自定義圖片加載框架。
2.支持重寫activity,完成切換切換效果。
3.圖片查看 縮放 拖拽下拉縮小退出。
4.支持自定義activity,Fragment。
5.支持相似微信朋友圈照片九宮格和微信聊天圖片預覽。
6.指示器類型選擇 圓點模式(貝塞爾圓點指示器)和數字模式。
7.增長接口實體類。不在使用數據轉化。 ####效果以下:android

經過Gradle抓取:微信

compile 'com.ycjiang:ImagePreview:2.1.2'

1.本項目類庫依賴第三庫app

注意: 因爲的photoview有些事件衝突,將1.3.1版本源代碼修改採用依賴本地。框架

compile 'com.android.support:support-fragment:25.3.1'
      compile 'com.android.support:support-core-utils:25.3.1'

2.示例代碼ide

注意:: 你實現自定義類,在你 app onCreate() 中佈局

@Override
      public void onCreate() {
          super.onCreate();
          ZoomMediaLoader.getInstance().init(new TestImageLoader());
      }

1.使用方式動畫

GPreviewBuilder.from(GridViewCustomActivity.this)//activity實例必須
                            .to(CustomActivity.class)//自定義Activity 使用默認的預覽不須要
                            .setData(mThumbViewInfoList)//集合
                            .setUserFragment(UserFragment.class)//自定義Fragment 使用默認的預覽不須要
                            .setCurrentIndex(position)
                            .setSingleFling(false)//是否在黑屏區域點擊返回
                            .setDrag(false)//是否禁用圖片拖拽返回  
                            .setType(GPreviewBuilder.IndicatorType.Dot)//指示器類型
                            .start();//啓動

2.列表控件item點擊事件添加相應代碼。 (RecyclerView爲例,demo有(ListView和GridView和九宮格控件實例代碼))ui

mRecyclerView.addOnItemTouchListener(new OnItemClickListener() {
            @Override
            public void SimpleOnItemClick(BaseQuickAdapter baseQuickAdapter, View view, int position) {
              //在你點擊時,調用computeBoundsBackward()方法
                computeBoundsBackward(mGridLayoutManager.findFirstVisibleItemPosition());
              GPreviewBuilder.from(RecycleViewActivity.this)
                                .setData(mThumbViewInfoList)
                                .setCurrentIndex(position)
                                .setType(GPreviewBuilder.IndicatorType.Number)
                                .start();
            }
        });
    /**
     ** 查找信息
     * 從第一個完整可見item逆序遍歷,若是初始位置爲0,則不執行方法內循環
     */
    private void computeBoundsBackward(int firstCompletelyVisiblePos) {
        for (int i = firstCompletelyVisiblePos;i < mThumbViewInfoList.size(); i++) {
            View itemView = mGridLayoutManager.findViewByPosition(i);
            Rect bounds = new Rect();
            if (itemView != null) {
                ImageView thumbView = (ImageView) itemView.findViewById(R.id.iv);
                thumbView.getGlobalVisibleRect(bounds);
            }
            mThumbViewInfoList.get(i).setBounds(bounds);
        }
    }

2.構造實體類: 你的實體類實現IThumbViewInfo接口this

public class UserViewInfo implements IThumbViewInfo {
    private String url;  //圖片地址
    private Rect mBounds; // 記錄座標
    private String user;//

    public UserViewInfo(String url) {
        this.url = url;
    }

    @Override
    public String getUrl() {//將你的圖片地址字段返回
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    @Override
    public Rect getBounds() {//將你的圖片顯示座標字段返回
        return mBounds;
    }
    
    public void setBounds(Rect bounds) {
        mBounds = bounds;
    }
   }

3.使用自定義圖片加載配置 注意這個必須實現哦。否則加載

1在你項目工程,建立一個類 實現接口IZoomMediaLoader接口 以下代碼 demo 採用glide ,能夠使用Picassor Imagloader 圖片加載框架

public class TestImageLoader implements IZoomMediaLoader {
    @Override
    public void displayImage(Fragment context, String path, final MySimpleTarget<Bitmap> simpleTarget) {
         Glide.with(context).load(path).asBitmap().centerCrop().diskCacheStrategy(DiskCacheStrategy.SOURCE)
                      .error(R.drawable.ic_default_image)
                      .into(new SimpleTarget<Bitmap>() {
                          @Override
                          public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
                              simpleTarget.onResourceReady(resource);
                          }
                          @Override
                          public void onLoadStarted(Drawable placeholder) {
                              super.onLoadStarted(placeholder);
                              simpleTarget.onLoadStarted();
                          }
      
                          @Override
                          public void onLoadFailed(Exception e, Drawable errorDrawable) {
                              super.onLoadFailed(e, errorDrawable);
                              simpleTarget.onLoadFailed(errorDrawable);
                          }
                      });
    }
     @Override
     public void onStop(@NonNull Fragment context) {
           Glide.with(context).onStop();
     }
     @Override
     public void clearMemory(@NonNull Context c) {
              Glide.get(c).clearMemory();
     }

4.自定義Activity,Fragment

1.實現自定義Activity,實現你業務操做例如加入標題欄,ViewPager切換動畫等等 .image.png

在你的佈局中,引用類庫核心佈局

2.實現自定義Fragment 實現自定義業務 例如 長按保存圖片,編輯圖片,對圖片說明內容等等 圖片縮放效果採用PhotoView image.png

須要佈局自定義重寫onCreateView()。引用你自定義佈局中添加
3 使用細節注意:

1.Activity和Fragment能夠單獨使用,也能夠組合一塊兒使用
2.自定義使用佈局時,不在子類使用setContentView()方法
3.你在Activity 重寫 setContentLayout(),返回你的自定義佈局
4.在你佈局內容 使用include 5.layout="@layout/activity_image_preview_photo" 預覽佈局添加你佈局中
6.GPreviewBuilder 調用 from()方法後,調用to();指向你.to(CustomActivity.class)自定義預覽activity
7.別忘了在AndroidManifest activity 使用主題

博客原文地址:http://www.apkbus.com/blog-92...

相關文章
相關標籤/搜索