效果圖:
effect0.jpg
產品需求：
制作產品標簽卡。限定高度，自適用寬度(Max限制). 兩種類型，產品或其他。產品的時候上面是產品名，下面是價格。其他只有一行文案。左邊的圖片也不同（總共8種不同類型）。
實現思路(偽代碼):
1.先畫出左邊的ICON下面的圓形。
canvas.drawCircle(x ,y)
- 圓內畫出ICON。
canvas.drawBitmap(bitmap, x, y, paint)
3.以圓坐標加圓半徑的距離開始畫三角形。
path.moveTo(x,y)
path.lineTo(x,y)
path.lineTo(x,y)
path.close()
canvas.drawPath(path,paint)
4.從三角形的右邊坐標畫圓角四邊形。
canvas.drawRoundRect(react,radius,radius,paint)
- 畫出文字。
canvas.drawText(text,x,y,paint)
實現
還是繼承View。并且重寫三個必須的構造方法和兩個方法。由于產品卡數量的不確定性,也不能設置封裝對象作為屬性。只能通過傳值到View來進行多個標簽的渲染。
- 重寫結構體：
class PostTagView : View {
constructor(mContext: Context) : super(mContext)
constructor(mContext: Context, attributeSet: AttributeSet) : super(mContext, attributeSet)
constructor(mContext: Context, attributeSet: AttributeSet, theme: Int) : super(
mContext,
attributeSet,
theme
)
}
- 定義使用的變量。
/**
* React 四邊形坐標點
*/
var react= RectF()
/**
* M paint 畫C1C1C1 為背景。
* 注：抗鋸齒關閉(為了性能)
* @see Paint.isAntiAlias
*/
private lateinit var mPaint:Paint
/**
* T paint 畫文案
* 抗鋸齒已開。
* 顏色白色。
*/
private lateinit var tPaint:Paint
/**
* C paint 透明背景
*/
private lateinit var cPaint:Paint
/**
* Path 路徑 畫三角形
*/
private lateinit var path:Path
/**
* Bitmap 解析Bitmap
*/
private lateinit var bitmap: Bitmap
3.初始化變量。
/**
* Init params
* 這里會初始化一些變量。
*/
private fun initParams() {
//初始化 主要顏色
mPaint = Paint()
mPaint.isAntiAlias=false
mPaint.color = Color.parseColor("#1c1c1c")
mPaint.style = Paint.Style.FILL
//初始化 文字
tPaint= Paint()
tPaint.isAntiAlias=true
tPaint.color = Color.WHITE
tPaint.textSize=DisplayUtils.dip2px(12F).toFloat()
tPaint.typeface= Typeface.DEFAULT_BOLD
//初始化Path
path=Path()
//初始化cPaint
cPaint= Paint()
cPaint.color=Color.parseColor("#B31c1c1c")
cPaint.isAntiAlias=false
}
- 渲染
/**
* Draw other 除了產品 畫其他Tag
*
* @param src 資源（R.drawable.xxx）
* @param x 初始x坐標
* @param y 初始y坐標
* @param content 文案
* @param canvas Canvas
*/
fun drawOtherTag(src:Int,x:Float,y:Float,content:String,canvas: Canvas?){
//解決文字的長度問題
var temp= if (content.length>13){
content.substring(0..13)+"..."
}else{
content
}
val drawable=AppCompatResources.getDrawable(context,src)
bitmap=drawable!!.toBitmap(DisplayUtils.dip2px(20F),DisplayUtils.dip2px(20F))
canvas?.drawCircle(x,y,DisplayUtils.dip2px( 15f).toFloat(),cPaint)
path.moveTo(x+DisplayUtils.dip2px(15F).toFloat(),y)
path.lineTo(x+DisplayUtils.dip2px(25F),y+DisplayUtils.dip2px(10F))
path.lineTo(x+DisplayUtils.dip2px(25F),y+DisplayUtils.dip2px(-10F))
path.close()
canvas?.drawPath(path,mPaint)
react= RectF(x+DisplayUtils.dip2px(25F),y-DisplayUtils.dip2px(20F),x+tPaint.measureText(temp)+DisplayUtils.dip2px(50F),y+DisplayUtils.dip2px(20F))
canvas!!.drawRoundRect(react,30F,30F,mPaint)
canvas.drawText(temp,x+DisplayUtils.dip2px(35F),y+DisplayUtils.dip2px(3F),tPaint)
canvas.drawBitmap(bitmap,x-DisplayUtils.dip2px(10F),y-DisplayUtils.dip2px(10F),null)
canvas.save()
}
注明一下：我之所以使用dp轉pixel的值，是為了兼容不同設備下顯示相同大小的object。Canvas的值是pixel為單位的。
最后效果圖：
effects.png
