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 studio 3.0显示光标返回上一次浏览位置的箭头图标
  • Android自定义View实现箭头沿圆转动实例代码
  • Android中ActionBar和ToolBar添加返回箭头的实例代码
  • Android下拉列表选项框及指示箭头动画
  • android中一些特殊字符（如：←↑→↓等箭头符号）的Unicode码值
  • Android自定义ViewGroup实现带箭头的圆角矩形菜单
赞 (0)

相关推荐

  • Android中ActionBar和ToolBar添加返回箭头的实例代码

     1.ActionBar添加返回箭头 //onCreate方法中 ActionBar actionBar = this.getSupportActionBar(); actionBar.setTitle("搜索功能"); actionBar.setDisplayHomeAsUpEnabled(true); //activity类中的方法 @Override public boolean onOptionsItemSelected(MenuItem item) { if(item.get

  • Android自定义View实现箭头沿圆转动实例代码

    Android自定义View实现箭头沿圆转动实例代码

    具体代码如下所示: //MyCircleView类 public class MyCircleView extends View{ //当前画笔画圆的颜色 private int CurrenCircleBoundColor; private Paint paint; ////从xml中获取的颜色 private int circleBundColor; private float circleBoundWidth; private float pivotX; private float piv

  • 如何设置Android studio 3.0显示光标返回上一次浏览位置的箭头图标

    如何设置Android studio 3.0显示光标返回上一次浏览位置的箭头图标

    这几天刚升级了Android studio 3.0,发现光标返回上一次浏览位置的箭头图标没有了.快捷键 ctrl+alt+左右键,按着真不方便.方便按的按键早已经被占满了,也懒得去改动快捷键了.来,把小箭头找回来.原来Android studio 3.0把Toolbr给默认关闭了,打开就好了.看下图: 总结 以上所述是小编给大家介绍的如何设置Android studio 3.0显示光标返回上一次浏览位置的箭头图标,希望对大家有所帮助!

  • Android下拉列表选项框及指示箭头动画

    Android下拉列表选项框及指示箭头动画

    android原生的Spinner提供了下拉列表选项框,但在一些流行的APP中,原生的Spinner似乎不太受待见,而通常会有下图所示的下拉列表选项框: 初始化状态: 点击弹出下拉选择选项框: 选中后: 注意那个指示箭头,如果把这个控件写的比较精细的话,在下拉-选择-复位过程中箭头是应该有动画旋转效果的. 这种样式的选择框实现方案很多,并且常见.常用,我自己写了一个,我写的这个例子的代码运行结果就是上图所示. 首先是MainActivity.Java: package zhangphil.app

  • Android自定义ViewGroup实现带箭头的圆角矩形菜单

    Android自定义ViewGroup实现带箭头的圆角矩形菜单

    本文和大家一起做一个带箭头的圆角矩形菜单,大概长下面这个样子: 要求顶上的箭头要对准菜单锚点,菜单项按压反色,菜单背景色和按压色可配置. 最简单的做法就是让UX给个三角形的图片往上一贴,但是转念一想这样是不是太low了点,而且不同分辨率也不太好适配,干脆自定义一个ViewGroup吧! 自定义ViewGroup其实很简单,基本都是按一定的套路来的. 一.定义一个attrs.xml 就是声明一下你的这个自定义View有哪些可配置的属性,将来使用的时候可以自由配置.这里声明了7个属性,分别是:箭头宽

  • android中一些特殊字符（如：←↑→↓等箭头符号）的Unicode码值

    android中一些特殊字符（如：←↑→↓等箭头符号）的Unicode码值

    在项目中,有时候在一些控件(如Button.TextView)中要添加一些符号,如下图所示:                         这个时候可以使用图片的方式来显示,不过这些可以直接使用Unicode码就直接显示出来了. 4个箭头图标的代码如下: <RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight=&

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

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

    本文介绍了Android 带箭头的指引tipLayout实现示例代码,分享给大家,具体如下: 如上是从UI接过来的设计图,要求三角形指示器需要动态对齐上面的文本,需要动态的实现对其三角形. 引用方式 compile 'com.xiaowei:TriangleTipLayout:1.0.0' 实现思路 准备一个三角形指引的图片即可. 先上代码 final TextPaint textPaint = mTextView.getPaint(); final int textHeight = (int)

  • Android串口通信封装之OkUSB的示例代码

    本文介绍了Android串口通信封装之OkUSB的示例代码,分享给大家.具体如下: Github传送门:OkUSB OkUSB 一个简洁的Android串口通信框架. 功能简介 支持设置波特率 支持设置数据位 支持设置停止位 支持设置校验位 支持DTS和RTS 支持串口连接状态监听 用法简介 Gradle allprojects { repositories { ... maven { url 'https://jitpack.io' } } } dependencies { compile '

  • Android 实现无网络页面切换的示例代码

    Android 实现无网络页面切换的示例代码

    本文介绍了Android 实现无网络页面切换的示例代码,分享给大家,具体如下: 实现思路 需求是在无网络的时候显示特定的页面,想到要替换页面的地方,大多都是recyclerview或者第三方recyclerview这种需要显示数据的地方,因此决定替换掉页面中所有的recyclerview为无网络页面 实现过程 1 在BaseActivity中,当加载布局成功以后,通过id找到要替换的view,通过indexOfChild()方法,找到要替换的view的位置,再通过remove和add view来

  • Android ItemDecoration 实现分组索引列表的示例代码

    Android ItemDecoration 实现分组索引列表的示例代码

    本文介绍了Android ItemDecoration 实现分组索引列表的示例代码,分享给大家.具体如下: 先来看看效果: 我们要实现的效果主要涉及三个部分: 分组 GroupHeader 分割线 SideBar 前两个部分涉及到一个ItemDecoration类,也是我们接下来的重点,该类是RecyclerView的一个抽象静态内部类,主要作用就是给RecyclerView的ItemView绘制额外的装饰效果,例如给RecyclerView添加分割线. 使用ItemDecoration时需要继

  • Android中js和原生交互的示例代码

    本文介绍了Android中js和原生交互的示例代码,分享给大家,具体如下: 加载webview的类 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); JavaScriptInterf

  • Android中TabLayout添加小红点的示例代码

    Android中TabLayout添加小红点的示例代码

    本文介绍了Android中TabLayout添加小红点的示例代码,分享给大家,具体如下 安卓原生的android.support.design.widget.TabLayout,配合ViewPager已经很好用了,但是有时我们会在内容更新时,在tab标题右上方加上一个红点等标记此tab内容有更新时,就需要给原生的TabLayout设置你定义的布局,用法和原生的一样,只是在代码中设置一下TabLayout的布局. 1.主布局文件 <?xml version="1.0" encodi

  • Android 快速实现状态栏透明样式的示例代码

    Android 快速实现状态栏透明样式的示例代码

    在手机 app 开发过程中,经常会遇到一种需求,需要将 内容区域 顶到 状态栏 中去.这个时候,下面一段代码,就能很轻松解决问题了. 上代码之前先上效果图: 下面上一段代码: getWindow().requestFeature(Window.FEATURE_NO_TITLE); if(VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) { Window window = getWindow(); window.clearFlags(WindowManager.

  • Android监听手机短信的示例代码

    本文介绍了Android监听手机短信的示例代码,分享给大家,具体如下: 以下情况可能会导致短信拦截失败: 小米,360等品牌手机拦截短信,短信的优先级给了系统 用户禁用短信权限 手机连接电脑,被电脑端的手机助手类软件截获 手机内装有QQ通讯录之类的管理联系人,短信的应用,被截获. 前提--权限: <uses-permission android:name="android.permission.RECEIVE_SMS" > </uses-permission>

  • Android 实现无网络传输文件的示例代码

    最近的项目需要实现一个 Android 手机之间无网络传输文件的功能,就发现了 Wifi P2P(Wifi点对点)这么一个功能,最后也实现了通过 Wifi 隔空传输文件 的功能,这里我也来整理下代码,分享给大家. Wifi P2P 是在 Android 4.0 以及更高版本系统中加入的功能,通过 Wifi P2P 可以在不连接网络的情况下,直接与配对的设备进行数据交换.相对于蓝牙,Wifi P2P 的搜索速度和传输速度更快,传输距离更远 实现的效果如下所示: 客户端.png 服务器端.png 一

  • Android PC投屏功能实现的示例代码

    Android PC投屏功能实现的示例代码

    本文介绍了Android PC投屏功能实现的示例代码,分享给大家,具体如下: 代码地址 :https://github.com/deepsadness/MediaProjectionDemo 效果预览 投屏效果预览 简单说明: 使用Android MediaProjection Api来完成视频的截图 通过WebSocket进行链接.将图片传递给网页 想法来源 看到vysor,觉得特别好玩,于是就想着自己能不能试着做一个类似的功能出来.搜索了相关实现.发现网上已经有网友针对vysor做了分析.于

随机推荐