這篇文章給大家分享的是有關(guān)Android如何實(shí)現(xiàn)左上角傾斜的標(biāo)簽效果的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
創(chuàng)新互聯(lián)專(zhuān)注于零陵網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供零陵?duì)I銷(xiāo)型網(wǎng)站建設(shè),零陵網(wǎng)站制作、零陵網(wǎng)頁(yè)設(shè)計(jì)、零陵網(wǎng)站官網(wǎng)定制、微信小程序服務(wù),打造零陵網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供零陵網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。
先上效果圖吧
由于項(xiàng)目需要實(shí)現(xiàn)這種左上角傾斜環(huán)繞的標(biāo)簽效果,所以自己嘗試著做一做,并記錄下來(lái)。
實(shí)現(xiàn)的思路大致如下圖:
主頁(yè)面的布局結(jié)構(gòu)如下:
繪制傾斜標(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 { /** * 畫(huà)筆 */ 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); //畫(huà)標(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); //畫(huà)標(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); //畫(huà)標(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); //畫(huà)文字 逆時(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)化。下面再貼一張其他邊角的效果圖吧:
感謝各位的閱讀!關(guān)于“Android如何實(shí)現(xiàn)左上角傾斜的標(biāo)簽效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!