ViewPager相片打标签

世面上现在有很多图片分享社交类app都喜欢加上打标签这个功能，比如比较知名“nice”、“理理相册”等等，他们打标签的方式可能各不相同但是本质原理是一样的，我感觉理理相册做的很好，于是参照它的交互模式自己实现了一下，基本做到了高仿。

项目简述

• 通过ToolBar的menu菜单点击添加标签；

• 作为ViewPager外嵌套一层帧布局使用，解决了和ViewPager的滑动冲突；

• 随意在界面拖动标签，加入严格的边界控制；

• 具备标签点击进行编辑修改和长按删除标签的功能；

• 标签点加入view视图动画效果；

• 随着ViewPager切换当前界面的标签会相应的销毁和创建；

这里贴出标签帧布局核心代码：

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mTouchView = null;
                mStartX = (int) event.getX();
                mStartY = (int) event.getY();
                if(hasView(mStartX,mStartY)){
                    mStartTouchViewLeft = mTouchView.getLeft();
                    mStartTouchViewTop = mTouchView.getTop();
                    mStartTime = System.currentTimeMillis();
                    return true;
                }
                break;
            case MotionEvent.ACTION_MOVE:
                moveView((int) event.getX(),
                        (int) event.getY());
                break;
            case MotionEvent.ACTION_UP:
                mEndTime = System.currentTimeMillis();
                int endX = (int) event.getX();
                int endY = (int) event.getY();
                ArrayList<TagItem> tagItems = mAllTag.get(new Integer(mCurrentPosition));
                tagItems.get(mTouchView.getLocation()).setX(endX);
                tagItems.get(mTouchView.getLocation()).setY(endY);
                tagItems.get(mTouchView.getLocation()).setDx(mStartX -mStartTouchViewLeft);
                tagItems.get(mTouchView.getLocation()).setDy(mStartY -mStartTouchViewTop);
                Log.e(TAG,"ACTION_UP"+mTouchView.getLocation());
                //如果挪动的范围很小，并且时间间隔超过500，则判定为长按点击
                if(mTouchView!=null&& Math.abs(endX - mStartX)
                <CLICKRANGE&& Math.abs(endY - mStartY)<CLICKRANGE&&(mEndTime - mStartTime) > 500){
                    removeItem();
                }else if (mTouchView!=null&& Math.abs(endX - mStartX)<CLICKRANGE&& Math.abs(endY - 
                mStartY)<CLICKRANGE){
                    editItem();
                }else{
                    mTouchView = null;
                }
                break;
            }
            return false;

    }

在down事件按下的时候，我们判断该触摸点是否存在有标签，如何存在的话进行事件处理否则交给viewpager处理，其次在up事件结束的时候我们处理点击和长按事件对标签进行相应的处理。

再看看我们对viewpager滑动监听过程中的处理：

        mVpContainer.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, 
            int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                mToolbar.setTitle((mCurrPosition = position) + 1 + "/" + mUrls.size());
                //处理标签
                mPtyConver.setCurrentPosition(position);
                mPtyConver.removeAllViews();//清空标签
                Map<Integer, ArrayList<TagItem>> allTag = mPtyConver.getAllTag();
                if (allTag.get(new Integer(position)) != null) {
                    ArrayList<TagItem> tagItems = allTag.get(new Integer(position));
                    for (int i = 0; i < tagItems.size(); i++) {
                        Log.e(TAG, "onPageSelected+setItem");
                        mPtyConver.setItem(tagItems.get(i).getX(), tagItems.get(i).getY(), 
                        tagItems.get(i).getName(),i, 
                        tagItems.get(i).getDx(), tagItems.get(i).getDy());
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

当viewpager界面进行滑动的时候我清除当前界面的所有标签，然后取出下一个界面的标签重新设置上去，这里的dx dy 是我们手指触摸点和标签的getLeft()距离的偏差，处理这个后标签的位置才是正确的。

看看效果图：

demo下载地址：

TagViewPager喜欢的话随手点个star 多谢。