微信emoji、gif图片的实现及小米一键清除逻辑

微信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来渲染,渲染效果可以加个底托背景、文字等

微信emoji、gif图片的实现及小米一键清除逻辑    @Override
    public boolean onItemLongClick(AdapterView<?> parent, View view,
                                   int position, long id) {
        // 获取屏幕坐标
        gridview.getLocationInWindow(gvLocation);
        //......
        updateView(resId, view, false);

   }

我们再来看下小米手机的一键清除程序,往上滑动超出下方区域,是不是同样的逻辑呢?超出水平区域就隐藏当前view,Activity里的view出场显示,不断随着手势更新view的位置,看起来就像超出水平区域之外往上滑动也左右上下自由运动,哈哈.动画效果就比较细腻了......,本篇主要讨论划出一个区域到另一个区域的无缝连接,嗯嗯......

微信emoji、gif图片的实现及小米一键清除逻辑微信emoji、gif图片的实现及小米一键清除逻辑