android傾斜角標實現

前言

最近產品有一個需求是：要在一個距形卡片上做一個傾斜的Tag，類似：
（PS：不要注意那兩毛三分的窮鬼），剛開始想着用UI切圖就可以了嘛，but是不可以的，在不同手機上分辨率是不同的，直接用圖片適配肯定會有問題，所以打算自定義。

實現思路

額畫圖太醜了，這裏解釋一下：這裏以左上角爲例，我們可以把手機屏幕看成是一個直角座標軸，我們要畫一個斜角標示，只需要在我們的距形框內畫一個正方形通過正方形的對角線（這裏必須是正方形，這樣可以控制x,y等距離），這樣操控斜角標示長度只需要控制對角線長度通過path方法來繪製路徑，右邊同理，我們也不需要過多計算，只需要通過moveTo方法移動座標原點。
而繪製字體呢以對角線中心爲座標原點像左右繪製通過canvas.rotate（）設置字體傾斜於對角線平行。效果如下：

核心代碼

繪製背景色

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);//移動座標原點位置
                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;

通過計算繪製字體和角度

                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;
                //設置字體
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="熱賣中"
                    app:myTextColor="#ffffff"
                    app:myTextSize="16sp"
                    app:tagModel="right_bar" />

常用API

API名稱	介紹
myBackgroundColor	斜角背景顏色
mySlantedHeight	斜角高度
myText	字體展示
tagModel	樣式模式共八種
myTextSize	字體大小
myTextColor	字體顏色

源碼見github
github源碼地址