一塊兒擼個朋友圈吧 - 圖片瀏覽（中）【圖片瀏覽器】
項目地址：github.com/razerdp/Fri… （能弱弱的求個star或者fork麼QAQ）php
-
上篇連接：一塊兒擼個朋友圈吧 - 圖片瀏覽（上）【圖片點擊前景色】html
-
下篇連接：一塊兒擼個朋友圈吧 - 圖片瀏覽（下）【ViewPager優化】java
【Warning】：android
本篇完整的從思考->尋找->編寫代碼->最終完成來闡述我如何實現本篇預覽圖功能git
本篇篇幅較長，請帶上必定的耐心程序員
本篇圖片較多，流量黨請注意github
本篇比較抽象，我會盡可能形象的闡述編程
本篇預覽圖：數組
前言
正如上一篇文章所說，一個app動人之處在於細節的研磨和富有動感的交互。緩存
在微信的朋友圈，咱們點擊圖片能夠感受到像預覽圖那樣的效果：點擊某張圖片，而後它會放大到全屏，再點擊，則會縮小到原來的那個地方
這種交互看起來很是贊，最起碼看得順眼。
然而不少時候交互動做設計的時候看起來確實很棒，但對於我等程序員來講，設計棒，設計酷每每會讓咱們擺出一張苦逼臉
—— 臣妾作不到啊，陛下。
但迫於Money的壓力下，咱們每每不得不硬着頭皮上。
正現在天這個效果，確實一開始是沒有任何頭緒，在思考實現的過程當中，我曾經想過以下幾種方法：
- 直接重寫一個ImageView，利用martix來放大圖片
- 點擊的時候，經過windowmanager動態添加一個imageview，而後讓這個imageview實現動畫
- 弄兩個view，一個隱藏的，一個是listview中的，而後點擊的時候把隱藏的顯示，並進行動畫。
- 甚至想過，直接上activityoptions....使用activity的轉場動畫
但實際上，以上的方法貌似均可以，但實際上真要我去幹了，就猶豫了，且不說運行效率，但起碼能夠預測到代碼量。。。
然而，一次神奇的發現，讓我解決了這個問題，準確的說，是谷歌早就解決了這個問題。
羽翼君探索篇
發現
對於面向搜索引擎編程的咱們，其實一直都習慣於有問題找度娘，或者找谷歌。
鑑於度娘找到的技術文章基本都是你抄我，我抄你，因而我只好到谷歌以**"android scale a view to full screen"**來找答案，奈何找來找去都是關於如何讓imageview的圖片填充整個屏幕的。
因而換個思路，除了scale，咱們不是常常還能接觸到"zoom"這個關鍵詞麼，因而就繼續谷歌**"android zoom a view to full screen"**
結果第一個結果就是Android開發者文檔的train項目：
點進去一看，瞬間滿滿的幸福感，原來頭疼了很久的問題，人家谷歌早就給出了答案
並且，不得不說的是，這個項目僅僅是在Android的培訓項目，至關於打遊戲第一關的新手教程那樣吧，具體地址能夠點這裏（http://developer.android.com/intl/zh-cn/training/index.html ）
事實上，在完成了這篇文章的效果後，我到官方培訓這裏看了幾回，因而決定，我必需要把這裏全部東西弄明白。
這裏真的要給谷歌一萬個贊。
難點
在獲得官方培訓這個超級大外掛後，最難的地方其實已經沒有什麼障礙了，剩下的就是該如何適配到咱們的項目中。
從咱們平常使用朋友圈的經驗看，關於圖片點擊放大會涉及到這麼幾個難點：
-
朋友圈的圖片是1~9張，那麼該如何確保ViewPager能夠加載相等數量的圖片
-
點擊圖片是否應該跳轉到新的Activity
-
假如我點擊第一張圖片，在ViewPager滑倒第三張圖片，那麼點擊圖片退出時該如何確保View縮小後的位置與第三張圖片一致而非縮小到第一張圖片的位置。
-
ViewPager瀏覽的時候圖片放大和縮小如何實現
在官方的demo中，僅僅只有一張圖片的瀏覽，也就是說僅僅是展現了一張圖片縮放到全屏的方法，因此咱們只有去徹底的理解demo，才能繼續咱們的工程。
不過在真正實現以前，上面的問題咱們其實能夠回答幾個：
-
針對第一個問題，咱們能夠在點擊圖片的時候，把當前圖片所在的Item的圖片地址數組傳到adapter裏面而後通知更新
-
在咱們使用朋友圈的時候，能夠感受點擊圖片放大這個過程很是的快，而若是從新打開一個Activity，則須要通過那麼多的onCreate等生命期方法，那麼確定不會有這麼靈敏的反應，因此很明顯，這個ViewPager實際上是包含在朋友圈所在的窗口，只是平時隱藏起來而已。
-
針對第三個問題在稍後的闡述中回答。
-
第四個問題，我以爲想都不用想，直接上PhotoView這個庫。
原理篇
官方Demo詳解
事實上，官方的demo中的註釋是十分的清楚的，官方的Demo最主要依靠的是兩個東西：
- getGlobalVisibleRect
- ObjectAnimator
咱們都知道，一個View是能夠經過getLocationOnScreen或者**getLocationInWindow **獲得相對於整個屏幕/相對於父控件的xy位置信息。
而getGlobalVisibleRect/getLocalVisibleRect跟上面的這個其實差很少，不過不一樣的是，它獲得的不是xy位置信息，而是獲得指定View在屏幕中展現的矩形信息
簡單的描述就是前者獲得view的原點信息，後者獲得view的2D形狀信息。
官方的demo則是經過這個獲得兩個view的Rect：
- 點擊的view的rect（startRect）
- 最終放大後的view的rect（endRect）
獲得兩個view的矩形後，就能夠獲得雙方的縮放比。
經過這個比例，能夠作的事情就不少了，官方的demo則是經過這個比例，來計算出如下的參數：
- 小圖的x位置和大圖的x位置，獲得放大後View水平方向上應該偏移多少。
- 由於僅僅是view的縮放是不夠的，由於須要保證放大後的View處於屏幕中央，而不是說偏左偏右。
- 同理獲得垂直方向的偏移。
- 獲得水平方向的縮放比，也就是上面所說的縮放比。
- 同理獲得垂直方向的縮放比。
獲得這些參數後，就經過ObjectAnimator，操做的對象是隱藏在屏幕中的最終展現的View，經過監聽它的數值變化，從而不斷的更新展現的View的屬性，給人形成原來的view放大的錯覺。
或許文字說的有點枯燥，因此，直接上AE，弄出一個動圖，相信你們一看就明白：
在圖層的結構上以下動圖：
在點擊的以後，會發生以下動做：
總結起來就是：
- 點擊時，獲得被點擊的view的rect，和最終效果的rect
- 經過兩個rect計算縮放比率
- 動畫開始以前將最終展現的view設置爲可見
- 因爲ObjectAnimator開始的值是被點擊的view的rect值，因此最終展現的view會從被點擊的view的大小開始播放
- 隨着動畫進行，不斷的改變本身的x,y,scaleX,scaleY
- 從而達到讓人感受view從小變大的錯覺
代碼篇
Step 1- 佈局/MVP的方法添加
呼呼，又是AE，又是穹妹（手動斜眼）的，終於能夠開始弄咱們的代碼了。
從上面咱們知道，要實現這種僞放大效果，最重要的是獲得開始和結束兩個view的rect，而咱們因爲是使用viewpager，因此咱們穿值傳遞的是一個數組，這個數組就是當前Item所擁有的imageview的rect數組。
所以回到咱們的Activity，因爲咱們採用MVP模式，因此在View層增長一個方法：
public interface DynamicView {
...以前的方法不變
// 瀏覽圖片
void showPhoto(@NonNull ArrayList<String> photoAddress, @NonNull ArrayList<Rect> originViewBounds, int curSelectedPos);
}
複製代碼
一樣在P層也增長這個方法，這裏就不貼上來了。
接下啦到咱們朋友圈的佈局中，添加一個viewpager。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/photo_container" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/black" android:visibility="invisible">
<razerdp.friendcircle.widget.HackyViewPager android:id="@+id/photo_pager" android:layout_width="match_parent" android:layout_height="match_parent"/>
</RelativeLayout>
複製代碼
值得注意的是，由於微信朋友圈的大圖瀏覽是有背景（黑色）的，因此咱們外層用一個佈局包裹。
另外因爲咱們須要使用PhotoView，因此咱們的ViewPager將會使用PhotoView做者給出的解決方法：
HackyViewPager代碼以下（由於有LICENSE，因此就完整貼出）：
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
/** * Found at http://stackoverflow.com/questions/7814017/is-it-possible-to-disable-scrolling-on-a-viewpager. * Convenient way to temporarily disable ViewPager navigation while interacting with ImageView. * * Julia Zudikova */
/** * Hacky fix for Issue #4 and * http://code.google.com/p/android/issues/detail?id=18990 * <p/> * ScaleGestureDetector seems to mess up the touch events, which means that * ViewGroups which make use of onInterceptTouchEvent throw a lot of * IllegalArgumentException: pointerIndex out of range. * <p/> * There's not much I can do in my code for now, but we can mask the result by * just catching the problem and ignoring it. * * @author Chris Banes */
public class HackyViewPager extends ViewPager {
private boolean isLocked;
public HackyViewPager(Context context) {
super(context);
isLocked = false;
}
public HackyViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
isLocked = false;
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (!isLocked) {
try {
return super.onInterceptTouchEvent(ev);
} catch (IllegalArgumentException e) {
e.printStackTrace();
return false;
}
}
return false;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
return !isLocked && super.onTouchEvent(event);
}
public void toggleLock() {
isLocked = !isLocked;
}
public void setLocked(boolean isLocked) {
this.isLocked = isLocked;
}
public boolean isLocked() {
return isLocked;
}
}
複製代碼
在佈局弄好後，咱們將它include到咱們的朋友圈activity，因而目前的層次以下：
咱們的viewpager在listview的上方
Step 2 - ViewPager的adapter
adapter很明顯，就是爲了實現咱們的全部方法的，在adapter的設計中，咱們須要知道幾個地方：
-
ViewPager的adapter若是直接調用adapter.notifydatasetchanged是未必能刷新的，這個跟getItemPosition方法有關，因此若是想adapter刷新，就須要覆寫這個。
- 本例的adapter刷新不使用notifydatasetchanged，而是直接setAdapter，viewpager的setAdapter方法會觸發destroyItem，因此咱們直接使用setAdapter
-
adapter中，咱們只管視圖的渲染，無論事件的處理，事件的處理咱們經過接口拋到外部處理。
所以咱們的adapter將會這麼設計：
/** * Created by 大燈泡 on 2016/4/12. * 圖片瀏覽窗口的adapter */
public class PhotoBoswerPagerAdapter extends PagerAdapter {
private static final String TAG = "PhotoBoswerPagerAdapter";
//=============================================================datas
private ArrayList<String> photoAddress;
private ArrayList<Rect> originViewBounds;
//=============================================================bounds
private Context mContext;
private LayoutInflater mLayoutInflater;
public PhotoBoswerPagerAdapter(Context context) {
mContext = context;
mLayoutInflater = LayoutInflater.from(context);
photoAddress = new ArrayList<>();
originViewBounds = new ArrayList<>();
}
public void resetDatas(@NonNull ArrayList<String> newAddress, @NonNull ArrayList<Rect> newOriginViewBounds) throws IllegalArgumentException {
if (newAddress.size() != newOriginViewBounds.size() || newAddress.size() <= 0 ||
newOriginViewBounds.size() <= 0) {
throw new IllegalArgumentException("圖片地址和圖片的位置緩存不對等或某一個爲空");
}
photoAddress.clear();
originViewBounds.clear();
photoAddress.addAll(newAddress);
originViewBounds.addAll(newOriginViewBounds);
}
@Override
public int getCount() {
return photoAddress.size();
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
return null;
}
int[] pos = new int[1];
@Override
public void setPrimaryItem(ViewGroup container, int position, Object object) {
super.setPrimaryItem(container, position, object);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
//=============================================================點擊消失的interface
private OnPhotoViewClickListener mOnPhotoViewClickListener;
public OnPhotoViewClickListener getOnPhotoViewClickListener() {
return mOnPhotoViewClickListener;
}
public void setOnPhotoViewClickListener(OnPhotoViewClickListener onPhotoViewClickListener) {
mOnPhotoViewClickListener = onPhotoViewClickListener;
}
public interface OnPhotoViewClickListener {
void onPhotoViewClick(View view, Rect originBound, int curPos);
}
}
複製代碼
在adapter中，咱們存放着這些參數：
- photoAddress：存放圖片地址的數組
- originViewBounds：點擊時所處item的全部imageview的rect
而後還有咱們內部定義的接口：OnPhotoViewClickListener，這個接口在點擊Viewpager裏面的PhotoView時會觸發。
Step 3 - PhotoPagerManager
在adapter初步結構設計後，咱們暫時先無論，接下來咱們須要處理的就是縮放動畫和點擊的事件處理。
因爲咱們的Activity做爲MVP的View，代碼量已經比較多了，因此咱們將動畫的實現和點擊事件的處理封裝到另外一個類裏，委託它進行操做。
在設計這個類以前，咱們須要肯定一下須要的委託管理的東西：
- adapter：負責處理adapter內部PhotoView點擊時回調的動做
- pager：須要pager的setAdapter來進行刷新以及setCurrentItem來定位到咱們點擊的圖片位於圖片序列的位置
- container：就是佈局裏包裹着ViewPager的RelativeLayout，咱們經過它作一個點擊消逝時的透明度漸變更畫，同時endRect也是依靠它來獲得
由此，咱們初步設計如下結構：
/** * Created by 大燈泡 on 2016/4/12. * 相冊展現的管理類 */
public class PhotoPagerManager implements PhotoBoswerPagerAdapter.OnPhotoViewClickListener {
private Context mContext;
private PhotoBoswerPagerAdapter adapter;
private HackyViewPager pager;
private Rect finalBounds;
private Point globalOffset;
private View container;
//私有構造器
private PhotoPagerManager(Context context, HackyViewPager pager, View container) {
if (container != null) {
finalBounds = new Rect();
globalOffset = new Point();
this.mContext = context;
this.container = container;
this.pager = pager;
adapter = new PhotoBoswerPagerAdapter(context);
adapter.setOnPhotoViewClickListener(this);
}
else {
throw new IllegalArgumentException("PhotoPagerManager >>> container不能爲空哦");
}
}
//靜態工廠
public static PhotoPagerManager create(Context context, HackyViewPager pager, View container) {
return new PhotoPagerManager(context, pager, container);
}
//共有調用方法，傳入圖片地址和view的可見矩形數組
public void showPhoto( @NonNull ArrayList<String> photoAddress, @NonNull ArrayList<Rect> originViewBounds, int curSelectedPos) {
}
//當前正在進行的動畫，若是動畫沒展現完，就將其取消以執行下一個動畫
private AnimatorSet curAnimator;
//私有showPhoto處理
private void showPhotoPager(@NonNull ArrayList<Rect> originViewBounds, int curSelectedPos) {
}
//pager的PhotoView點擊回調，用於執行消失時的縮小動畫
@Override
public void onPhotoViewClick(View view, Rect originBound, int curPos) {
}
//計算縮放比率
private float calculateRatio(Rect startBounds, Rect finalBounds) {
}
//銷燬
public void destroy() {
adapter.destroy();
mContext = null;
adapter = null;
pager = null;
finalBounds = null;
globalOffset = null;
container = null;
}
}
複製代碼
能夠看得出，咱們的重頭戲全在showPhoto裏面
在私有構造器裏面咱們將須要的成員進行賦值，同時adapter須要實現咱們在第二步定義的接口。
接下來咱們補充共有的showPhoto方法：
public void showPhoto( @NonNull ArrayList<String> photoAddress, @NonNull ArrayList<Rect> originViewBounds, int curSelectedPos) {
adapter.resetDatas(photoAddress, originViewBounds);
pager.setAdapter(adapter);
pager.setCurrentItem(curSelectedPos);
pager.setLocked(photoAddress.size() == 1);
container.getGlobalVisibleRect(finalBounds, globalOffset);
showPhotoPager(originViewBounds, curSelectedPos);
}
複製代碼
每次調用show方法咱們都須要刷新adapter的數據，而後使用setAdapter來進行刷新。
接下來判斷傳進來的圖片是否只有一張，若是隻有一張，就不容許viewpager滑動，setLocked方法是PhotoView做者給出的解決方案帶有的，其原理是在Viewpager的onInterceptTouchEvent裏經過locked來決定是否攔截事件。
container.getGlobalVisibleRect(finalBounds, globalOffset);這個在上面的解釋裏已經有，這裏只是直接copy官方demo代碼而已。
最後調用私有方法：showPhotoPager
private void showPhotoPager(@NonNull ArrayList<Rect> originViewBounds, int curSelectedPos) {
Rect startBounds = originViewBounds.get(curSelectedPos);
startBounds.offset(-globalOffset.x, -globalOffset.y);
finalBounds.offset(-globalOffset.x, -globalOffset.y);
float ratio = calculateRatio(startBounds, finalBounds);
pager.setPivotX(0);
pager.setPivotY(0);
container.setVisibility(View.VISIBLE);
container.setAlpha(1.0f);
final AnimatorSet set = new AnimatorSet();
set.play(ObjectAnimator.ofFloat(pager, View.X, startBounds.left, finalBounds.left))
.with(ObjectAnimator.ofFloat(pager, View.Y, startBounds.top, finalBounds.top))
.with(ObjectAnimator.ofFloat(pager, View.SCALE_X, ratio, 1f))
.with(ObjectAnimator.ofFloat(pager, View.SCALE_Y, ratio, 1f));
set.setDuration(300);
set.setInterpolator(new DecelerateInterpolator());
set.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
curAnimator = set;
}
@Override
public void onAnimationEnd(Animator animation) {
curAnimator = null;
}
@Override
public void onAnimationCancel(Animator animation) {
curAnimator = null;
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
set.start();
}
複製代碼
這裏跟官方的代碼基本一致，由於官方代碼有註釋，因此這裏就不詳細闡述了。
不過值得留意的是，在動畫執行以前必需要將container的alpha設回1，由於咱們在退出動畫裏將它設置爲0的。
同理，在PhotoView點擊回調裏，咱們也寫出差很少的代碼：
@Override
public void onPhotoViewClick(View view, Rect originBound, int curPos) {
//若是展開動畫沒有展現徹底就關閉，那麼就中止展開動畫進而執行退出動畫
if (curAnimator != null) {
curAnimator.cancel();
}
container.getGlobalVisibleRect(finalBounds, globalOffset);
originBound.offset(-globalOffset.x, -globalOffset.y);
finalBounds.offset(-globalOffset.x, -globalOffset.y);
float ratio = calculateRatio(originBound, finalBounds);
pager.setPivotX(0);
pager.setPivotY(0);
final AnimatorSet set = new AnimatorSet();
set.play(ObjectAnimator.ofFloat(pager, View.X, originBound.left))
.with(ObjectAnimator.ofFloat(pager, View.Y, originBound.top))
.with(ObjectAnimator.ofFloat(pager, View.SCALE_X, 1f, ratio))
.with(ObjectAnimator.ofFloat(pager, View.SCALE_Y, 1f, ratio))
.with(ObjectAnimator.ofFloat(container, View.ALPHA, 1.0f, 0.0f));
set.setDuration(300);
set.setInterpolator(new DecelerateInterpolator());
set.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
curAnimator = set;
}
@Override
public void onAnimationEnd(Animator animation) {
curAnimator = null;
container.clearAnimation();
container.setVisibility(View.INVISIBLE);
}
@Override
public void onAnimationCancel(Animator animation) {
curAnimator = null;
container.clearAnimation();
container.setVisibility(View.INVISIBLE);
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
set.start();
}
複製代碼
在退出的動畫裏，咱們須要將SCALE_X和SCALE_Y的動畫起始值和目標值替換
- 在放大動畫裏，咱們是從小->大，即計算出來的比率->1f
- 在縮小動畫則相反，從大到小
最後補全，哦，不，是copy官方的計算比率的方法：
private float calculateRatio(Rect startBounds, Rect finalBounds) {
float ratio;
if ((float) finalBounds.width() / finalBounds.height() > (float) startBounds.width() / startBounds.height()) {
// Extend start bounds horizontally
ratio = (float) startBounds.height() / finalBounds.height();
float startWidth = ratio * finalBounds.width();
float deltaWidth = (startWidth - startBounds.width()) / 2;
startBounds.left -= deltaWidth;
startBounds.right += deltaWidth;
}
else {
// Extend start bounds vertically
ratio = (float) startBounds.width() / finalBounds.width();
float startHeight = ratio * finalBounds.height();
float deltaHeight = (startHeight - startBounds.height()) / 2;
startBounds.top -= deltaHeight;
startBounds.bottom += deltaHeight;
}
return ratio;
}
複製代碼
官方的計算方法是這樣的：
- 比較最終view的寬高比和起始view的寬高比
- 不管是那種，都須要計算出差值，這個差值用來定位最終view動畫播放時的起始位置，讓其保證跟起始view一致
在這個類完成後，咱們在Activity裏僅僅須要兩句話調用：
/** * Created by 大燈泡 on 2016/2/25. * 朋友圈demo窗口 */
public class FriendCircleDemoActivity extends FriendCircleBaseActivity implements DynamicView, View.OnClickListener, OnSoftKeyboardChangeListener {
... 成員變量略
//圖片瀏覽的pager manager
private PhotoPagerManager mPhotoPagerManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
...略
initView();
...略
}
private void initView() {
...各類findViewById略
//初始化咱們的manager
mPhotoPagerManager = PhotoPagerManager.create(this, (HackyViewPager) findViewById(R.id.photo_pager),
findViewById(R.id.photo_container));
}
...其餘方法略
@Override
public void showPhoto( @NonNull ArrayList<String> photoAddress, @NonNull ArrayList<Rect> originViewBounds, int curSelectedPos) {
//事件委託給manager
mPhotoPagerManager.showPhoto(photoAddress, originViewBounds, curSelectedPos);
}
}
複製代碼
Step 4 - adapter代碼補全
實現完manager後，咱們就補全咱們的adapter代碼
在adapter裏面，咱們主要關注兩個方法：
- instantiateItem：初始化view的時候回調
- setPrimaryItem：滑動時回調當前展現着的view
其餘方法都是常規方法，就不展現了
初始化的時候，咱們的代碼很是簡單，new一個，add，完。。。
@Override
public Object instantiateItem(ViewGroup container, int position) {
PhotoView photoView=new PhotoView(mContext);
Glide.with(mContext).load(photoAddress.get(position)).into(photoView);
container.addView(photoView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
return photoView;
}
複製代碼
在setPrimaryItem中，咱們爲photoView設置回調：
int currentPos;
@Override
public void setPrimaryItem(ViewGroup container, int position, Object object) {
super.setPrimaryItem(container, position, object);
currentPos=position;
if (object instanceof PhotoView) {
PhotoView photoView = (PhotoView) object;
if (photoView.getOnViewTapListener() == null) {
photoView.setOnViewTapListener(new PhotoViewAttacher.OnViewTapListener() {
@Override
public void onViewTap(View view, float x, float y) {
if (mOnPhotoViewClickListener != null) {
mOnPhotoViewClickListener.onPhotoViewClick(view, originViewBounds.get(currentPos), currentPos);
}
}
});
}
}
}
複製代碼
在這裏，咱們留意到在回調裏咱們傳入的rect就是外部傳進來起始View的rect組，這裏就回答了咱們疑點中的第三個問題：
點擊某張圖片，滑動到其餘圖片時，退出的縮小動畫如何縮小到對應的起始View中
咱們的解決方法就是，把那個View的rect扔給咱們的manager讓他計算，就行了。
Step 5 - Item裏使用
在目前的項目裏，事實上也是在微信朋友圈裏，圖片永遠都是0~9，在咱們的項目中，由於ListView的Adapter高度抽象化，因此咱們能夠很輕鬆的在ViewHolder裏處理
在ItemWithImg.java中，咱們針對GridView的onItemClick進行處理：
public class ItemWithImg extends BaseItemDelegate implements AdapterView.OnItemClickListener {
private static final String TAG = "ItemWithImg";
private NoScrollGridView mNoScrollGridView;
private GridViewAdapter mGridViewAdapter;
private ArrayList<String> mUrls = new ArrayList<>();
private ArrayList<Rect> mRects = new ArrayList<>();
...略
@Override
protected void bindData(int position, @NonNull View v, @NonNull MomentsInfo data, int dynamicType) {
if (data.content.imgurl == null || data.content.imgurl.size() == 0 || mNoScrollGridView == null) return;
mUrls.clear();
mUrls.addAll(data.content.imgurl);
...數據綁定
}
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
final int childCount = parent.getChildCount();
mRects.clear();
try {
if (childCount >= 0) {
for (int i = 0; i < childCount; i++) {
View v = parent.getChildAt(i);
Rect bound = new Rect();
v.getGlobalVisibleRect(bound);
mRects.add(bound);
}
}
} catch (NullPointerException e) {
Log.e(TAG, "view可能爲空哦");
}
getPresenter().shoPhoto(mUrls, mRects, position);
}
}
複製代碼
這裏咱們須要留意兩個地方：
- 在bindData裏面，由於這個是一個抽象化的ViewHolder接口，因此事實上會在ListView的getView中不斷的調用，而咱們的url的arrayList是當前類的成員變量，因此咱們每次都須要將其clear掉，不然數據只會累加，這樣形成的就是圖片數量與view的rect數組不對等。
- ItemClick裏面，咱們須要對parent拿到的view進行NPE捕獲，不然掛掉就很差玩了。
到這裏，咱們的工做就完成了。
問題
花了那麼多時間，終於把這個效果完成了，事實上最麻煩的東西都封到了manager裏面，理論上來講要遷移到您的項目中也是很是簡單的。
但目前來講，咱們僅僅是初步實現了，其實有一些小問題仍是存在的：
- ViewPager的adapter裏面的view每次都是new，感受有點浪費
- 因爲上面的那個問題，致使假如咱們在大於三張圖或者分別點擊不一樣的item時，放大動畫會看不到，必須在載入一次圖片後再次觸發纔會有。
- 不知道您有沒有發現，其實咱們缺乏一個指示器，畢竟微信朋友圈在ViewPager下方但是有幾個小點點的
雖然問題不是很大，但咱們也有修復的理由對吧。
因此，在下一篇，咱們將會針對這三個問題進行處理，以及關於PhotoView在ViewPager裏面爆出的 "ImageView no longer exists. You should not use this PhotoViewAttacher any more." 錯誤從而致使PhotoView的點擊事件無響應的處理方法。
敬請期待-V-
- 1. JPPhotoBrowserDemo--微信朋友圈瀏覽圖片
- 2. 圖片瀏覽器
- 3. 瀏覽器圖片預覽
- 4. Android 高仿微信發朋友圈瀏覽圖片效果
- 5. WPF瀏覽圖片
- 6. gallery 瀏覽圖片
- 7. 06-圖片瀏覽器
- 8. 【UIKit】圖片瀏覽器
- 9. 網絡圖片瀏覽器
- 10. android 圖片瀏覽器
- 更多相關文章...
- • Opera 瀏覽器 - 瀏覽器信息
- • Netscape 瀏覽器 - 瀏覽器信息
- • Docker容器實戰(一) - 封神Server端技術
- • RxJava操作符（一）Creating Observables
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. JPPhotoBrowserDemo--微信朋友圈瀏覽圖片
- 2. 圖片瀏覽器
- 3. 瀏覽器圖片預覽
- 4. Android 高仿微信發朋友圈瀏覽圖片效果
- 5. WPF瀏覽圖片
- 6. gallery 瀏覽圖片
- 7. 06-圖片瀏覽器
- 8. 【UIKit】圖片瀏覽器
- 9. 網絡圖片瀏覽器
- 10. android 圖片瀏覽器