翻翻git之---一个简单的标签控件 LabelView (随手发了两张小宝宝的玩耍照)

转载请注明出处：王亟亟的大牛之路

P1:这部分为废话技术内容在P2，不想看的可跳过

最近每天都是在照顾鱼，麦麦，当当之间游离回家几乎没学习，没敲代码，或者说没开工作电脑，慢慢的罪恶感，贴两张周末小朋友们玩耍的照片

但是生活还是很重要的，不能让自己成为赚钱的工具，毕竟赚的不多。。。那如果赚的不多，那更要过的开心了。青春啊！！！

---

P2 今天介绍的是一个国内小伙伴的一个标签库，这一类的实现之前也有写过，但是还是推荐下这位大牛的，理由？ 因为看得舒服。

效果图：

---

How to use?

大牛没有做Gradle的依赖，那我们就不分AS和EC了，都把代码Copy进去就行了，东西很少，一个类+一点资源文件就好了。

像这样：

看下怎么使用

 <me.corer.labelview.LabelView        app:num="20:00"        app:text="晚场"        app:numStyle="italic"        app:numSize="14sp"        app:textSize="9sp"        app:direction="leftTop"        app:labelTopPadding="15dp"        app:labelCenterPadding="5dp"        app:labelBottomPadding="10dp"        app:backgroundColor="@color/colorPrimaryDark"        android:layout_marginTop="@dimen/activity_vertical_margin"        android:layout_width="wrap_content"        android:layout_height="wrap_content"/>

原作者没有给控件整那些set方法（至少没有整全），只有setNum 和setText之类的所以就直接在XML里捯饬吧。

因为这个控件是作为一个独立的组织实现，并未作为一个ImageView之类的一部分，所以使用的时候盖在你所需要标示的控件上面就行了，位置的话就自己设置就行了。

简单的拆一下代码，讲一下实现流程（适用于新手模仿）

首先，他是一个基础的View,并不是继承于别的“高级”控件，单纯的画出来的

public class LabelView extends View

然后默认是 一个 等边直角三角形的样子角度如下

public static final int DEGREES_LEFT=-45;public static final int DEGREES_RIGHT=45;

在构造函数中初始化一系列尺寸啊，颜色啊什么的属性。

 public LabelView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.LabelTextView);        mTopPadding = ta.getDimension(R.styleable.LabelTextView_labelTopPadding, dp2px(7));        mCenterPadding = ta.getDimension(R.styleable.LabelTextView_labelCenterPadding, dp2px(3));        mBottomPadding = ta.getDimension(R.styleable.LabelTextView_labelBottomPadding, dp2px(3));        mBackGroundColor=ta.getColor(R.styleable.LabelTextView_backgroundColor, Color.parseColor("#66000000"));        mTextColor=ta.getColor(R.styleable.LabelTextView_textColor, Color.WHITE);        mNumColor=ta.getColor(R.styleable.LabelTextView_numColor, Color.WHITE);        mTextSize=ta.getDimension(R.styleable.LabelTextView_textSize,sp2px(8));        mNumSize=ta.getDimension(R.styleable.LabelTextView_numSize,sp2px(11));        mText=ta.getString(R.styleable.LabelTextView_text);        mNum=ta.getString(R.styleable.LabelTextView_num);        mTextStyle=ta.getInt(R.styleable.LabelTextView_textStyle,0);        mNumStyle=ta.getInt(R.styleable.LabelTextView_numStyle,2);        mDegrees = ta.getInt(R.styleable.LabelTextView_direction, 45);        ta.recycle();        initTextPaint();        initNumPaint();        initTrianglePaint();        resetTextStatus();        resetNumStatus();    }

里面调用的方法都是些初始化的操作，就不说了。

我们先来说下控制大小的方法。

 @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        height = (int) (mTopPadding + mCenterPadding + mBottomPadding + mTextHeight + mNumHeight);        width = 2 * height;        //控件的真正高度，勾股定理...        int realHeight= (int) (height * Math.sqrt(2));        setMeasuredDimension(width,realHeight);    }

首先计算出个个尺寸（间距，大小什么的）的大小，然后勾股定理一下就OK了。

再是具体绘制的操作

 @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        canvas.save();        //位移和旋转canvas        canvas.translate(0, (float) ((height * Math.sqrt(2)) - height));        if (mDegrees==DEGREES_LEFT){            canvas.rotate(mDegrees, 0, height);        }else if (mDegrees==DEGREES_RIGHT){            canvas.rotate(mDegrees, width, height);        }       //绘制三角形背景        Path path = new Path();        path.moveTo(0, height);        path.lineTo(width / 2, 0);        path.lineTo(width, height);        path.close();        canvas.drawPath(path, mTrianglePaint);        //绘制修饰文本        canvas.drawText(mText, (width) / 2, mTopPadding + mTextHeight, mTextPaint);        //绘制数字文本        canvas.drawText(mNum, (width) / 2, (mTopPadding + mTextHeight + mCenterPadding + mNumHeight), mNumPaint);        canvas.restore();    }

先根据参数旋转画布，然后画三角形的背景，就是一条线一条线一条线 BingGo合成三角形啦 然后填充颜色就好了，在之后就是画文字，画数字，都是根据xml传来的参数设置的距离和边距。

实现并不是太难，一看就理解。作者的标注也在比较关键的位置出现了。

源码地址：https://github.com/ddwhan0123/LabelView

原作者git:https://github.com/corerzhang