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