android 可移动的标签

标签: 移动的标签 标签 自定义view
10人阅读 评论(0) 收藏 举报
分类:

虽说可移动的标签没什么难度可言, 但对于些自定义view相对薄弱的来讲, 还是有点意义的, 比如说我.

先看下我这边的效果图吧.

lableView

整个绘制过程相对比较简单.

首先onMessage中测量要具体显示的位置, 或者说能显示的大小是多少

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width, height;
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);

    if (widthMode == MeasureSpec.EXACTLY) {
        width = Math.max(widthSize, mixWidth); //widthSize > mixWidth ? widthSize : mixWidth;
    } else {
        width = getPaddingLeft() + mixWidth + getPaddingRight();
    }

    if (heightMode == MeasureSpec.EXACTLY) {
        height = Math.max(heightSize, mixHeight);//heightSize > mixHeight ? heightSize : mixHeight;
    } else {
        height = getPaddingTop() + mixHeight + getPaddingBottom();
    }
    mCircleY = height / 2;
    setMeasuredDimension(width, height);


}

绘制细线

/**
 * 绘制细线
 *
 * @param canvas
 */
private void drawLine(Canvas canvas) {
    if (mStrs.length == 0) return;
    mLinePaint.setStyle(Paint.Style.STROKE);
    reSetPath();

    if (mCircleX > getMeasuredHeight() / 2) { // 原点在右侧, 文字需要在左
        asLeft = -1;
        lineStartX = mCircleX - mRadius * 0.6f;
    } else {
        asLeft = 1;
        lineStartX = mCircleX + mRadius * 0.6f;
    }

    if (mStrs.length == 1) {
        mPath[0].rLineTo((mTextPaint.measureText(mStrs[0]) + disGap / 2) * asLeft + disGap, 0);
        canvas.drawPath(mPath[0], mLinePaint);
    } else if (mStrs.length == 2) {
        mPath[0].lineTo(lineStartX + disGap * asLeft, mCircleY - disGap);
        mPath[0].rLineTo((mTextPaint.measureText(mStrs[0]) + disGap / 2) * asLeft, 0);
        canvas.drawPath(mPath[0], mLinePaint);

        mPath[1].lineTo(lineStartX + disGap * asLeft, mCircleY + disGap);
        mPath[1].rLineTo((mTextPaint.measureText(mStrs[1]) + disGap / 2) * asLeft, 0);
        canvas.drawPath(mPath[1], mLinePaint);
    } else {
        mPath[0].lineTo(lineStartX + disGap * asLeft, mCircleY - disGap);
        mPath[0].rLineTo((mTextPaint.measureText(mStrs[0]) + disGap / 2) * asLeft, 0);
        canvas.drawPath(mPath[0], mLinePaint);

        mPath[1].rLineTo((mTextPaint.measureText(mStrs[1]) + disGap * 1.5f) * asLeft, 0);
        canvas.drawPath(mPath[1], mLinePaint);

        mPath[2].lineTo(lineStartX + disGap * asLeft, mCircleY + disGap);
        mPath[2].rLineTo((mTextPaint.measureText(mStrs[2]) + disGap / 2) * asLeft, 0);
        canvas.drawPath(mPath[2], mLinePaint);
    }

}

设置文字

这里只提供在java代码中设置文字, 个人觉得这样比在xml中更灵活些. 所以提供了可直接设置文字的可变数组(仅支持1-3个文字标签)

/**
 * 设置文字
 *
 * @param str 要显示的文字
 */
public void setText(String... str) {
    if (str.length > 3) {
        mStrs[0] = str[0];
        mStrs[1] = str[1];
        mStrs[2] = str[2];
    } else {
        this.mStrs = str;
    }
    invalidate();
}

绘制文字

刚开始是想直接drawTextonPath, 原点在左, 文字在右,倒是好绘制. 但是反过来, 原点在右,文字在左就不好搞了,最终换成直接绘制文字.

/**
 * 绘制文字
 *
 * @param canvas
 */
private void drawText(Canvas canvas) {
    if (mStrs.length == 0) return;

    if (asLeft > 0) {   // 原点在左侧, 文字需要在右
        mTextPaint.setTextAlign(Paint.Align.LEFT);
    } else {
        mTextPaint.setTextAlign(Paint.Align.RIGHT);
    }

    if (mStrs.length == 1) {
        canvas.drawText(mStrs[0], lineStartX + disGap * asLeft, mCircleY - mLineDisText, mTextPaint);
    } else if (mStrs.length == 2) {
        canvas.drawText(mStrs[0], lineStartX + disGap * asLeft, mCircleY - disGap - mLineDisText, mTextPaint);
        canvas.drawText(mStrs[1], lineStartX + disGap * asLeft, mCircleY + disGap - mLineDisText, mTextPaint);
    } else {
        canvas.drawText(mStrs[0], lineStartX + disGap * asLeft, mCircleY - disGap - mLineDisText, mTextPaint);
        canvas.drawText(mStrs[1], lineStartX + disGap * asLeft, mCircleY - mLineDisText, mTextPaint);
        canvas.drawText(mStrs[2], lineStartX + disGap * asLeft, mCircleY + disGap - mLineDisText, mTextPaint);
    }
}

到此一个普通的带标签的view已经绘制好了, 再加些动画就更好看些了

/**
 * 初始化动画
 */
private void initAnim() {
    mAnimator = ObjectAnimator.ofFloat(this, "progress", 0.6f, 1);
    mAnimator.setDuration(1000);
    mAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    // 无限循环
    mAnimator.setRepeatCount(ValueAnimator.INFINITE);
    // 重复模式, RESTART: 重新开始 REVERSE:恢复初始状态再开始
    mAnimator.setRepeatMode(ValueAnimator.REVERSE);
}

整个过程就是这样,具体详细代码, 可前往Github查看全部代码

查看评论

Android 可添加可拖动标签的View 仿nice

  • 2014年09月19日 00:44
  • 1.42MB
  • 下载

android 自定义可拖动框

android 自定义方形框拉伸,拖动
  • guang_liang_
  • guang_liang_
  • 2017-03-03 16:47:49
  • 365

利用Jqurey写一个输入内容增加并且可以删除,上下移动的标签

最终结果如下,输入内容有标签并且可以删除,上下移动: 代码赏析: DOCTYPE html> lang="en">      charset="UTF-8">     todolist  ...
  • xun527
  • xun527
  • 2017-09-11 23:31:46
  • 385

Android自定义可以随意拖动的ImageView和TextView

Android开发中,有时候我们需要让控件可以随着手指的移动而跟随移动的效果,例如实现任意摆放的水印图片等。 下面是自定义的一种控件,可以实现这种效果。 上代码: import androi...
  • nlchao
  • nlchao
  • 2015-03-17 14:58:05
  • 3438

Android 可拖动可点击悬浮窗

Android 悬浮窗在5.0以上,特别是小米手机,魅族手机,就算给到了 2 这个权限也是不会显示出来的,还需要在设置把悬浮权限开关给打开 最近公司项目要用到一个应用内的悬浮框,需要在当前的...
  • zhijie_1234
  • zhijie_1234
  • 2017-01-21 19:11:27
  • 2780

HTML 可拖动div标签

可拖动div
  • u012939262
  • u012939262
  • 2016-08-11 15:48:42
  • 1797

自定义可拖动TextView

写自定义拖动控件要了解的一些知识点: 1.View.getLeft()  view.getTop()  view.getRight()  view.getBottom( ) 这四个方法是View类...
  • laoziyueguo3
  • laoziyueguo3
  • 2015-02-25 15:22:46
  • 2669

可移动的ImageView

今天做了一个可移动的ImageView,要点如下: 1 ontouch 2 ongloballayout 3 image放置适当的位置 4 matrix变换(平移,缩放) 代码很简单 activity...
  • lihenair
  • lihenair
  • 2015-05-11 18:21:38
  • 4305

纯js可移动DIV

纯js操作div移动  Div拖动/调整大小实例    //保留的位置  var saveLeft,saveTop,saveWidth,saveHeight...
  • hhhh2012
  • hhhh2012
  • 2014-05-10 14:57:39
  • 1313

悬浮于界面可随手指移动的按钮

  • 2014年11月24日 14:53
  • 1.44MB
  • 下载
    个人资料
    等级:
    访问量: 4万+
    积分: 321
    排名: 24万+
    最新评论
    底部跑马灯