快捷導(dǎo)航

Android實(shí)現(xiàn)傾斜角標(biāo)樣式

更新時(shí)間：2019年10月18日 09:43:45 作者：qiaoshi96_bk

最新小編接到這樣一個(gè)項(xiàng)目，需要在一個(gè)距形卡片上做一個(gè)傾斜的Tag，類似支付寶上的一個(gè)功能，接著小編給大家?guī)砹藢?shí)現(xiàn)思路，對(duì)android 傾斜角標(biāo)的實(shí)現(xiàn)方法感興趣的朋友跟隨小編一起看看吧

前言

最近產(chǎn)品有一個(gè)需求是：要在一個(gè)距形卡片上做一個(gè)傾斜的Tag，類似：

在這里插入圖片描述

（PS：不要注意那兩毛三分的窮鬼），剛開始想著用UI切圖就可以了嘛，but是不可以的，在不同手機(jī)上分辨率是不同的，直接用圖片適配肯定會(huì)有問題，所以打算自定義。

實(shí)現(xiàn)思路

在這里插入圖片描述

額畫圖太丑了，這里解釋一下：這里以左上角為例，我們可以把手機(jī)屏幕看成是一個(gè)直角坐標(biāo)軸，我們要畫一個(gè)斜角標(biāo)示，只需要在我們的距形框內(nèi)畫一個(gè)正方形通過正方形的對(duì)角線（這里必須是正方形，這樣可以控制x,y等距離），這樣操控斜角標(biāo)示長度只需要控制對(duì)角線長度通過path方法來繪制路徑，右邊同理，我們也不需要過多計(jì)算，只需要通過moveTo方法移動(dòng)坐標(biāo)原點(diǎn)。

而繪制字體呢以對(duì)角線中心為坐標(biāo)原點(diǎn)像左右繪制通過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;

通過計(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="熱賣中"
          app:myTextColor="#ffffff"
          app:myTextSize="16sp"
          app:tagModel="right_bar" />

常用API

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

源碼見github

github源碼地址

總結(jié)

以上所述是小編給大家介紹的Android實(shí)現(xiàn)傾斜角標(biāo)樣式,希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: