快捷導(dǎo)航

Android實(shí)現(xiàn)左上角（其他邊角）傾斜的標(biāo)簽（環(huán)繞效果）效果

更新時(shí)間：2019年10月18日 09:55:39 作者：DearLC

這篇文章主要介紹了Android實(shí)現(xiàn)左上角（其他邊角）傾斜的標(biāo)簽（環(huán)繞效果）效果,本文通過(guò)圖文實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

先上效果圖吧

在這里插入圖片描述

由于項(xiàng)目需要實(shí)現(xiàn)這種左上角傾斜環(huán)繞的標(biāo)簽效果，所以自己嘗試著做一做，并記錄下來(lái)。

實(shí)現(xiàn)的思路大致如下圖：

在這里插入圖片描述

主頁(yè)面的布局結(jié)構(gòu)如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:background="#fff"
  android:layout_height="match_parent"
  tools:context=".MainActivity">
  <RelativeLayout
    android:layout_width="300dp"
    android:layout_height="200dp"
    android:background="#fff"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" >
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_margin="5dp"
      android:background="#33B7F3"
      android:elevation="2dp"></RelativeLayout>
    <com.zc.labeldemo.LabelView
      android:id="@+id/labelView"
      android:layout_alignParentTop="true"
      android:layout_width="75dp"
      android:elevation="3dp"
      android:layout_height="75dp"/>
  </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

繪制傾斜標(biāo)簽的代碼如下：

package com.zc.labeldemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;
/**
 * @author wenchao
 * @version 1.0.1
 * @className LabelView
 * @date 2019/9/20
 * @description
 */
public class LabelView extends View {
  /**
   * 畫筆
   */
  private Paint paint;
  /**
   * Path
   */
  private Path path;
  /**
   * View寬度
   */
  private float width;
  /**
   * View高度
   */
  private float height;
  /**
   * 標(biāo)簽背景寬度
   */
  private float labelWidth;
  /**
   * 標(biāo)簽折疊區(qū)域?qū)挾?
   */
  private float pointWidth;
  /**
   * 標(biāo)簽折疊區(qū)域高度
   */
  private float pointHeight;
  /**
   * 標(biāo)簽背景顏色
   */
  private int labelColor;
  /**
   * 標(biāo)簽折疊區(qū)域背景顏色
   */
  private int pointColor;
  /**
   * 中心點(diǎn)x坐標(biāo)
   */
  private float centerX;
  /**
   * 中心點(diǎn)y坐標(biāo)
   */
  private float centerY;
  /**
   * 標(biāo)簽文字內(nèi)容
   */
  private String text;
  /**
   * 標(biāo)簽文字顏色
   */
  private int textColor;
  public LabelView(Context context) {
    super(context);
  }
  public LabelView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    init();
  }
  private void init() {
    labelWidth = 120;
    pointWidth = 10;
    pointHeight = 17;
    paint = new Paint();
    path = new Path();
    paint.setAntiAlias(true);
    paint.setStrokeWidth(10);
    setBackgroundColor(Color.TRANSPARENT);
    labelColor = Color.parseColor("#EA6724");
    pointColor = Color.parseColor("#C43200");
    text = "測(cè)試內(nèi)容";
    textColor = Color.WHITE;
  }
  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    width = w;
    height = h;
    centerX = w/2;
    centerY = h/2;
  }
  @Override
  public void draw(Canvas canvas) {
    super.draw(canvas);
    //畫標(biāo)簽區(qū)域背景上邊的折疊區(qū)域（小三角區(qū)域）
    path.reset();
    path.moveTo(width-pointWidth,0);
    path.lineTo(width,pointHeight);
    path.lineTo(width-pointWidth-26,pointHeight);
    path.close();
    paint.setColor(pointColor);
    canvas.drawPath(path,paint);
    //畫標(biāo)簽背景區(qū)域下邊的折疊區(qū)域
    path.reset();
    path.moveTo(0,height-pointWidth);
    path.lineTo(pointHeight,height);
    path.lineTo(pointHeight,height-pointWidth-26);
    path.close();
    paint.setColor(pointColor);
    canvas.drawPath(path,paint);
    //畫標(biāo)簽背景區(qū)域
    path.reset();
    paint.setColor(labelColor);
    paint.setStyle(Paint.Style.FILL);
    path.moveTo(width-labelWidth-pointWidth,0);
    path.lineTo(width-pointWidth,0);
    path.lineTo(0,height-pointWidth);
    path.lineTo(0,height-labelWidth-pointWidth);
    canvas.drawPath(path,paint);
    //畫文字 逆時(shí)針選擇45度
    canvas.rotate(-45,centerX,centerY);
    //文字中心點(diǎn)橫坐標(biāo)
    float textX = width / 2;
    //文字中心點(diǎn)縱坐標(biāo)
    float textY = (height-pointWidth-(labelWidth / 2f)) / 2f;
    paint.setColor(textColor);
    paint.setStyle(Paint.Style.FILL);
    paint.setTextSize(38);
    //設(shè)置文字居中繪制
    paint.setTextAlign(Paint.Align.CENTER);
    canvas.drawText(text,textX,textY,paint);
  }
}

這個(gè)標(biāo)簽實(shí)現(xiàn)應(yīng)該是比較簡(jiǎn)單的，而且多嵌套一層布局會(huì)消耗一定的資源，這里先簡(jiǎn)單記錄一下實(shí)現(xiàn)的思路，后期有時(shí)間再做更改優(yōu)化。下面再貼一張其他邊角的效果圖吧：

在這里插入圖片描述

總結(jié)

以上所述是小編給大家介紹的Android實(shí)現(xiàn)左上角（其他邊角）傾斜的標(biāo)簽（環(huán)繞效果）效果,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: