专栏首页恩蓝脚本Android 带箭头的指引tipLayout实现示例代码

Android 带箭头的指引tipLayout实现示例代码

本文介绍了Android 带箭头的指引tipLayout实现示例代码,分享给大家,具体如下:

如上是从UI接过来的设计图,要求三角形指示器需要动态对齐上面的文本,需要动态的实现对其三角形。

引用方式

compile 'com.xiaowei:TriangleTipLayout:1.0.0'

实现思路

准备一个三角形指引的图片即可。

先上代码

final TextPaint textPaint = mTextView.getPaint();
    final int textHeight = (int) (textPaint.descent() - textPaint.ascent());
    mRect.set(0, DEFAULT_TOP_HEIGHT, getWidth(), getHeight() + textHeight - DEFAULT_TOP_HEIGHT);
    canvas.drawRect(mRect, mRectPaint);
    final String text = mTextView.getText().toString();
    float left = 0;
    if (mIsShowTriangle) {
      if (mGravity == Gravity.LEFT || mGravity == Gravity.START) {
        LayoutParams layoutParams = (LayoutParams) mTarget.getLayoutParams();
        left = mTarget.getLeft() - layoutParams.rightMargin - layoutParams.leftMargin;
      } else {
        if (mTarget instanceof TextView) {
          ViewParent viewParent = mTarget.getParent();
          float textWidth = textPaint.measureText(text);
          if (viewParent instanceof LinearLayout) {
            final float width = mTarget.getWidth() / 2;
            left = mTarget.getLeft() + width - (mBitmap.getWidth() / 2);
          } else if (viewParent instanceof RelativeLayout) {
            left = mTarget.getLeft() + textWidth / 2;
          }
        } else if (mTarget instanceof ImageView) {
          final float width = mTarget.getWidth();
          left = mTarget.getLeft() + (width / 2) - (mBitmap.getWidth() / 2);
        }
      }
      canvas.drawBitmap(mBitmap, left, 0, mBitmapPaint);
    }
  }

核心代码如上,其思路是先绘制一个矩形,预留出三角形所需要的高度,最后将其三行图片绘制出来。

配置指示器

mTipsLayout.setRectBackgroundColor(Color.parseColor("#FFF8BE"));
    mTipsLayout.setTextColor(Color.parseColor("#FF9B33"));
    mTipsLayout.setTriangleBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_triangle_arrow));
    mTipsLayout.setTriangleGravity(Gravity.START);
    mTipsLayout.bindView(findViewById(R.id.text2));
    mTipsLayout.setText("您今日收入已到达10W+,牛逼。保持努力");

注意:当调用setText之后会invalidate()重新绘制;

实现效果如下

github: 源码

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在 Pycharm 安装使用black的方法详解

    PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试、语法高亮、Project管理、代码跳转、...

    砸漏
  • Android 通过TCP协议上传指定目录文件的方法

    为了方便客户抓取Log,现通过TCP协议连接指定服务器,传输指定内容,定义指定目录,IP,PORT字段接收参数。直接上代码

    砸漏
  • 一个可以剪藏网页到本地磁盘的扩展MaoXian Web Clipper

    MaoXian Web Clipper 简介 一个简洁的浏览器扩展,让你看到想收藏的内容,可以直接裁剪保存下来,以避免网站挂了,网址失效,图片失效等问题。

    砸漏
  • 云服务器测评 为什么要选择腾讯云服务器?

    腾讯云服务器,简称 CVM 是通过高性能服务器虚拟化的云服务器、拥有专业团队打造资源隔离、数据安全、密码安全、安全加固等多达 20 种安全防护手段。其实就是和阿...

    用户5921467
  • 为什么要选择腾讯云服务器?看完云服务器测评就知道了!

    腾讯云服务器,简称 CVM 是通过高性能服务器虚拟化的云服务器、拥有专业团队打造资源隔离、数据安全、密码安全、安全加固等多达 20 种安全防护手段。其实就是和阿...

    用户6559800
  • 为什么要选择腾讯云服务器?看完云服务器测评就知道了!

    腾讯云服务器,简称 CVM 是通过高性能服务器虚拟化的云服务器、拥有专业团队打造资源隔离、数据安全、密码安全、安全加固等多达 20 种安全防护手段。其实就是和阿...

    用户2416682
  • 《中国地名大会》首播,腾讯企鹅辅导喊你来答题

    ? 今晚,《中国地名大会》正式亮相 央视中文国际频道(CCTV-4) 节目同名小程序戳此直达? ? 该小程序由腾讯企鹅辅导联合联合中央电视广播电视台共同打造,...

    鹅老师
  • Composer使用体验

    简单来说,Composer是PHP的包依赖管理器。但是Composer并不是类似于Yum、Apt的包管理器。Composer可以用于包或者第三方库的安装,但是可...

    大江小浪
  • Java 实现 QQ 登陆

    个人网站最近增加了评论功能,为了方便用户不用注册就可以评论,对接了 QQ 和微博这 2 大常用软件的一键登录,总的来说其实都挺简单的,可能会有一点小坑,但不算多...

    Rookie
  • Java实现QQ登录和微博登录

    个人网站最近增加了评论功能,为了方便用户不用注册就可以评论,对接了 QQ 和微博这 2 大常用软件的一键登录,总的来说其实都挺简单的,可能会有一点小坑,但不算多...

    java思维导图

扫码关注云+社区

领取腾讯云代金券