仿专题订阅功能
在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下载链接