有段時間閒來沒事的時候，想研究一下微信朋友圈的圖片點擊效果，一開始的感覺是用跳轉activity去實現。但是後面爲了封裝而好用。於是自己重新寫了一個類，封裝其它們。
我是準備用PopupWindow來做整體框架；簡單來說，就是把涉及到的ViewPager，圈圈等都封裝到一個類裏面。
點擊圖片，會放大至全屏，移動到中心。因爲圖片是在listView裏面的。如果針對原ImageView動畫的話，會被其他控件遮擋。（嘗試去寫就會發現）。所以需要在PopupWindow新建一個原ImageView，去動畫。（這裏應該有其他更好的辦法，如果有高手請提示一下！！）
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import java.util.ArrayList;
public class PhotoBrowser {
private int[] old_LeftTop = new int[2]; //初始 原圖片 位置（相對Windows）
private final int ANIM_DURATION=300; //動畫時間
private final int QUAN_HW=6; //圈圈大小
private final int QUAN_INTERVAL=2; //圈圈之間的間隔的一半
private ImageView srcImage; //發生事件的 原圖片
private ArrayList imageUrls; //圖片url集合
private int photo_index;// 原圖片 索引
private PopupWindow window; //彈出窗口
private LinearLayout linQuanQuan; // 圈圈根佈局
private ViewPager newView; //新的 ViewPager
private ImageView oldView; //複製的原圖片
public PhotoBrowser(ImageView srcImage,int photo_index, ArrayList imageUrls) {
super();
this.srcImage = srcImage;
this.photo_index=photo_index;
this.imageUrls = imageUrls;
}
public void setSrcImage(ImageView srcImage) {
this.srcImage = srcImage;
}
public void setPhotoIndex(int photo_index) {
this.photo_index = photo_index;
}
public void setImageUrls(ArrayList imageUrls) {
this.imageUrls = imageUrls;
}
public void show(){
// 顯示圖片
FrameLayout popView=new FrameLayout(srcImage.getContext());
popView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
popView.addView(createSrcImage());
popView.addView(createViewPager());
if(imageUrls.size()>1){
popView.addView(createPoints());
}
window = new PopupWindow(popView, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
window.setOnDismissListener(new OnDismissListener() {
@Override
public void onDismiss() {
srcImage=null;
imageUrls=null;
linQuanQuan=null;
oldView=null;
newView=null;
window=null;
}
});
window.setBackgroundDrawable(srcImage.getContext().getResources().getDrawable(android.R.color.black));
window.setAnimationStyle(0);
window.setFocusable(true);
window.update();
window.showAtLocation(srcImage, Gravity.CENTER, 0, 0);
animZoomBig();
}
private ImageView createSrcImage(){
oldView = new ImageView(srcImage.getContext());
srcImage.getLocationOnScreen(old_LeftTop);
FrameLayout.LayoutParams old_params=new FrameLayout.LayoutParams(srcImage.getWidth(), srcImage.getHeight());
old_params.leftMargin=old_LeftTop[0];
old_params.topMargin=old_LeftTop[1];
oldView.setLayoutParams(old_params);
oldView.setImageDrawable(srcImage.getDrawable());
return oldView;
}
private ViewPager createViewPager(){
newView = new HackyViewPager(srcImage.getContext());
FrameLayout.LayoutParams new_params=new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);
newView.setLayoutParams(new_params);
newView.setAdapter(new PhotoAdapter());
newView.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int positioin) {
refreshQuanQuan(positioin);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
newView.setVisibility(View.GONE);
return newView;
}
private View createPoints(){
linQuanQuan = new LinearLayout(srcImage.getContext());
FrameLayout.LayoutParams params=new FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT);
params.gravity=Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL;
params.bottomMargin=20;
linQuanQuan.setLayoutParams(params);
linQuanQuan.setVisibility(View.GONE);
addQuanQuan(imageUrls.size());
return linQuanQuan;
}
private void addQuanQuan(int size) {
linQuanQuan.removeAllViews();
float density=srcImage.getContext().getResources().getDisplayMetrics().density;
for (int i = 0; i < size; i++) {
ImageView imageView = new ImageView(srcImage.getContext());
LinearLayout.LayoutParams lParams = new LinearLayout.LayoutParams((int)(QUAN_HW*density), (int)(QUAN_HW*density));
lParams.leftMargin = (int)(QUAN_INTERVAL*density);
lParams.rightMargin = (int)(QUAN_INTERVAL*density);
imageView.setLayoutParams(lParams);
imageView.setBackgroundResource(android.R.color.darker_gray);
linQuanQuan.addView(imageView);
}
}
private void refreshQuanQuan(int positioin) {
int count = linQuanQuan.getChildCount();
for (int i = 0; i < count; i++) {
if (i == positioin) {
linQuanQuan.getChildAt(i).setBackgroundResource(
android.R.color.white);
} else {
linQuanQuan.getChildAt(i).setBackgroundResource(
android.R.color.darker_gray);
}
}
}
private void animZoomBig(){
int screenW=srcImage.getContext().getResources().getDisplayMetrics().widthPixels;
int screenH=srcImage.getContext().getResources().getDisplayMetrics().heightPixels;
int viewW=srcImage.getWidth();
int viewH=srcImage.getHeight();
float scaleW=((float)screenW)/viewW;
float scaleH=((float)screenH)/viewH;
float scale=scaleW<=scaleH?scaleW:scaleH; //選擇小的
int[] new_LeftTop=new int[2];
new_LeftTop[0]=(int) (screenW-viewW*scale)/2;
new_LeftTop[1]=(int) (screenH-viewH*scale)/2;
//放大動畫
AnimationSet animSet=new AnimationSet(true);
ScaleAnimation scaleAnim=new ScaleAnimation(1.0f, scale, 1.0f, scale, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
TranslateAnimation tranAnim=new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f, Animation.ABSOLUTE, new_LeftTop[0]-old_LeftTop[0], Animation.RELATIVE_TO_SELF, 0f, Animation.ABSOLUTE, new_LeftTop[1]-old_LeftTop[1]);
animSet.addAnimation(scaleAnim);
animSet.addAnimation(tranAnim);
animSet.setInterpolator(new DecelerateInterpolator());
animSet.setDuration(ANIM_DURATION);
animSet.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
oldView.setVisibility(View.GONE);
newView.setVisibility(View.VISIBLE);
linQuanQuan.setVisibility(View.VISIBLE);
newView.setCurrentItem(photo_index);
if(photo_index==0){
refreshQuanQuan(0);
}
}
});
oldView.startAnimation(animSet);
}
class PhotoAdapter extends PagerAdapter {
@Override
public int getCount() {
return imageUrls==null ? 0:imageUrls.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView((View)object);
}
@Override
public Object instantiateItem(View container, int position) {
PhotoView photoView = new PhotoView(srcImage.getContext());
FrameLayout.LayoutParams params=new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);
params.gravity=Gravity.CENTER;
photoView.setLayoutParams(params);
if(position==photo_index){
photoView.setImageDrawable(srcImage.getDrawable());
}else{
//通過url獲取圖片
photoView.setImageUrl(imageUrls.get(position));
}
photoView.setOnPhotoTapListener(new OnPhotoTapListener() {
@Override
public void onPhotoTap(View view, float x, float y) {
window.dismiss();
}
});
((ViewPager) container).addView(photoView);
return photoView;
}
}
class HackyViewPager extends ViewPager{
public HackyViewPager(Context context) {
super(context);
}
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
try {
return super.dispatchTouchEvent(ev);
} catch (Exception e) {
return false;
}
}
}
}
上面代碼，用到的PhotoView是github上面的。並且只是簡單實現了 放大移動效果， 而沒有實現 縮小返回效果。當然具體還有許多細節沒有做好。大家多多指教~~~~~