快捷導(dǎo)航

Android 帶箭頭的指引tipLayout實現(xiàn)示例代碼

更新時間：2018年01月23日 09:43:51 作者：上九樓的快活

本篇文章主要介紹了Android 帶箭頭的指引tipLayout實現(xiàn)示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了Android 帶箭頭的指引tipLayout實現(xiàn)示例代碼，分享給大家，具體如下：

如上是從UI接過來的設(shè)計圖，要求三角形指示器需要動態(tài)對齊上面的文本，需要動態(tài)的實現(xiàn)對其三角形。

引用方式

compile 'com.xiaowei:TriangleTipLayout:1.0.0'

實現(xiàn)思路

準(zhǔn)備一個三角形指引的圖片即可。

先上代碼

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);
    }
  }

核心代碼如上,其思路是先繪制一個矩形，預(yù)留出三角形所需要的高度，最后將其三行圖片繪制出來。

配置指示器

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("您今日收入已到達(dá)10W+，牛逼。保持努力");

注意：當(dāng)調(diào)用setText之后會invalidate()重新繪制;

實現(xiàn)效果如下