Shulou(Shulou.com)06/03 Report--

This article mainly introduces Android how to achieve the upper left corner tilt label effect, the article introduces in great detail, has a certain reference value, interested friends must read it!

The idea of implementation is roughly as follows:

The layout structure of the main page is as follows:

The code to draw the slanted label is as follows:

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 {/ * Brush * / private Paint paint / * Path * / private Path path; / * * View width * / private float width; / * View height * / private float height; / * label background width * / private float labelWidth; / * label fold area width * / private float pointWidth; / * label fold area height * / private float pointHeight / * label background color * / private int labelColor; / * label folding area background color * / private int pointColor; / * center point x coordinates * / private float centerX; / * center point y coordinates * / private float centerY; / * label text content * / private String text / * label text color * / 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 = "Test content"; textColor = Color.WHITE;} @ Override protected void onSizeChanged (int w, int h, int oldw, int oldh) {super.onSizeChanged (w, h, oldw, oldh) {super.onSizeChanged (w, h, oldw, oldh); width = w; height = h; centerX = whand 2; centerY = hhand 2 } @ Override public void draw (Canvas canvas) {super.draw (canvas); / / fold region (small triangular region) on the background of the label region 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) / / fold area path.reset () under the background area of the drawing tag; path.moveTo (0charge heightcolorpointWidth); path.lineTo (pointHeight,height); path.lineTo (pointHeight,height-pointWidth-26); path.close (); paint.setColor (pointColor); canvas.drawPath (path,paint); / / background area path.reset (); paint.setColor (labelColor) Paint.setStyle (Paint.Style.FILL); path.moveTo (width-labelWidth-pointWidth,0); path.lineTo (width-pointWidth,0); path.lineTo; path.lineTo; canvas.drawPath (path,paint); / 45 degree canvas.rotate (- 45 canvas.rotate counterclockwise); / / Abscissa of text center float textX = width / 2 / / text center ordinate float textY = (height-pointWidth- (labelWidth / 2f)) / 2f; paint.setColor (textColor); paint.setStyle (Paint.Style.FILL); paint.setTextSize (38); / / set text center drawing paint.setTextAlign (Paint.Align.CENTER); canvas.drawText (text,textX,textY,paint) }} above is all the content of the article "how to achieve the tilted label effect in the upper left corner of Android". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.