Android實現(xiàn)左上角(其他邊角)傾斜的標簽(環(huán)繞效果)效果
先上效果圖吧

由于項目需要實現(xiàn)這種左上角傾斜環(huán)繞的標簽效果,所以自己嘗試著做一做,并記錄下來。
實現(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>
繪制傾斜標簽的代碼如下:
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;
/**
* 標簽折疊區(qū)域?qū)挾?
*/
private float pointWidth;
/**
* 標簽折疊區(qū)域高度
*/
private float pointHeight;
/**
* 標簽背景顏色
*/
private int labelColor;
/**
* 標簽折疊區(qū)域背景顏色
*/
private int pointColor;
/**
* 中心點x坐標
*/
private float centerX;
/**
* 中心點y坐標
*/
private float centerY;
/**
* 標簽文字內(nèi)容
*/
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 = "測試內(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);
//畫標簽區(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);
//畫標簽背景區(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);
//畫標簽背景區(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);
//畫文字 逆時針選擇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);
//設(shè)置文字居中繪制
paint.setTextAlign(Paint.Align.CENTER);
canvas.drawText(text,textX,textY,paint);
}
}
這個標簽實現(xiàn)應(yīng)該是比較簡單的,而且多嵌套一層布局會消耗一定的資源,這里先簡單記錄一下實現(xiàn)的思路,后期有時間再做更改優(yōu)化。下面再貼一張其他邊角的效果圖吧:

總結(jié)
以上所述是小編給大家介紹的Android實現(xiàn)左上角(其他邊角)傾斜的標簽(環(huán)繞效果)效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
RecyclerView嵌套RecyclerView滑動卡頓的解決方法
這篇文章主要為大家詳細介紹了RecyclerView嵌套RecyclerView滑動卡頓的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-12-12
android調(diào)用國家氣象局天氣預(yù)報接口json數(shù)據(jù)格式解釋
平時我們在開發(fā)的過程中有時會要用到天氣預(yù)報的信息,國家氣象局為我們提供了天氣預(yù)報的接口,只需要我們?nèi)ソ馕鼍托辛?。很方便很好?/div> 2013-11-11
eclipse中運行monkeyrunner腳本之環(huán)境搭建(4)
這篇文章主要為大家詳細介紹了eclipse中運行monkeyrunner腳本之環(huán)境搭建的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12
Android簡單實現(xiàn) 緩存數(shù)據(jù)
這篇文章主要介紹了Android簡單實現(xiàn) 緩存數(shù)據(jù),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
快速解決安卓7.0系統(tǒng)寫入SD卡權(quán)限失敗的問題
今天小編就為大家分享一篇快速解決安卓7.0系統(tǒng)寫入SD卡權(quán)限失敗的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
android FM播放時拔出耳機后FM APP自動close解決方法
android FM播放時拔出耳機后FM APP自動close關(guān)閉的情況應(yīng)該怎樣解決呢?下面為大家詳細介紹下具體修改方法,感興趣的朋友可以參考下2013-06-06
Flutter利用SizeTransition實現(xiàn)組件飛入效果
本文將為大家介紹SizeTransition,SizeTransition用于更改子組件的尺寸來實現(xiàn)動畫,支持垂直方向或水平方向修改動畫。本文將利用其實現(xiàn)組件飛入效果,需要的可以參考一下2022-04-04最新評論

