Android實(shí)現(xiàn)左上角(其他邊角)傾斜的標(biāo)簽(環(huán)繞效果)效果
先上效果圖吧
由于項(xiàng)目需要實(shí)現(xiàn)這種左上角傾斜環(huán)繞的標(biāo)簽效果,所以自己嘗試著做一做,并記錄下來。
實(shí)現(xiàn)的思路大致如下圖:
主頁(yè)面的布局結(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 = "測(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);
//畫標(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)該是比較簡(jiǎn)單的,而且多嵌套一層布局會(huì)消耗一定的資源,這里先簡(jiǎn)單記錄一下實(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://www.jygsgssxh.com/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)簡(jiǎ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)度條


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 01-10Android自定義View之繪制圓形頭像功能
- 01-10Android實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用實(shí)現(xiàn)方
- 01-10android實(shí)現(xiàn)簡(jiǎ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語(yǔ)言求解撲克牌的順子及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)頁(yè)面的局部加載
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改


