LabelView, a tag library of the partner (two pictures of playing with the baby are randomly sent)

Source: Internet
Author: User

LabelView, a tag library of the partner (two pictures of playing with the baby are randomly sent)
P1: This part is divided into the nonsense technology content in P2. Skip if you don't want to see it.

Recently, I have been taking care of fish, MIC and Dangdang. I almost didn't learn to go home, I didn't think about code, or I didn't start my work computer, so I felt guilty. I posted two photos of my friends playing on weekends.

However, life is still very important. You cannot make yourself a tool to make money. After all, you don't make much money... If you do not earn much, you will have a better time. Young !!!

P2 introduces a label library of a small domestic partner today. This implementation has been written before, but I still recommend this Daniel. Why? Because it looks comfortable.

:

How to use?

Without the Gradle dependency, we can Copy the code without having to the AS and EC. There are very few things, just a class + A resource file.

Like this: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4NCjxwPjxpbWcgYWx0PQ = "here write picture description" src = "http://www.bkjia.com/uploads/allimg/160226/0403554C5-3.jpg" title = "\"/>

See how to use

 
  

The original author did not set the set methods for the controls (at least not all), and only the setNum and setText methods were used. Therefore, they should directly compile the methods in XML.

Because this control is implemented as an independent organization and is not a part of an ImageView, you can use it on the control you want to mark, you can set the location on your own.

Simple code splitting and implementation process (suitable for beginners to imitate)

First of all, it is a basic View, not inherited from other "advanced" controls.

public class LabelView extends View

By default, the angle of an equi-side right triangle is as follows:

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

Initialize a series of dimensions, colors, and other attributes in the constructor.

 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();    }

The methods called in are all initialization operations.

Let's talk about how to control the size.

@ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super. onMeasure (widthMeasureSpec, heightMeasureSpec); height = (int) (mTopPadding + mCenterPadding + mBottomPadding + mTextHeight + mNumHeight); width = 2 * height; // The true height of the control, stock theorem... int realHeight = (int) (height * Math. sqrt (2); setMeasuredDimension (width, realHeight );}

Calculate the size of each dimension (spacing, size or something), and then check the stock theorem.

Next is the specific drawing operation.

@ Override protected void onDraw (Canvas canvas) {super. onDraw (canvas); canvas. save (); // shift and rotate the 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);} // draw the triangle background Path path = new Path (); path. moveTo (0, height); path. lineTo (width/2, 0); path. lineTo (width, height); path. close (); canvas. drawPath (path, mTrianglePaint); // draw and modify the text canvas. drawText (mText, (width)/2, mTopPadding + mTextHeight, mTextPaint); // draw a digital text canvas. drawText (mNum, (width)/2, (mTopPadding + mTextHeight + mCenterPadding + mNumHeight), mNumPaint); canvas. restore ();}

First, rotate the canvas according to the parameters, and then draw the background of the triangle. It is a line, line, and line. BingGo is used to synthesize the triangle, and then fill in the color. After that, draw text and numbers, the distance and margin are set based on the parameters sent from xml.

Implementation is not too difficult. You can understand it at first glance. The author's note is also in a key position.

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.