微信emoji、gif图片的实现及小米一键清除逻辑
如图所示,微信这种gif动图是怎么实现的呢?gif动画的渲染网上有很多资料,gridview的左右滑动也不难实现,难点在于要把gif区域的图片渲染到gif区域之外的区域,这就需要事件的监听,x、y位置的传递,接口如下:
public interface OnGifShowListener {
void onGifShow(int resId, int topMargin, int leftMargin);
void onGifDismiss();
void onInsertGif(int resId);
void onPositionChanged(int topMargin, int leftMargin);
}
public void setOnGifShowListener(OnGifShowListener listener) {
mOnGifShowListener = listener;
}
//GridView在屏幕中的位置,对应x,y值
private int gvLocation[] = new int[2];
private void updateView(int resId, View view, boolean isUpdatePosition) {
int location[] = new int[2];
view.getLocationInWindow(location);
int topMargin = location[1] - 2 * view.getHeight();
int leftMargin = location[0] - view.getWidth() / 4;
if (isUpdatePosition) {
mOnGifShowListener.onPositionChanged(topMargin,leftMargin);
} else {
mOnGifShowListener.onGifShow(resId, topMargin, leftMargin);
}
}
在onItemLongClick事件中获取当前gif的坐标值,然后在实现OnGifShowListener的Activity里把view渲染出来,在Activity的布局中加入一个布局,专门用来显示下方GridView传递过来的view及坐标信息,在大的Activity里用另外的view来渲染,渲染效果可以加个底托背景、文字等
@Override
public boolean onItemLongClick(AdapterView<?> parent, View view,
int position, long id) {
// 获取屏幕坐标
gridview.getLocationInWindow(gvLocation);
//......
updateView(resId, view, false);
}
我们再来看下小米手机的一键清除程序,往上滑动超出下方区域,是不是同样的逻辑呢?超出水平区域就隐藏当前view,Activity里的view出场显示,不断随着手势更新view的位置,看起来就像超出水平区域之外往上滑动也左右上下自由运动,哈哈.动画效果就比较细腻了......,本篇主要讨论划出一个区域到另一个区域的无缝连接,嗯嗯......