Here is custom view( Two ), Last article about customization view Some basic knowledge , For example, customize view Steps for 、 What functions are involved and how to implement custom properties , At the same time, a very basic custom control is implemented , A custom timer , People who need to see it can click on this link :http://www.cnblogs.com/YaoJianXun/p/5806926.html.

This time, we will talk about how to realize some more complex customization through the change of coordinate system view draw , Last time we implemented a timer like ring control , This time we'll make another change on that basis , Change the coordinate system to achieve the following effect :

Here I want to talk about android Something about the coordinate system :

1、android Coordinate system

stay android There are two common coordinate systems in :

1.1 android Coordinate system

android The coordinate system starts at the top left of the screen , To the right is x Affirmative direction , Down is y The coordinate system on the square of the axis , have access to getLocationOnScreen(intlocation[]) This function gets Android The position of the midpoint in the coordinate system , But the top left corner of the view is android The position in the coordinate system .

1.2 View coordinate system

This coordinate system describes the position of the child view in the parent view , This is the total position of the upper left corner of the child view in the parent view , The origin of the coordinate system is in the upper left corner of the parent view , To the right is x Affirmative direction , Down is y Affirmative direction .

1.3 Common functions in coordinate system

  • view Methods :

getTop(): What you get is view The distance between the top edge of itself and the top edge of the parent layout .

getLeft(): What you get is view The distance from the left side of itself to the left side of its father's layout .

getBottom(),getRight() Same as above , The difference is view The distance from the right side under itself to the right side under its parent layout .

  • MotionEvent Methods :

getX(): Gets the distance from the click event to the left of the control , View coordinates .

getY(): Gets the distance from the click event to the top of the control , View coordinates .

getRawX(),getRawY(), ditto , It's just what they get android The distance in the coordinate system , Absolute coordinates .

1.4 By moving the coordinate system view draw

Here are two functions :

  • translate(): translation android Coordinate system
  • rotate(): rotate android Coordinate system

Analyze how the effect in the above figure is realized :

  • The outer circle

I don't want to talk about this , Easy to achieve effect .

  • The scale on the dial

This is about to be analyzed , First draw 12 The scale of the dot is very large , Because it's a vertical line , You just need to specify the starting and ending points to draw them directly . And other scales , The starting and ending points are not so easy to calculate , So what to do , At this time, as long as android The coordinate system rotates a certain angle around the origin , In drawing and 12 A line in the same direction , That's all right. , It's just that the scales are different , Maybe the length of the line is different , This needs to set a condition statement for specific judgment , But the direction of the drawing is easy to get . Here is the code :

 for (int i = 0; i < 60; i++) {
// Draw the scale by rotating the coordinate system
String degree = String.valueOf(i / 5);
if (i % 15 == 0) {
mPaint2.setStrokeWidth(5);
mPaint2.setTextSize(30);
canvas.drawLine(mCircleXY, 20, mCircleXY, 80, mPaint2);
if (i == 0) {
canvas.drawText("12", mCircleXY - mPaint2.measureText(degree) / 2, 120, mPaint2);
} else {
canvas.drawText(degree, mCircleXY - mPaint2.measureText(degree) / 2, 120, mPaint2);
}
} else if (i % 5 == 0) {
mPaint2.setStrokeWidth(5);
mPaint2.setTextSize(30);
canvas.drawLine(mCircleXY, 20, mCircleXY,60, mPaint2);
canvas.drawText(degree, mCircleXY - mPaint2.measureText(degree) / 2, 100, mPaint2);
} else {
mPaint2.setStrokeWidth(5);
mPaint2.setTextSize(30);
canvas.drawLine(mCircleXY, 20, mCircleXY, 40, mPaint2);
}
canvas.rotate(6, mCircleXY, mCircleXY);
}

You can see from the code above , Each choice 6 Degree rotation 60 Time , Every time you draw a line, judge , If you count the whole number now , Draw a longer line , If it is 12 spot 、3 spot 、6 spot 、9 The length of the line drawn by the point is a little longer .

  • Draw the hour hand and minute hand

This is even easier , adopt translate() Function moves android From the origin of the coordinate system to the middle of the dial , Just draw two lines of different lengths in the middle . And in a second , Just choose a certain angle . Here is the code :

 // Translate the coordinate system , Draw the clock 
canvas.translate(mCircleXY, mCircleXY);
canvas.drawLine(0, 0, 100, 100, mPaint3); // Rotation coordinate system , Draw minute hand
canvas.rotate(6 * time, 0, 0);
canvas.drawLine(0, 0, 100, 200, mPaint4); time++;
postInvalidateDelayed(1000);

Here's the complete code :

public class CustomView extends View {
private float mCircleXY, mLength, mRadius;
private Paint mPaint1 = new Paint(); // Table arc
private Paint mPaint2 = new Paint(); // The scale of the meter
private Paint mPaint3 = new Paint(); // Watch the clock
private Paint mPaint4 = new Paint(); // Watch second hand
private WindowManager mWM;
private int time = 0;
private int hour = 0; public CustomView(Context context) {
super(context);
mPaint1.setStyle(Paint.Style.STROKE);
mPaint1.setStrokeWidth(5);
mPaint1.setAntiAlias(false);
mPaint3.setStrokeWidth(20);
mPaint4.setStrokeWidth(10);
setValues();
} public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint1.setStyle(Paint.Style.STROKE);
mPaint1.setStrokeWidth(5);
mPaint1.setAntiAlias(false);
mPaint3.setStrokeWidth(20);
mPaint4.setStrokeWidth(10);
setValues();
} private void setValues() {
mWM = (WindowManager) getContext()
.getSystemService(Context.WINDOW_SERVICE);
mLength = mWM.getDefaultDisplay().getWidth();
mCircleXY = mLength / 2;
mRadius = (float) (mLength * 0.5);
} @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// Draw the outer ring of the clock
canvas.drawCircle(mCircleXY, mCircleXY, mRadius-20, mPaint1);
// Anti aliasing
canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG
| Paint.FILTER_BITMAP_FLAG));
for (int i = 0; i < 60; i++) {
// Draw the scale by rotating the coordinate system
String degree = String.valueOf(i / 5);
if (i % 15 == 0) {
mPaint2.setStrokeWidth(5);
mPaint2.setTextSize(30);
canvas.drawLine(mCircleXY, 20, mCircleXY, 80, mPaint2);
if (i == 0) {
canvas.drawText("12", mCircleXY - mPaint2.measureText(degree) / 2, 120, mPaint2);
} else {
canvas.drawText(degree, mCircleXY - mPaint2.measureText(degree) / 2, 120, mPaint2);
}
} else if (i % 5 == 0) {
mPaint2.setStrokeWidth(5);
mPaint2.setTextSize(30);
canvas.drawLine(mCircleXY, 20, mCircleXY,60, mPaint2);
canvas.drawText(degree, mCircleXY - mPaint2.measureText(degree) / 2, 100, mPaint2);
} else {
mPaint2.setStrokeWidth(5);
mPaint2.setTextSize(30);
canvas.drawLine(mCircleXY, 20, mCircleXY, 40, mPaint2);
}
canvas.rotate(6, mCircleXY, mCircleXY);
} // Translate the coordinate system , Draw the clock
canvas.translate(mCircleXY, mCircleXY);
canvas.drawLine(0, 0, 100, 100, mPaint3); // Rotation coordinate system , Draw minute hand
canvas.rotate(6 * time, 0, 0);
canvas.drawLine(0, 0, 100, 200, mPaint4); time++;
postInvalidateDelayed(1000);
} }

So you can draw the dial as shown in the figure , Links to source code :https://github.com/jiushi555/CustomView/tree/master/CustomTimepiece.

Reprint please indicate the source .


Programmers who are not sullen are not programmers . My official account of WeChat “ That little thing ”, Here is an article every day from Monday to Friday , It's not about technology , It's just bullshit .

Customize view( Two ) More articles about

  1. Customize view( Two )

    1.View The draw By inheritance View And rewrite its onDraw() To complete the drawing . onDraw() There is a parameter , Namely Canvas object . Use this Canvas You can draw the image ,Canvas canvas = ...

  2. Android Customize View ( Two ) Advanced

    Reprint please indicate the source :http://blog.csdn.net/lmj623565791/article/details/24300125 Continue to customize View The journey , I've already introduced a custom View Examples of the basis of ...

  3. Customize View( Two )-- Inherited from ViewGroup

    Customize View There are many kinds of , The one in the last essay is completely inherited from View, This time I wrote this little book Demo It is inherited from ViewGroup Of , The main thing is to customize View Inherited from ViewGroup Let's sort out the process of , This time Dem ...

  4. Android Customize View ( Two ) Advanced

    Reprint please indicate the source :http://blog.csdn.net/lmj623565791/article/details/24300125 Continue to customize View The journey , I've already introduced a custom View Examples of the basis of ...

  5. Customize View( Two ), Powerful Canvas

    In this paper, from :http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android Using graphics processing engine in ,2D Part of it is ...

  6. Android Customize View Two ( Learn more about custom properties attrs.xml)

    1. Why customize properties To use properties , First of all, this property should exist , So if we're going to use our own properties , It has to be defined before it can be used . But it seems that we don't define our own attributes when we write layout files , But we can still use a lot of attributes , This is for ...

  7. Android Drawing mechanism ( Two )—— Customize View Draw shapes , circular , triangle , Sector , The ellipse , curve , Coordinate explanation of words and pictures

    Android Drawing mechanism ( Two )-- Customize View Draw shapes , circular , triangle , Sector , The ellipse , curve , Coordinate explanation of words and pictures We want to draw some cool View, First of all, we need to know how to draw some basic patterns , For example, rectangle , round ...

  8. Android Customize View( Two )

    Preface There is a countdown in the alarm clock application of Meizu mobile phone , This control is quite interesting . On the left is the Meizu alarm clock , On the right is the final effect we achieved , Although some details need to be optimized , But it has basically achieved the desired effect , Let's see how to achieve it first . analysis Determine width and height ...

  9. 【 Morning flowers and evening flowers 】Android Customize View Chapter ( Two )Canvas Common functions

    Preface Turn to please state , from [https://www.cnblogs.com/andy-songwei/p/10960012.html], thank you ! The last one said View In the drawing process of , The last step is draw technological process , ...

Random recommendation

  1. About fields with default values in use EF Thinking when doing the insert operation

    I'm using it today EF When doing the insert operation, I found one in the database datetime Type field (CreateDate) All the values of are null. So I quickly looked at the table structure and found that CreateDate Field is allowed to be empty . Although it is empty , But set up ...

  2. For your page icon (Favicon) Add stunning animations and pictures

    Favico.js  Let your page icon show the badge , Image or video . You can easily use animations in web icons , You can customize the type of animation , Background color and text color . It supports animation , Like a slide show , The gradient , Pop up and so on . Related articles you may be interested in ...

  3. objective-c Chapter six exercises after class 5

    topic 5: Used to flip the bits of the input number from the terminal . And then modify the program , In order to correctly enter negative numbers . code: ,result_5 = ; NSLog(@"input num_5:"); scanf(&q ...

  4. HDU1071 The area 【 integral 】

    The area Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  5. Asp.Net The method of page value is simple summary 【 original 】

    1.QueryString When on the page form according to get When sending request data to a page in the same way ,web server Will put the request data into One QEURY_STRING In the environment variable of , And then through QeueryString Fang ...

  6. java4 - function ( Method )

    One . Syllabus : 1. Defining functions encapsulates functions 2. The levels of functions are the same , You can't apply functions 3. It is easy to reuse this function 4. Functions can only be executed if they are called 5. The emergence of functions improves the reusability of code 6. function ...

  7. Frogger POJ - 2253

    The question Here you are. n A little bit ,1 As a starting point ,2 End point , All requests 1 To 2 The minimum value of the maximum value on each path of all paths . Ideas I don't want to make the shortest path Run to the side of the minimum spanning tree , Scan it again 1 To 2 The path of , Take the maximum value Be careful g++ Use %f Output !!! The constant is huge ...

  8. Decorator pattern of design pattern -java example

    Decorator pattern of design pattern Demand scenarios We have products from others , But the products provided by others are not perfect for us , We need to strengthen the function of this product , Consider using decorator mode at this time . We already have products , And the function of this product is very ...

  9. Hadoop Source code analysis FileSystem Abstract file system

    Hadopo Provides an abstract file system model FileSystem,HDFS It's one of the implementations . FileSystem yes Hadoop The abstract parent of all file systems in , It defines the basic features and operations of a file system . Fi ...

  10. vim Custom plug-ins put in pathogen management

    1. stay .vim/bundle Under the table of contents , Create an empty directory , such as cscope 2. stay cscope Let's create a plugin Folder 3. Write your own vim File put in plugin You can use it in the folder .