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

前端之家收集整理的这篇文章主要介绍了Android实现左上角(其他边角)倾斜的标签(环绕效果)效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先上效果图吧

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


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

实现的思路大致如下图:

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


页面的布局结构如下:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:background="#fff"
  7. android:layout_height="match_parent"
  8. tools:context=".MainActivity">
  9. <RelativeLayout
  10. android:layout_width="300dp"
  11. android:layout_height="200dp"
  12. android:background="#fff"
  13. app:layout_constraintBottom_toBottomOf="parent"
  14. app:layout_constraintLeft_toLeftOf="parent"
  15. app:layout_constraintRight_toRightOf="parent"
  16. app:layout_constraintTop_toTopOf="parent" >
  17. <RelativeLayout
  18. android:layout_width="match_parent"
  19. android:layout_height="match_parent"
  20. android:layout_margin="5dp"
  21. android:background="#33B7F3"
  22. android:elevation="2dp"></RelativeLayout>
  23. <com.zc.labeldemo.LabelView
  24. android:id="@+id/labelView"
  25. android:layout_alignParentTop="true"
  26. android:layout_width="75dp"
  27. android:elevation="3dp"
  28. android:layout_height="75dp"/>
  29. </RelativeLayout>
  30. </androidx.constraintlayout.widget.ConstraintLayout>

绘制倾斜标签代码如下:

  1. package com.zc.labeldemo;
  2. import android.content.Context;
  3. import android.graphics.Canvas;
  4. import android.graphics.Color;
  5. import android.graphics.Paint;
  6. import android.graphics.Path;
  7. import android.util.AttributeSet;
  8. import android.view.View;
  9. import androidx.annotation.Nullable;
  10. /**
  11. * @author wenchao
  12. * @version 1.0.1
  13. * @className LabelView
  14. * @date 2019/9/20
  15. * @description
  16. */
  17. public class LabelView extends View {
  18. /**
  19. * 画笔
  20. */
  21. private Paint paint;
  22. /**
  23. * Path
  24. */
  25. private Path path;
  26. /**
  27. * View宽度
  28. */
  29. private float width;
  30. /**
  31. * View高度
  32. */
  33. private float height;
  34. /**
  35. * 标签背景宽度
  36. */
  37. private float labelWidth;
  38. /**
  39. * 标签折叠区域宽度
  40. */
  41. private float pointWidth;
  42. /**
  43. * 标签折叠区域高度
  44. */
  45. private float pointHeight;
  46. /**
  47. * 标签背景颜色
  48. */
  49. private int labelColor;
  50. /**
  51. * 标签折叠区域背景颜色
  52. */
  53. private int pointColor;
  54. /**
  55. * 中心点x坐标
  56. */
  57. private float centerX;
  58. /**
  59. * 中心点y坐标
  60. */
  61. private float centerY;
  62. /**
  63. * 标签文字内容
  64. */
  65. private String text;
  66. /**
  67. * 标签文字颜色
  68. */
  69. private int textColor;
  70. public LabelView(Context context) {
  71. super(context);
  72. }
  73. public LabelView(Context context,@Nullable AttributeSet attrs) {
  74. super(context,attrs);
  75. init();
  76. }
  77. private void init() {
  78. labelWidth = 120;
  79. pointWidth = 10;
  80. pointHeight = 17;
  81. paint = new Paint();
  82. path = new Path();
  83. paint.setAntiAlias(true);
  84. paint.setStrokeWidth(10);
  85. setBackgroundColor(Color.TRANSPARENT);
  86. labelColor = Color.parseColor("#EA6724");
  87. pointColor = Color.parseColor("#C43200");
  88. text = "测试内容";
  89. textColor = Color.WHITE;
  90. }
  91. @Override
  92. protected void onSizeChanged(int w,int h,int oldw,int oldh) {
  93. super.onSizeChanged(w,h,oldw,oldh);
  94. width = w;
  95. height = h;
  96. centerX = w/2;
  97. centerY = h/2;
  98. }
  99. @Override
  100. public void draw(Canvas canvas) {
  101. super.draw(canvas);
  102. //画标签区域背景上边的折叠区域(小三角区域)
  103. path.reset();
  104. path.moveTo(width-pointWidth,0);
  105. path.lineTo(width,pointHeight);
  106. path.lineTo(width-pointWidth-26,pointHeight);
  107. path.close();
  108. paint.setColor(pointColor);
  109. canvas.drawPath(path,paint);
  110. //画标签背景区域下边的折叠区域
  111. path.reset();
  112. path.moveTo(0,height-pointWidth);
  113. path.lineTo(pointHeight,height);
  114. path.lineTo(pointHeight,height-pointWidth-26);
  115. path.close();
  116. paint.setColor(pointColor);
  117. canvas.drawPath(path,paint);
  118. //画标签背景区域
  119. path.reset();
  120. paint.setColor(labelColor);
  121. paint.setStyle(Paint.Style.FILL);
  122. path.moveTo(width-labelWidth-pointWidth,0);
  123. path.lineTo(width-pointWidth,0);
  124. path.lineTo(0,height-pointWidth);
  125. path.lineTo(0,height-labelWidth-pointWidth);
  126. canvas.drawPath(path,paint);
  127. //画文字 逆时针选择45度
  128. canvas.rotate(-45,centerX,centerY);
  129. //文字中心点横坐标
  130. float textX = width / 2;
  131. //文字中心点纵坐标
  132. float textY = (height-pointWidth-(labelWidth / 2f)) / 2f;
  133. paint.setColor(textColor);
  134. paint.setStyle(Paint.Style.FILL);
  135. paint.setTextSize(38);
  136. //设置文字居中绘制
  137. paint.setTextAlign(Paint.Align.CENTER);
  138. canvas.drawText(text,textX,textY,paint);
  139. }
  140. }

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

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


总结

以上所述是小编给大家介绍的Android实现左上角(其他边角)倾斜的标签(环绕效果效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

猜你在找的Android相关文章