欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android实现左上角(其他边角)倾斜的标签(环绕效果)效果

程序员文章站 2022-06-29 18:30:17
先上效果图吧 由于项目需要实现这种左上角倾斜环绕的标签效果,所以自己尝试着做一做,并记录下来。 实现的思路大致如下图: 主页面的布局结构如下:

先上效果图吧

Android实现左上角(其他边角)倾斜的标签(环绕效果)效果

由于项目需要实现这种左上角倾斜环绕的标签效果,所以自己尝试着做一做,并记录下来。

实现的思路大致如下图:

Android实现左上角(其他边角)倾斜的标签(环绕效果)效果

主页面的布局结构如下:

<?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>

绘制倾斜标签的代码如下:

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;
  /**
   * 标签背景宽度
   */
  private float labelwidth;
  /**
   * 标签折叠区域宽度
   */
  private float pointwidth;
  /**
   * 标签折叠区域高度
   */
  private float pointheight;
  /**
   * 标签背景颜色
   */
  private int labelcolor;
  /**
   * 标签折叠区域背景颜色
   */
  private int pointcolor;
  /**
   * 中心点x坐标
   */
  private float centerx;
  /**
   * 中心点y坐标
   */
  private float centery;
  /**
   * 标签文字内容
   */
  private string text;
  /**
   * 标签文字颜色
   */
  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 = "测试内容";
    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);
    //画标签区域背景上边的折叠区域(小三角区域)
    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);
    //画标签背景区域下边的折叠区域
    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);
    //画标签背景区域
    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);
    //画文字 逆时针选择45度
    canvas.rotate(-45,centerx,centery);
    //文字中心点横坐标
    float textx = width / 2;
    //文字中心点纵坐标
    float texty = (height-pointwidth-(labelwidth / 2f)) / 2f;
    paint.setcolor(textcolor);
    paint.setstyle(paint.style.fill);
    paint.settextsize(38);
    //设置文字居中绘制
    paint.settextalign(paint.align.center);
    canvas.drawtext(text,textx,texty,paint);
  }
}

这个标签实现应该是比较简单的,而且多嵌套一层布局会消耗一定的资源,这里先简单记录一下实现的思路,后期有时间再做更改优化。下面再贴一张其他边角的效果图吧:

Android实现左上角(其他边角)倾斜的标签(环绕效果)效果

总结

以上所述是小编给大家介绍的android实现左上角(其他边角)倾斜的标签(环绕效果)效果,希望对大家有所帮助