Android怎样实现左上角倾斜的标签效果

发布时间:2021-09-27 11:16:26 作者:小新
来源:亿速云 阅读:136

这篇文章主要介绍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怎样实现左上角倾斜的标签效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. android如何实现滑动标签页效果
  2. Android如何实现左上角倾斜的标签效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

android

上一篇:如何使用Ubuntu系统中的天气应用

下一篇:XP简单实用的网络秘诀有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》