翻翻git之---一個簡單的標籤控制元件 LabelView (隨手發了兩張小寶寶的玩耍照)
阿新 • • 發佈:2018-12-23
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傳來的引數設定的距離和邊距。
實現並不是太難,一看就理解。作者的標註也在比較關鍵的位置出現了。