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

 更新时间:2018年01月23日 09:43:51   作者:上九楼的快活  
本篇文章主要介绍了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: 源码

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

相关文章

  • Android指纹识别功能

    Android指纹识别功能

    这篇文章主要为大家详细介绍了Android指纹识别功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • Android RollPagerView实现轮播图

    Android RollPagerView实现轮播图

    这篇文章主要介绍了Android RollPagerView实现轮播图的相关资料,这里提供实例来实现轮播图的简单实例,希望能帮助到大家,需要的朋友可以参考下
    2017-08-08
  • Kotlin中Suppress的非常规用法示例

    Kotlin中Suppress的非常规用法示例

    这篇文章主要给大家介绍了关于Kotlin中Suppress的非常规用法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • Android开发中简单设置启动界面的方法

    Android开发中简单设置启动界面的方法

    这篇文章主要介绍了Android开发中简单设置启动界面的方法,涉及Android界面布局、加载、跳转等相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • Android自定义View实现叶子飘动旋转效果(四)

    Android自定义View实现叶子飘动旋转效果(四)

    这篇文章主要为大家详细介绍了Android自定义View实现叶子飘动旋转效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Android中的Activity生命周期总结

    Android中的Activity生命周期总结

    这篇文章主要介绍了Android中的Activity生命周期总结,本文讲解了Activity四大基本状态、Activity七大生命周期函数、切换横竖屏触发的生命周期事件等内容,需要的朋友可以参考下
    2015-03-03
  • Flutter实现页面路由及404路由拦截

    Flutter实现页面路由及404路由拦截

    这篇文章介绍了Flutter实现页面路由及404路由拦截的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2021-11-11
  • Android自定义ViewGroup实现弹性滑动效果

    Android自定义ViewGroup实现弹性滑动效果

    这篇文章主要为大家详细介绍了Android自定义ViewGroup实现弹性滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Android开发腾讯验证码遇到的坑

    Android开发腾讯验证码遇到的坑

    这篇文章主要介绍了Android开发腾讯验证码遇到的坑,需要的朋友可以参考下
    2017-12-12
  • AsyncTask的三个属性值和四个步骤

    AsyncTask的三个属性值和四个步骤

    本文主要介绍了AsyncTask的三个属性值和四个步骤,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01

最新评论