Android實(shí)現(xiàn)左上角(其他邊角)傾斜的標(biāo)簽(環(huán)繞效果)效果
先上效果圖吧
由于項(xiàng)目需要實(shí)現(xiàn)這種左上角傾斜環(huán)繞的標(biāo)簽效果,所以自己嘗試著做一做,并記錄下來。
實(shí)現(xiàn)的思路大致如下圖:
主頁面的布局結(jié)構(gòu)如下:
<?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>
繪制傾斜標(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 { /** * 畫筆 */ 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 = "測試內(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); //畫標(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); //畫標(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); //畫標(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); //畫文字 逆時(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)該是比較簡單的,而且多嵌套一層布局會(huì)消耗一定的資源,這里先簡單記錄一下實(shí)現(xiàn)的思路,后期有時(shí)間再做更改優(yōu)化。下面再貼一張其他邊角的效果圖吧:
總結(jié)
以上所述是小編給大家介紹的Android實(shí)現(xiàn)左上角(其他邊角)傾斜的標(biāo)簽(環(huán)繞效果)效果,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)我們網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
上一篇:android實(shí)現(xiàn)下拉菜單三級(jí)聯(lián)動(dòng)
欄 目:Android
下一篇:詳解Android使用CoordinatorLayout+AppBarLayout實(shí)現(xiàn)拉伸頂部圖片功能
本文標(biāo)題:Android實(shí)現(xiàn)左上角(其他邊角)傾斜的標(biāo)簽(環(huán)繞效果)效果
本文地址:http://mengdiqiu.com.cn/a1/Android/9141.html
您可能感興趣的文章
- 01-10Android自定義View之繪制圓形頭像功能
- 01-10Android實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用實(shí)現(xiàn)方法詳解
- 01-10android實(shí)現(xiàn)記住用戶名和密碼以及自動(dòng)登錄
- 01-10android實(shí)現(xiàn)簡單計(jì)算器功能
- 01-10Android 友盟第三方登錄與分享的實(shí)現(xiàn)代碼
- 01-10C++自定義API函數(shù)實(shí)現(xiàn)大數(shù)相乘算法
- 01-10如何給Flutter界面切換實(shí)現(xiàn)點(diǎn)特效
- 01-10android實(shí)現(xiàn)指紋識(shí)別功能
- 01-10Emoji表情在Android JNI中的兼容性問題詳解
- 01-10Android實(shí)現(xiàn)圓形漸變加載進(jìn)度條


閱讀排行
本欄相關(guān)
- 01-10Android自定義View之繪制圓形頭像功能
- 01-10Android實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用實(shí)現(xiàn)方
- 01-10android實(shí)現(xiàn)簡單計(jì)算器功能
- 01-10android實(shí)現(xiàn)記住用戶名和密碼以及自動(dòng)
- 01-10C++自定義API函數(shù)實(shí)現(xiàn)大數(shù)相乘算法
- 01-10Android 友盟第三方登錄與分享的實(shí)現(xiàn)代
- 01-10android實(shí)現(xiàn)指紋識(shí)別功能
- 01-10如何給Flutter界面切換實(shí)現(xiàn)點(diǎn)特效
- 01-10Android實(shí)現(xiàn)圓形漸變加載進(jìn)度條
- 01-10Emoji表情在Android JNI中的兼容性問題詳
隨機(jī)閱讀
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 01-10delphi制作wav文件的方法
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-10使用C語言求解撲克牌的順子及n個(gè)骰子
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 04-02jquery與jsp,用jquery
- 01-10C#中split用法實(shí)例總結(jié)
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 01-11ajax實(shí)現(xiàn)頁面的局部加載
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改