仿专题订阅功能

在Android开发中，有些时候会涉及到专题订阅，订阅专题无非是添加/移除专题。而我们的产品的订阅功能稍微有点不同，专题数默认7个，只能替换专题，不能够取消/新添专题，这里给出展示如下图：

实现过程如下：
1、自定义专题订阅容器，涉及到标签的移动，为了更灵活的定义标签位置，继承了相对布局RelativeLayout，将自定义布局命名为DraggingViewGroup;

2、定义专题的宽度，专题的高度在代码中写死，每行定义多少个专题也是确定了（这里是4个），通过DraggingViewGroup宽计算每个专题的宽，重写OnMeasure方法；

@Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        // TODO Auto-generated method stub        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int heightMode = MeasureSpec.getMode(heightMeasureSpec);        int height = MeasureSpec.getSize(heightMeasureSpec);        if (heightMode != MeasureSpec.EXACTLY) {            // 指定默认高度            height = ((WindowManager) mContext                    .getSystemService(Context.WINDOW_SERVICE))                    .getDefaultDisplay().getHeight() / 2;        }        int widthMode = MeasureSpec.getMode(widthMeasureSpec);        int width = MeasureSpec.getSize(widthMeasureSpec);        if (widthMode != MeasureSpec.EXACTLY) {            // 指定默认宽度            width = ((WindowManager) mContext                    .getSystemService(Context.WINDOW_SERVICE))                    .getDefaultDisplay().getWidth();        }        mTextViewWidth = (width - mLeftMergin - mRightMergin - (mTVCountForOneLine - 1)                * mHorizontalBlankWithTextView)                / mTVCountForOneLine;        setMeasuredDimension(width, height);    }

其中，mTextViewWidth是专题宽，width是DraggingViewGroup布局宽，mLeftMergin，mRightMergin是布局内偏移位置，mTVCountForOneLine是每行的专题数量，mHorizontalBlankWithTextView是专题横向间距。

3、添加并显示专题
这里添加的专题是个List数组，给定专题名称列表后，便会生成专题信息；

public void addTextLabelList(List<String> labelNames) {        mLabelNames = labelNames;        if (mLabelNames == null || mLabelNames.size() == 0) {            return;        }        post(new Runnable() {            @Override            public void run() {                // TODO Auto-generated method stub                int startX = mLeftMergin;                int startY = mTopMergin + mLabelImageHeight;                int childCount = mLabelNames.size();                int curTvCount = 1;                for (int i = 0; i < childCount; i++, curTvCount++) {                    TextView tv = addTextLabel(mLabelNames.get(i), startX,                            startY);                    tv.setId(i);                    mLabelPos.append(i, new Point(startX, startY));                    mLabelViews.append(i, tv);                    startX += mTextViewWidth + mHorizontalBlankWithTextView;                    if (curTvCount > mSelectedTopicSize) {                        // 备选标签                        if (curTvCount != (mSelectedTopicSize + 1)                                && (curTvCount + 1) % mTVCountForOneLine == 0) {                            startX = mLeftMergin;                            startY += mCommonTVHeight                                    + mVericalBlankWithTextView;                        }                        continue;                    }                    if (curTvCount % mTVCountForOneLine == 0) {                        // 已选标签                        startX = mLeftMergin;                        startY += mCommonTVHeight + mVericalBlankWithTextView;                    }                    if (curTvCount == mSelectedTopicSize) {                        // 已选标签为默认数量(7个)时，充值下个标签的位置                        startX = mLeftMergin;                        startY = firstDividerLineYPos + mTopMergin                                + mLabelImageHeight + mVericalBlankWithTextView;                    }                }                mTv = createBaseTextView("", 13, Color.parseColor("#696969"));                LayoutParams lp = new LayoutParams(mTextViewWidth,                        mCommonTVHeight);                lp.leftMargin = mLeftMergin + 2 * mLabelImageWidth;                lp.topMargin = firstDividerLineYPos + mVericalBlankWithTextView;                mTv.setLayoutParams(lp);                mTv.setBackgroundResource(R.drawable.normal_label_bg);                mTv.setVisibility(View.GONE);                addView(mTv);            }        });    }

其中，45行前的代码都是在添加专题到容器，并且计算下一个专题的位置，45行-53行，是添加一个临时的专题控件，这个控件将随手势移动，可以看顶部的动图，给用户的感觉是选择的那个专题随手势移动；在这段代码中调用了addTextLabel方法，该方法定义了专题的基本信息，并且固定了专题的显示位置，如下代码；

    /**     * 添加标签     *      * @param labelName     *            ，标签名称     * @param l     *            ，左侧位置     * @param t     *            ，顶部位置     * @return     */    public TextView addTextLabel(String labelName, int l, int t) {        TextView tv = createBaseTextView(labelName, 13,                Color.parseColor("#696969"));        tv.setLayoutParams(new LayoutParams(mTextViewWidth, mCommonTVHeight));        tv.setBackgroundResource(R.drawable.normal_label_bg);        addView(tv);        setPosition(tv, l, t);        return tv;    }

设定专题的显示位置；

    /**     * 设置视图的位置     *      * @param v     *            ，被设置的视图     * @param l     *            ，左边位置     * @param t     *            ，顶部位置     */    private void setPosition(View v, int l, int t) {        int parentWidth = this.getMeasuredWidth();        int parentHeight = this.getMeasuredHeight();        if (l < 0)            l = 0;        else if ((l + v.getMeasuredWidth()) >= parentWidth) {            l = parentWidth - v.getMeasuredWidth();        }        if (t < 0)            t = 0;        else if ((t + v.getHeight()) >= parentHeight) {            t = parentHeight - v.getMeasuredHeight();        }        int r = l + v.getMeasuredWidth();        int b = t + v.getMeasuredHeight();        v.layout(l, t, r, b);        RelativeLayout.LayoutParams params = (android.widget.RelativeLayout.LayoutParams) v                .getLayoutParams();        params.leftMargin = l;        params.topMargin = t;        v.setLayoutParams(params);    }

4、移动专题
<1>确定某个点是否选中了某个专题
要移动专题，首先要清楚点击的位置选中的是哪个专题？如下方法inRangeOfView便是用以判断某个点(x,y)是否在某个专题内，除了判断当前点是否在某个专题布局范围内，还记录下了该点对应的专题的viewId，并改变了对应专题的background；

    /**     * 判断当前点，是否在某个标签内     *      * @param x     * @param y     * @param action     *            ，当前手势是向下按下状态？移动状态？     * @return     */    private boolean inRangeOfView(int x, int y, int action) {        boolean isInRangeOfView = false;        try {            int childCount = getChildCount();            // 这里-1，是因为最后添加了一个可移动的textview            for (int i = mNewAddViewIndex; i < childCount - 1; i++) {                View view = getChildAt(i);                if (view.getId() != mActionDownViewId) {                    view.setBackgroundResource(R.drawable.normal_label_bg);                }                Rect rect = new Rect(view.getLeft(), view.getTop(),                        view.getRight(), view.getBottom());                if (rect.contains(x, y)) {                    if (action == ACTION_DOWN) {                        mActionDownViewId = view.getId();                        mTv.setText(((TextView) view).getText().toString());                    } else if (action == ACTION_MOVE) {                        mActionMoveViewId = view.getId();                    }                    view.setBackgroundResource(R.drawable.cross_label_bg);                    isInRangeOfView = true;                }            }        } catch (Exception e) {            // TODO: handle exception            e.printStackTrace();        }        // 曾经有选择的textview，现在横过了（即没有在某个textview上方），这时需要把值重置        if (!isInRangeOfView) {            mActionMoveViewId = -1;        }        return isInRangeOfView;    }

<2>记录点击时，选中的专题
当用户点击屏幕上任意一点(x,y)时，如果该点恰好是某个专题控件位置内时，将mTV（上文提到这个控件用以更随手指移动，给用户的体验是选中的专题随用户手指移动）移动到点击的位置；

private boolean actionDownInLabel(int x, int y) {        if (inRangeOfView(x, y, ACTION_DOWN)) {            setPosition(mTv, x - mTv.getMeasuredWidth() / 2,                    y - mTv.getMeasuredHeight() / 2);            mTv.setTranslationX(0);            mTv.setTranslationY(0);            mTv.setVisibility(View.VISIBLE);            return true;        }        mActionDownViewId = -1;        return false;    }

该actionDownInLabel方法的调用位置在OnTouchEvent的ACTION_DOWN条件下，如果返回true表示将由onTouchEvent消费该点击事件，否则交由上一层处理；

@Override    public boolean onTouchEvent(MotionEvent event) {        // TODO Auto-generated method stub        switch (event.getAction()) {        case MotionEvent.ACTION_DOWN:            return actionDownInLabel((int) event.getX(), (int) event.getY());        case MotionEvent.ACTION_MOVE:            int x = (int) event.getX();            int y = (int) event.getY();            actionMove(x - mTv.getWidth() / 2, y - mTv.getHeight() / 2);            break;        case MotionEvent.ACTION_UP:            changeLabelTextViewPosition();            break;        }        return true;    }

<3>移动选中的专题
假如点击时恰好选中了某个专题，接下来的action_move事件将继续交由OnToucheEvent处理，这时候调用actionMove方法，该方法里调用了setPosition方法不断的重设mTv的位置，是mTv跟随用户手指移动，同时继续调用inRangeOfView方法（上文提到该方法功能——判断当前点是否在某个专题布局范围内，还记录下了该点对应的专题的viewId，并改变了对应专题的background），记录手指横跨某个专题时，被横跨专题背景将会变化，而且记录当前横跨的位置，以便交互两个专题的信息；

private void actionMove(int l, int t) {        try {            setPosition(mTv, l, t);            inRangeOfView(l + mTv.getMeasuredWidth() / 2,                    t + mTv.getMeasuredHeight() / 2, ACTION_MOVE);        } catch (Exception e) {            // TODO: handle exception            e.printStackTrace();        }    }

5、交换选中专题的信息
若按下时已选中某个专题了，移动过程中，并未选中其他专题便松开手指了，这时候选中的专题将会回到自己的原来的位置上，如下代码第8行-第41行都是在实现这个逻辑处理；
若按下时已选中某个专题了，移动过程中，选中了其他的专题，然后松开手指，这个时候将要实现2个专题的信息交换，如下代码的第43行-第88行都是在实现这个效果；

/** 标签替换，标签替换动画效果 */    private void changeLabelTextViewPosition() {        try {            int dx = 0;            int dy = 0;            Point downPoint = mLabelPos.get(mActionDownViewId);            final View downView = mLabelViews.get(mActionDownViewId);            if (mActionMoveViewId == -1) {                // 不需要两两标签替换，回到原来的位置                dx = downPoint.x - (int) mTv.getLeft();                dy = downPoint.y - (int) mTv.getTop();                mTv.animate().translationX(dx).translationY(dy)                        .setDuration(ANIMATE_TIME).start();                mTv.animate().setListener(new AnimatorListener() {                    @Override                    public void onAnimationStart(Animator animation) {                        // TODO Auto-generated method stub                    }                    @Override                    public void onAnimationRepeat(Animator animation) {                        // TODO Auto-generated method stub                    }                    @Override                    public void onAnimationEnd(Animator animation) {                        // TODO Auto-generated method stub                        downView.setBackgroundResource(R.drawable.normal_label_bg);                    }                    @Override                    public void onAnimationCancel(Animator animation) {                        // TODO Auto-generated method stub                    }                });                return;            }            Point movePoint = mLabelPos.get(mActionMoveViewId);            if (downPoint == null || movePoint == null) {                return;            }            View moveView = mLabelViews.get(mActionMoveViewId);            if (downView == null || moveView == null) {                return;            }            // 将第二个tv移动到第一个tv位置            dx = downPoint.x - movePoint.x;            dy = downPoint.y - movePoint.y;            moveView.setBackgroundResource(R.drawable.normal_label_bg);            moveView.animate().translationX(dx).translationY(dy)                    .setDuration(ANIMATE_TIME).start();            // 将第一个tv移动到第二个tv            dx = movePoint.x - (int) mTv.getLeft();            dy = movePoint.y - (int) mTv.getTop();            mTv.animate().translationX(dx).translationY(dy)                    .setDuration(ANIMATE_TIME).start();            mTv.animate().setListener(new AnimatorListener() {                @Override                public void onAnimationStart(Animator animation) {                    // TODO Auto-generated method stub                }                @Override                public void onAnimationRepeat(Animator animation) {                    // TODO Auto-generated method stub                }                @Override                public void onAnimationEnd(Animator animation) {                    // TODO Auto-generated method stub                    reflashTextViewPosition();                }                @Override                public void onAnimationCancel(Animator animation) {                    // TODO Auto-generated method stub                }            });        } catch (Exception e) {            // TODO: handle exception            e.printStackTrace();        }    }

6、重置专题视图
虽然用障眼法用mTv代替了按下选中的专题标签来实现专题移动效果，实际上，动画效果显示完毕后，要重置一次专题视图，将两个交换信息的专题控件重置回原来的显示位置，只要将两个控件显示的值（setText方法）交换即可。

    /**     * 刷新视图中文本位置及替换后的标签名称     */    private void reflashTextViewPosition() {        try {            TextView tvDownView = mLabelViews.get(mActionDownViewId);            TextView tvMoveView = mLabelViews.get(mActionMoveViewId);            if (tvDownView != null && tvMoveView != null) {                tvDownView.setTranslationX(0);                tvDownView.setTranslationY(0);                tvDownView.setText(mLabelNames.get(mActionMoveViewId));                tvDownView.setBackgroundResource(R.drawable.normal_label_bg);                setPosition(tvDownView, mLabelPos.get(mActionDownViewId).x,                        mLabelPos.get(mActionDownViewId).y);                tvMoveView.setTranslationX(0);                tvMoveView.setTranslationY(0);                tvMoveView.setText(mLabelNames.get(mActionDownViewId));                tvMoveView.setBackgroundResource(R.drawable.normal_label_bg);                setPosition(tvMoveView, mLabelPos.get(mActionMoveViewId).x,                        mLabelPos.get(mActionMoveViewId).y);            }            mTv.setVisibility(View.GONE);            String tempString = mLabelNames.get(mActionMoveViewId);            mLabelNames.set(mActionMoveViewId,                    mLabelNames.get(mActionDownViewId));            mLabelNames.set(mActionDownViewId, tempString);            mActionDownViewId = -1;            mActionMoveViewId = -1;        } catch (Exception e) {            // TODO: handle exception            e.printStackTrace();        }    }

至此，整个专题订阅的已经讲完了，提供demo下载链接