歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux基礎 >> 關於Linux

小伙伴的一個標簽庫 LabelView (隨手發了兩張小寶寶的玩耍照)

P1:這部分為廢話技術內容在P2,不想看的可跳過

最近每天都是在照顧魚,麥麥,當當之間游離回家幾乎沒學習,沒敲代碼,或者說沒開工作電腦,慢慢的罪惡感,貼兩張周末小朋友們玩耍的照片
這裡寫圖片描述

這裡寫圖片描述

但是生活還是很重要的,不能讓自己成為賺錢的工具,畢竟賺的不多。。。那如果賺的不多,那更要過的開心了。青春啊!!!


P2 今天介紹的是一個國內小伙伴的一個標簽庫,這一類的實現之前也有寫過,但是還是推薦下這位大牛的,理由? 因為看得舒服。

效果圖:

這裡寫圖片描述


How to use?

大牛沒有做Gradle的依賴,那我們就不分AS和EC了,都把代碼Copy進去就行了,東西很少,一個類+一點資源文件就好了。

像這樣:<喎?http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjxpbWcgYWx0PQ=="這裡寫圖片描述" src="http://www.2cto.com/uploadfile/Collfiles/20160224/2016022409161665.jpg" title="\" />

看下怎麼使用

 

原作者沒有給控件整那些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傳來的參數設置的距離和邊距。

實現並不是太難,一看就理解。作者的標注也在比較關鍵的位置出現了。

 
Copyright © Linux教程網 All Rights Reserved