live_icon.jpg
1370473-587d9058f76372fb.gif
项目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;
}
@Override
public 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() {
@Override
public 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
*/
@Override
public boolean dispatchKeyEvent(KeyEvent event) {//2-4
if (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
*/
@Override
public boolean dispatchKeyEvent(KeyEvent event) {//2-4
if (event.getKeyCode() == KeyEvent.KEYCODE_BACK) {
if (mState == TScallImageView.STATE_TRANSFORM_IN) {
startTransform(TScallImageView.STATE_TRANSFORM_OUT);
return true;
}
}
return super.dispatchKeyEvent(event);
}
@Override
public boolean dispatchKeyEventPreIme(KeyEvent event) {//1-3
return 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_SCREEN
layoutParams.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() {
@Override
public 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() {
@Override
public 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() {
@Override
public 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() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
@Override
public 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(){
@Override
public 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;
}
}
@Override
public 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;
@Override
protected 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);
}
@Override
protected void onResume() {
super.onResume();
}
@Override
protected void onPause() {
super.onPause();
}
@Override
protected void onDestroy() {
super.onDestroy();
}
private class ListViewAdapter extends BaseAdapter {
private Context context;
public List<List<Object>> imageNames2D;
public ListViewAdapter(Context context) {
this.context = context;
}
@Override
public int getCount() {
if (imageNames2D != null) return imageNames2D.size();
return 0;
}
@Override
public Object getItem(int i) {
return null;
}
@Override
public long getItemId(int i) {
return 0;
}
private class ViewHelper {
CircleImageView imageViewIcon;
TextView textViewNickName;
TNinePlaceGridView ninePlaceGridView;
}
@Override
public 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;
}
}
}
