Android實(shí)現(xiàn)傾斜角標(biāo)樣式
前言
最近產(chǎn)品有一個(gè)需求是:要在一個(gè)距形卡片上做一個(gè)傾斜的Tag,類(lèi)似:

(PS:不要注意那兩毛三分的窮鬼),剛開(kāi)始想著用UI切圖就可以了嘛,but是不可以的,在不同手機(jī)上分辨率是不同的,直接用圖片適配肯定會(huì)有問(wèn)題,所以打算自定義。
實(shí)現(xiàn)思路

額畫(huà)圖太丑了,這里解釋一下:這里以左上角為例,我們可以把手機(jī)屏幕看成是一個(gè)直角坐標(biāo)軸,我們要畫(huà)一個(gè)斜角標(biāo)示,只需要在我們的距形框內(nèi)畫(huà)一個(gè)正方形通過(guò)正方形的對(duì)角線(這里必須是正方形,這樣可以控制x,y等距離),這樣操控斜角標(biāo)示長(zhǎng)度只需要控制對(duì)角線長(zhǎng)度通過(guò)path方法來(lái)繪制路徑,右邊同理,我們也不需要過(guò)多計(jì)算,只需要通過(guò)moveTo方法移動(dòng)坐標(biāo)原點(diǎn)。
而繪制字體呢以對(duì)角線中心為坐標(biāo)原點(diǎn)像左右繪制通過(guò)canvas.rotate()設(shè)置字體傾斜于對(duì)角線平行。效果如下:

核心代碼
繪制背景色
case TAG_LEFT:
path.lineTo(0, mHeight);
path.lineTo(mWidth, 0);
break;
case TAG_Right:
path.lineTo(mWidth, 0);
path.lineTo(mWidth, mHeight);
break;
case TAG_LEFT_BOTTOM:
path.lineTo(mWidth, mHeight);
path.lineTo(0, mHeight);
break;
case TAG_RIGHT_BOTTOM:
path.moveTo(0, mHeight);//移動(dòng)坐標(biāo)原點(diǎn)位置
path.lineTo(mWidth, mHeight);
path.lineTo(mWidth, 0);
break;
case TAG_LEFT_BAR:
path.moveTo(mWidth, 0);
path.lineTo(0, mHeight);
path.lineTo(0, mHeight - mySlantedHeight);
path.lineTo(mWidth - mySlantedHeight, 0);
break;
case TAG_RIGHT_BAR:
path.lineTo(mWidth, mHeight);
path.lineTo(mWidth, mHeight - mySlantedHeight);
path.lineTo(mySlantedHeight, 0);
break;
case TAG_LEFT_BOTTOM_BAR:
path.lineTo(mWidth, mHeight);
path.lineTo(mWidth - mySlantedHeight, mHeight);
path.lineTo(0, mySlantedHeight);
break;
case TAG_RIGHT_BOTTOM_BAR:
path.moveTo(0, mHeight);
path.lineTo(mySlantedHeight, mHeight);
path.lineTo(mWidth, mySlantedHeight);
path.lineTo(mWidth, 0);
break;
通過(guò)計(jì)算繪制字體和角度
rect = new Rect(0, 0, w, h);
rectF = new RectF(rect);
rectF.right = mTextPaint.measureText(myText, 0, myText.length());
rectF.bottom = mTextPaint.descent() - mTextPaint.ascent();//Ascent: 字符頂部到baseLine的距離 Descent: 字符底部到baseLine的距離
rectF.left += (rect.width() - rectF.right) / 2.0f;
rectF.top += (rect.height() - rectF.bottom) / 2.0f;
xy[0] = rectF.left;
xy[1] = rectF.top - mTextPaint.ascent();
xy[2] = w / 2;
xy[3] = h / 2;
xy[4] = -ROTATE_ANGLE;
//設(shè)置字體
canvas.rotate(angle, centerX, centerY);
canvas.drawText(myText, toX, toY + PADDING_TOP, mTextPaint);
使用方法
testView.setText("打折中")
.setMode(TAG_LEFT_BAR)
.setBackground(Color.parseColor("#ff6677"))
.setTextColor(Color.parseColor("#000000"))
.setSlantedHeight(50)
.setTextSize(29);
或直接在布局中
<com.example.mylibrary.mySlantedTextView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
app:myBackgroundColor="#667fff"
app:mySlantedHeight="30dp"
app:myText="熱賣(mài)中"
app:myTextColor="#ffffff"
app:myTextSize="16sp"
app:tagModel="right_bar" />
常用API
| API名稱(chēng) | 介紹 |
|---|---|
| myBackgroundColor | 斜角背景顏色 |
| mySlantedHeight | 斜角高度 |
| myText | 字體展示 |
| tagModel | 樣式模式共八種 |
| myTextSize | 字體大小 |
| myTextColor | 字體顏色 |
源碼見(jiàn)github
總結(jié)
以上所述是小編給大家介紹的Android實(shí)現(xiàn)傾斜角標(biāo)樣式,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- Android給任何view添加全屏傾斜水印
- Android中TextView和ImageView實(shí)現(xiàn)傾斜效果
- Android自定義TextView實(shí)現(xiàn)文字傾斜效果
- 最近較流行的效果 Android自定義View實(shí)現(xiàn)傾斜列表/圖片
- Android開(kāi)發(fā)之React Navigation 導(dǎo)航欄樣式調(diào)整+底部角標(biāo)消息提示
- Android 實(shí)現(xiàn)帶角標(biāo)的ImageView(微博,QQ消息提示)
- Android為應(yīng)用添加數(shù)字角標(biāo)的簡(jiǎn)單實(shí)現(xiàn)
- Android 實(shí)現(xiàn)桌面未讀角標(biāo)
- Android實(shí)現(xiàn)購(gòu)物車(chē)及其他功能的角標(biāo)
相關(guān)文章
解決RecyclerView無(wú)法onItemClick問(wèn)題的兩種方法
這篇文章主要介紹了解決RecyclerView無(wú)法onItemClick問(wèn)題的相關(guān)知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看下吧2016-07-07
Android實(shí)現(xiàn)搜索保存歷史記錄功能
這篇文章主要介紹了Android實(shí)現(xiàn)搜索保存歷史記錄功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
Android后臺(tái)線程和UI線程通訊實(shí)例
這篇文章主要介紹了Android后臺(tái)線程和UI線程通訊實(shí)例,每一步的要點(diǎn)和步驟都有提及,并配有代碼例子,需要的朋友可以參考下2014-06-06
Android搜索結(jié)果顯示高亮實(shí)例(有數(shù)據(jù)滑動(dòng)底部自動(dòng)刷新)
本篇文章主要介紹了Android搜索結(jié)果顯示高亮實(shí)例(有數(shù)據(jù)滑動(dòng)底部自動(dòng)刷新),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-04-04
Flutter學(xué)習(xí)LogUtil封裝與實(shí)現(xiàn)實(shí)例詳解
這篇文章主要為大家介紹了Flutter學(xué)習(xí)LogUtil封裝與實(shí)現(xiàn)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
Android設(shè)計(jì)模式之Builder模式解析
這篇文章主要為大家詳細(xì)介紹了Android設(shè)計(jì)模式之Builder模式解析的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10
一步步教你寫(xiě)Slack的Loading動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)手摸手教你寫(xiě)Slack的Loading動(dòng)畫(huà),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09

