Android 实现九宫格、点击图片放大全屏浏览等

项目GitHub地址https://github.com/tikeyc/TNinePlaceGridView_Android https://github.com/tikeyc/TikeycAndroid
玩Android不久，根据iOS实现思路https://github.com/tikeyc/TNinePlaceGridView
封装了一个。详情见TNinePlaceGridView

说说我的实现思路：

逐渐掌握了Android开发套路，是时候自己去封装一些东西了。网上看了一些例子，感觉不是我想要的那种，我希望是直接导入就用，没有Activity，没有xml布局文件，全代码创建那种，使用者用起来直接用到一个类或者两个类就OK的那种。故此花了一点时间封装了这么一个九宫格：
需要有这么一个控件，这个控件是一个图片控件TScallImageView，点击这个图片会从图片位置开始放大至全屏TImageListBgView，点击后全屏缩小到原来位置，且放大缩小过程背景透明可以看见当前UI界面;这个全屏大部分人可能是start一个Activity（这样的话还得再功能清单文件添加该Activity，这不是我想要的）,这里我直接添加到了window上;这些代码逻辑主要都写在TImageListBgView类中。

这里需要获取图片相对于window的位置：这里自定义了一个记录位置信息的类TRect

package com.tikeyc.tikeycandroid.custom.TNinePlaceGridView;/*** Created by public1 on 2017/5/23.*/public class TRect {private int left;private int top;private int width;private int height;public TRect(int left, int top, int width, int height) {this.left = left;this.top = top;this.width = width;this.height = height;}public int getLeft() {return left;}public int getTop() {return top;}public int getWidth() {return width;}public int getHeight() {return height;}public void setLeft(int left) {this.left = left;}public void setTop(int top) {this.top = top;}public void setWidth(int width) {this.width = width;}public void setHeight(int height) {this.height = height;}@Overridepublic String toString() {return "TRect{" +"left=" + left +", top=" + top +", width=" + width +", height=" + height +'}';}
}

图片控件：TScallImageView

该控件可以xml中创建也可代码创建，不过在调用其showImageToWindow()方法之前,需设置一下几个属性值：其中imageId及imageIds可以是图片URL也可以是图片id值。

    public ViewGroup ninePlaceGridView;//外部设置public Object imageId;//外部设置public List<Object> imageIds;//外部设置public int currentIndex;//外部设置

package com.tikeyc.tnineplacegridviewlibrary.TNinePlaceGridView;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;import java.util.ArrayList;
import java.util.List;/*** Created by public1 on 2017/5/19.*/public class TScallImageView extends android.support.v7.widget.AppCompatImageView {public static final int STATE_NORMAL = 0;public static final int STATE_TRANSFORM_IN = 1;public static final int STATE_TRANSFORM_OUT = 2;public ViewGroup ninePlaceGridView;//外部设置private TRect originalRect;//得到的第一个图片相对于window的位置private List<TRect> originalRects;//得到的第所有图片相对于window的位置public Object imageId;//外部设置public List<Object> imageIds;//外部设置public int currentIndex;//外部设置public TImageListBgView imageListBgView;public TScallImageView(Context context) {super(context);init();}public TScallImageView(Context context, AttributeSet attrs) {super(context, attrs);init();}public TScallImageView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);init();}private void init() {setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View view) {showImageToWindow();}});}/**获取每个图片相对于window的位置* @return*/private List<TRect> getOriginalRects() {List<TRect> originalRects = new ArrayList<TRect>();int count = ninePlaceGridView.getChildCount();for (int i = 0; i < count; i++) {if (ninePlaceGridView.getChildAt(i) instanceof TScallImageView) {TScallImageView scallImageView = (TScallImageView) ninePlaceGridView.getChildAt(i);int[] outLocation = new int[2];scallImageView.getLocationInWindow(outLocation);Log.e("TAG","outLocation[0]:" + outLocation[0] + "outLocation[1]:" + outLocation[1]);TRect tRect = new TRect(outLocation[0],outLocation[1],scallImageView.getWidth(),scallImageView.getHeight());originalRects.add(tRect);} else {continue;}}this.originalRects = originalRects;return originalRects;}public void showImageToWindow() {int[] outLocation = new int[2];getLocationInWindow(outLocation);
//        originalRect = new TRect(getLeft(),getTop(),getWidth(),getHeight());
//        originalRect = new TRect(outLocation[0],outLocation[1] - TKCUtils.getStatusBarHeight(getContext()),getWidth(),getHeight());originalRect = new TRect(outLocation[0],outLocation[1],getWidth(),getHeight());imageListBgView = new TImageListBgView(getContext(),originalRect,this.imageId,this.imageIds,currentIndex);imageListBgView.imageId = imageId;imageListBgView.originalRects = getOriginalRects();imageListBgView.startTransform(TScallImageView.STATE_TRANSFORM_IN);}}

TImageListBgView：图片放大缩小动画，横向滑动浏览等逻辑处理类

点击手机的返回按键，缩小图片：这里需要注意一点，在window上添加视图后点击手机的返回按键，不会响应当前的Activity，因此需要在添加在window上的视图TImageListBgView内重写public boolean dispatchKeyEvent(KeyEvent event)方法来实现：

/**因此View添加在Window，点击手机返回按钮无法响应，* 重写此方法可以处理点击手机返回的逻辑处理，缩小图片到原位置* @param event* @return*/@Overridepublic boolean dispatchKeyEvent(KeyEvent event) {//2-4if (event.getKeyCode() == KeyEvent.KEYCODE_BACK) {if (mState == TScallImageView.STATE_TRANSFORM_IN) {startTransform(TScallImageView.STATE_TRANSFORM_OUT);return true;}}return super.dispatchKeyEvent(event);}

package com.tikeyc.tnineplacegridviewlibrary.TNinePlaceGridView;import android.animation.Animator;
import android.animation.PropertyValuesHolder;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.graphics.PixelFormat;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;import com.squareup.picasso.Picasso;import java.util.List;/*** Created by public1 on 2017/5/23.*/public class TImageListBgView extends RelativeLayout {public int mState = TScallImageView.STATE_NORMAL;private TRect originalRect;public List<TRect> originalRects;public Object imageId;public List<Object> imageIds;public int currentIndex;private ImageView animationIV;private LinearLayout gridViewBgView;private GridView gridView;private TPageHorizatalScrollView horizontalScrollView;private TPageControl pageControl;public TImageListBgView(Context context, TRect originalRect,Object imageId,List<Object> imageIds,int currentIndex) {super(context);this.originalRect = originalRect;this.imageId = imageId;this.imageIds = imageIds;this.currentIndex = currentIndex;setBackgroundColor(Color.TRANSPARENT);initSubViews();}public TImageListBgView(Context context) {super(context);}public TImageListBgView(Context context, AttributeSet attrs) {super(context, attrs);}public TImageListBgView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}/**因此View添加在Window，点击手机返回按钮无法响应，* 重写此方法可以处理点击手机返回的逻辑处理，缩小图片到原位置* @param event* @return*/@Overridepublic boolean dispatchKeyEvent(KeyEvent event) {//2-4if (event.getKeyCode() == KeyEvent.KEYCODE_BACK) {if (mState == TScallImageView.STATE_TRANSFORM_IN) {startTransform(TScallImageView.STATE_TRANSFORM_OUT);return true;}}return super.dispatchKeyEvent(event);}@Overridepublic boolean dispatchKeyEventPreIme(KeyEvent event) {//1-3return super.dispatchKeyEventPreIme(event);}private WindowManager windowManager;private void initSubViews() {//
        initImageListBgView();//
        initAnimationIV();//
        initHorizontalScrollView();//
        initGridView();//
        initPageControl();}private void initImageListBgView() {Activity activity = (Activity) getContext();windowManager = activity.getWindowManager();WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();layoutParams.width = TRect.getScreenWidth(getContext());layoutParams.height = TRect.getScreenHeight(getContext());//FLAG_LAYOUT_IN_SCREENlayoutParams.flags = WindowManager.LayoutParams.FLAG_FULLSCREEN;layoutParams.format = PixelFormat.RGBA_8888;//让背景透明，放大过程可以看到当前界面layoutParams.verticalMargin = 0;windowManager.addView(this,layoutParams);}private void initAnimationIV() {animationIV = new ImageView(getContext());
//        imageView.setBackgroundColor(Color.RED);
        animationIV.setScaleType(ImageView.ScaleType.FIT_CENTER);LayoutParams params = new LayoutParams(originalRect.getWidth(),originalRect.getHeight());params.leftMargin = originalRect.getLeft();params.topMargin = originalRect.getTop();addView(animationIV,params);
//        Picasso.with(getContext()).load("http://ww2.sinaimg.cn/mw690/9e6995c9gw1f2uu70bzohj209q06g3yw.jpg").into(animationIV);if (imageId instanceof Integer) {animationIV.setImageResource((Integer) imageId);} else {Picasso.with(getContext()).load((String) imageId).into(animationIV);}}private void initHorizontalScrollView() {horizontalScrollView = new TPageHorizatalScrollView(getContext());LayoutParams hsLayoutParams = new LayoutParams(TRect.getScreenWidth(getContext()),TRect.getScreenHeight(getContext()));hsLayoutParams.leftMargin = 0;hsLayoutParams.topMargin = 0;addView(horizontalScrollView,hsLayoutParams);horizontalScrollView.mBaseScrollX = currentIndex*TRect.getScreenWidth(getContext());horizontalScrollView.setOnScrollToIndexListen(new TPageHorizatalScrollView.OnScrollToIndexListen() {@Overridepublic void scrollToIndex(int index) {currentIndex = index;if (currentIndex >= imageIds.size()){currentIndex = imageIds.size() - 1;} else if (currentIndex < 0) {currentIndex = 0;}Log.e("TAG","currentIndex" + currentIndex);if (imageId instanceof Integer) {animationIV.setImageResource((Integer) imageIds.get(currentIndex));} else {Picasso.with(getContext()).load((String) imageIds.get(currentIndex)).into(animationIV);}originalRect = originalRects.get(currentIndex);pageControl.setCurrentPage(currentIndex);}});int numColumns = imageIds.size();gridViewBgView = new LinearLayout(getContext());LinearLayout.LayoutParams testParams = new LinearLayout.LayoutParams(TRect.getScreenWidth(getContext())*numColumns,TRect.getScreenHeight(getContext()));horizontalScrollView.addView(gridViewBgView,testParams);}private void initGridView() {int numColumns = imageIds.size();//
        gridView = new GridView(getContext());gridView.setNumColumns(numColumns);gridView.setColumnWidth(TRect.getScreenWidth(getContext()));LinearLayout.LayoutParams gridViewLayoutParams = new LinearLayout.LayoutParams(TRect.getScreenWidth(getContext())*numColumns,TRect.getScreenHeight(getContext()));gridViewLayoutParams.leftMargin = 0;gridViewLayoutParams.topMargin = 0;gridViewBgView.addView(gridView,gridViewLayoutParams);final TImageGridViewAdapter adapter = new TImageGridViewAdapter(getContext());adapter.imageIds = this.imageIds;gridView.setAdapter(adapter);adapter.setOnItemClickListener(new TImageGridViewAdapter.OnItemClickListener() {@Overridepublic void onItemClick(int i, View view) {startTransform(TScallImageView.STATE_TRANSFORM_OUT);}});//        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
//            @Override
//            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
//                startTransform(TScallImageView.STATE_TRANSFORM_OUT);
//            }
//        });
    }private void initPageControl() {pageControl = new TPageControl(getContext(),null);pageControl.setPageNumber(imageIds.size());pageControl.setSelectedColor(Color.RED);LayoutParams layoutParams = new LayoutParams(TRect.getScreenWidth(getContext()),40);layoutParams.topMargin = TRect.getScreenHeight(getContext()) - 100;addView(pageControl,layoutParams);}/**放大缩小动画* @param state*/public void startTransform(final int state) {final int duration = 300;ValueAnimator valueAnimator = new ValueAnimator();valueAnimator.setDuration(duration);valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());if (state == TScallImageView.STATE_TRANSFORM_IN) {setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);mState = TScallImageView.STATE_TRANSFORM_IN;gridViewBgView.setVisibility(INVISIBLE);pageControl.setVisibility(INVISIBLE);
//            PropertyValuesHolder scaleHolder = PropertyValuesHolder.ofFloat("scale", mTransfrom.startScale, mTransfrom.endScale);PropertyValuesHolder leftHolder = PropertyValuesHolder.ofFloat("left",originalRect.getLeft(), 0);PropertyValuesHolder topHolder = PropertyValuesHolder.ofFloat("top", originalRect.getTop(), 0);PropertyValuesHolder widthHolder = PropertyValuesHolder.ofFloat("width", originalRect.getWidth(), TRect.getScreenWidth(getContext()));PropertyValuesHolder heightHolder = PropertyValuesHolder.ofFloat("height", originalRect.getHeight(), TRect.getScreenHeight(getContext()));PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofInt("alpha", 0, 255);valueAnimator.setValues(leftHolder, topHolder, widthHolder, heightHolder, alphaHolder);} else {
//            setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN);
            gridViewBgView.setVisibility(INVISIBLE);pageControl.setVisibility(INVISIBLE);animationIV.setVisibility(VISIBLE);setBackgroundColor(Color.TRANSPARENT);mState = TScallImageView.STATE_TRANSFORM_OUT;
//            PropertyValuesHolder scaleHolder = PropertyValuesHolder.ofFloat("scale", mTransfrom.endScale, mTransfrom.startScale);PropertyValuesHolder leftHolder = PropertyValuesHolder.ofFloat("left", animationIV.getLeft(), originalRect.getLeft());PropertyValuesHolder topHolder = PropertyValuesHolder.ofFloat("top", animationIV.getTop(), originalRect.getTop());PropertyValuesHolder widthHolder = PropertyValuesHolder.ofFloat("width", animationIV.getWidth(), originalRect.getWidth());PropertyValuesHolder heightHolder = PropertyValuesHolder.ofFloat("height", animationIV.getHeight(), originalRect.getHeight());PropertyValuesHolder alphaHolder = PropertyValuesHolder.ofInt("alpha", 255, 0);valueAnimator.setValues(leftHolder, topHolder, widthHolder, heightHolder, alphaHolder);//            Handler handler = new Handler(){
//                @Override
//                public void handleMessage(Message msg) {
//                    super.handleMessage(msg);
//                    animationIV.setScaleType(ImageView.ScaleType.CENTER_CROP);//根据九宫格中的图片的显示模式设置
//                }
//            };
//            handler.sendEmptyMessageDelayed(0,duration*9/10);
        }valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic synchronized void onAnimationUpdate(ValueAnimator animation) {//                mTransfrom.scale = (Float) animation.getAnimatedValue("scale");Float left = (Float) animation.getAnimatedValue("left");Float top = (Float) animation.getAnimatedValue("top");Float width = (Float) animation.getAnimatedValue("width");Float height = (Float) animation.getAnimatedValue("height");Integer mBgAlpha = (Integer) animation.getAnimatedValue("alpha");LayoutParams layoutParams = new LayoutParams(width.intValue(),height.intValue());layoutParams.leftMargin = left.intValue();layoutParams.topMargin = top.intValue();animationIV.setLayoutParams(layoutParams);setAlpha(mBgAlpha);}});final TImageListBgView[] imageListBgView = {this};valueAnimator.addListener(new ValueAnimator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {}@Overridepublic void onAnimationRepeat(Animator animation) {}@Overridepublic void onAnimationEnd(Animator animation) {/** 如果是进入的话，当然是希望最后停留在center_crop的区域。但是如果是out的话，就不应该是center_crop的位置了* ， 而应该是最后变化的位置，因为当out的时候结束时，不回复视图是Normal，要不然会有一个突然闪动回去的bug*/// TODO 这个可以根据实际需求来修改if (mState == TScallImageView.STATE_TRANSFORM_IN) {horizontalScrollView.baseSmoothScrollTo(0);setBackgroundColor(Color.BLACK);pageControl.setVisibility(VISIBLE);Handler handler = new Handler(){@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);gridViewBgView.setVisibility(VISIBLE);animationIV.setVisibility(INVISIBLE);}};handler.sendEmptyMessageDelayed(0, duration);} else if (mState == TScallImageView.STATE_TRANSFORM_OUT) {gridViewBgView.removeView(gridView);gridView = null;horizontalScrollView.removeView(gridViewBgView);gridViewBgView = null;removeView(animationIV);animationIV = null;removeView(pageControl);pageControl = null;windowManager.removeView(imageListBgView[0]);imageListBgView[0] = null;}}@Overridepublic void onAnimationCancel(Animator animation) {}});valueAnimator.start();}}

如何使用，非常之简单

- List<List<Object>> imageNames2D = new ArrayList<List<Object>>();List<Object> imageNames = new ArrayList<Object>();imageNames2D.add(imageNames);imageNames.add(Object);
- TNinePlaceGridView ninePlaceGridView = (TNinePlaceGridView) view.findViewById(R.id.ninePlaceGridView);
- ninePlaceGridView.setImageNames(imageNames);

如下代码示例：

public class MainActivity extends AppCompatActivity {@ViewInject(R.id.listView)private ListView listView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);x.view().inject(this);init();}private void init() {List<List<Object>> imageNames2D = new ArrayList<List<Object>>();for (int i = 0; i < 30; i++) {ArrayList<Object> imageNames = new ArrayList<Object>();Random random = new Random();for (int j = 0; j <= random.nextInt(8); j++) {if (j%2 == 0) {imageNames.add(R.mipmap.beauty);
//                    imageNames.add("http://7xi8d6.com1.z0.glb.clouddn.com/20171011084856_0YQ0jN_joanne_722_11_10_2017_8_39_5_505.jpeg");} else {imageNames.add(R.mipmap.glenceluanch);
//                    imageNames.add("http://7xi8d6.com1.z0.glb.clouddn.com/2017-10-10-sakura.gun_10_10_2017_12_33_34_751.jpg");
                }}imageNames2D.add(imageNames);}ListViewAdapter listViewAdapter = new ListViewAdapter(this);listViewAdapter.imageNames2D = imageNames2D;listView.setAdapter(listViewAdapter);}@Overrideprotected void onResume() {super.onResume();}@Overrideprotected void onPause() {super.onPause();}@Overrideprotected void onDestroy() {super.onDestroy();}private class ListViewAdapter extends BaseAdapter {private Context context;public List<List<Object>> imageNames2D;public ListViewAdapter(Context context) {this.context = context;}@Overridepublic int getCount() {if (imageNames2D != null) return imageNames2D.size();return 0;}@Overridepublic Object getItem(int i) {return null;}@Overridepublic long getItemId(int i) {return 0;}private class ViewHelper {CircleImageView imageViewIcon;TextView textViewNickName;TNinePlaceGridView ninePlaceGridView;}@Overridepublic View getView(int i, View view, ViewGroup viewGroup) {ViewHelper viewHelper;if (view == null) {view = View.inflate(context,R.layout.timage_listactivity_listview_item,null);viewHelper = new ViewHelper();viewHelper.imageViewIcon = (CircleImageView) view.findViewById(R.id.imageViewIcon);viewHelper.textViewNickName = (TextView) view.findViewById(R.id.textViewNickName);viewHelper.ninePlaceGridView = (TNinePlaceGridView) view.findViewById(R.id.ninePlaceGridView);view.setTag(viewHelper);} else  {viewHelper = (ViewHelper) view.getTag();}List<Object> imageNames = this.imageNames2D.get(i);viewHelper.ninePlaceGridView.setImageNames(imageNames);return view;}}}