Android Imitation micro-radar radiation search Buddy (logic clear Implementation Simple) _android

Source: Internet
Author: User
Tags radar

Unconsciously this spring festival has been over, sorry that the family did not have a network, not in time to send blessings to everyone, today back to Shenzhen, tomorrow will work, small partners are not like me? Today is about a lot of people have seen the animation, radar search friends, the principle is very simple, you read my analysis, it will feel very simple, international practice, no picture no truth, we first look at the effect of the picture, right, really
The test machine has been sent, and this time should always be shown with the simulator!

Imitation micro-radar scanning, imitation Ann Choweixin, cloud broadcast radar scanning animation effect Click on the middle of the black circle to start scanning animation, click Reset again, need this effect of friends can download their own look.

The effect diagram looks like this:

This interface is believed that we all know, we say under the principle, actually on three levels

In the middle is a picture, then draw four circles, this should be simple, you can not look at the Android graphics mechanism (ii)--Custom view drawing, circle, triangle, pie, ellipse, curve, text and picture coordinates explained, then the top is a gradient of the circle, We just have to keep him spinning, so we'll build a new project--radarsearch

Layou_main.xml

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"
xmlns:tools= "http:// Schemas.android.com/tools "
android:layout_width=" match_parent "
android:layout_height=" Match_parent "
android:background= "@drawable/photo" >
<com.lgl.radarsearch.radarview
android:layout_width= " Match_parent "
android:layout_height=" match_parent "/>
<imageview android:layout_width=
" Wrap_ Content "
android:layout_height=" wrap_content "
android:layout_centerinparent=" true "
android:src= "@drawable/circle_photo"/>
</RelativeLayout>

We have a new radarview.

Radarview package com.lgl.radarsearch;
Import Android.content.Context;
Import Android.graphics.Canvas;
Import Android.graphics.Color;
Import Android.graphics.Matrix;
Import Android.graphics.Paint;
Import Android.graphics.Paint.Style;
Import Android.graphics.Shader;
Import android.graphics.SweepGradient;
Import Android.os.Handler;
Import Android.util.AttributeSet;
Import Android.view.View; /** * Radar Search * * @author LGL * */public class Radarview extends View {/** * thinking: We first initialize the brush, and get to the width of the control, in the Onmeasure () to set the full, and then in the
The OnDraw () method draws four static circles and a gradient circle, * We use matrix matrices to keep him spinning so that we can achieve the desired effect. * * Private Paint mpaintline, mpaintcircle;
private int W, H;
Animation private matrix matrix;
angle of rotation private int start;
Handler Timing Animation Private Handler Handler = new Handler (); Private Runnable Run = new Runnable () {@Override public void run () {start = start + 1; matrix = new Matrix ();//parameter: Rotation angle
, the x,y coordinate points around the point coordinates matrix.postrotate (start, W/2, H/2);
Refresh Redraw RadarView.this.invalidate ();
Continue circulation handler.postdelayed (run, 60); }
}; Public Radarview (context, AttributeSet attrs) {Super (context, attrs); Initview ();//Get high width w = context.getresource
S (). Getdisplaymetrics (). Widthpixels;
h = context.getresources (). Getdisplaymetrics (). Heightpixels;
Consistent rotation handler.post (run); private void Initview () {mpaintline = new Paint (); Mpaintline.setcolor (Color.White); Mpaintline.setantialias (true); MP
Aintline.setstyle (Style.stroke);
Mpaintcircle = new Paint ();
Mpaintcircle.setcolor (color.red);
Mpaintcircle.setantialias (TRUE);
Matrix = new Matrix (); /** * Measurement * * @author LGL/@Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {//Set covered S
Etmeasureddimension (W, h); @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas);//Draw four circular canvas.drawcircle (W/2, H/2, W/2, M
Paintline);
Canvas.drawcircle (W/2, H/2, W/3, mpaintline);
Canvas.drawcircle (W/2, H/2, W * 7/10, Mpaintline);
Canvas.drawcircle (W/2, H/2, W/4, mpaintline); Draw a gradient circle Shader mshader = new SweEpgradient (W/2, H/2, Color.transparent, Color.parsecolor ("#AAAAAAAA"));
Gradient Mpaintcircle.setshader (Mshader) when drawing; Increase the rotation animation, using the matrix to achieve canvas.concat (matrices);
Predecessor Animation Canvas.drawcircle (W/2, H/2, W * 7/10, mpaintcircle); }
}

The above is a small set to introduce the Android imitation micro-radar radiation search friends (logic clear to achieve simple) the relevant knowledge, I hope to help.

Related Article

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.