Android custom view for image Movement

Android custom view for image Movement

-- (Custom view and attributes)

Reprint instructions Source: http://blog.csdn.net/liyulei316686082/article/details/7204191

 

Here is a small task I have done a few days ago.

First, understand the requirements. There is a three-dimensional graph with a point. We want to move this point on this graph.

So what should we do?

You should also understand the question.

This simplified example only moves through the touch screen. If you want to control it by pressing a button or button, you only need to implement the ontouchevent () function.

 

Step 1. Create a project. A new custom View class: (class mypictureview extends view)

The following is the constructor of this class:

Public mypictureview (context, attributeset attrs ){
Super (context, attrs );
Mcontext = context;

T ypedarray A = context. obtainstyledattributes (attrs,
R. styleable. eqsoundeffect );

Final int n = A. getindexcount ();
For (INT I = 0; I <n; I ++ ){
Int ATTR = A. getindex (I );
Switch (ATTR ){
Case R. styleable. eqsoundeffect_pointx:
BMP _x = A. getdimension (R. styleable. eqsoundeffect_pointx, 0 );
Break;
Case R. styleable. eqsoundeffect_pointy:
BMP _y = A. getdimension (R. styleable. eqsoundeffect_pointy, 0 );
Break;
Case R. styleable. eqsoundeffect_displaycoordinates:
Mdrawfrlr = A. getdrawable (ATTR );
System. Out. println ("mdrawfrlr:" + mdrawfrlr );
Mfrlrbg = (bitmapdrawable) mdrawfrlr). getbitmap ();
Break;
Case R. styleable. eqsoundeffect_dispalypoint:
Mdrawpoint = A. getdrawable (ATTR );
System. Out. println ("mdrawpoint:" + mdrawpoint );
Mpoint = (bitmapdrawable) mdrawpoint). getbitmap ();
Break;

}
}

Mpaint = new paint ();
Mpaint. setcolor (color. Blue); // you can specify the paint color.
}

Here we will analyze the role of the following method:

1. Simply put, it has only one function, that is, getting custom attributes from the XML layout file.

Two images: one is the coordinate chart, that is, the background image of the point. The other is to move the dot image.

The original coordinates of the two points. (Switch)

2. With the coordinate chart and the coordinate point, we will also draw them out, so of course we need to set the paint brush.

 

Step 2: draw our view, which requires rewriting ondraw (in mypictureview)

 

@ Override
Protected void ondraw (canvas ){
Super. ondraw (canvas );

Try {
If (canvas! = NULL ){
// Background image
Canvas. drawbitmap (mfrlrbg, 0, 0, mpaint );
// Move the vertex
Canvas. drawbitmap (mpoint, BMP _x, BMP _y, mpaint );
}
} Catch (exception e ){
E. printstacktrace ();
} Finally {
}
// Canvas. drawtext ("liyulei", BMP _x + 2, BMP _y + 10, mpaint );

}

 

Here, we can display our custom view.

 

Step 3. Move the moved image. We may think that we are constantly re-painting our views, that is, the ondraw method.

This method is used to draw points: canvas. drawbitmap (mpoint, BMP _x, BMP _y, mpaint );

You only need to change the coordinates (BMP _x, BMP _y ). Move the animation to draw a different place.

So when will it be moved. Of course, when we touch the screen, we get the X and Y coordinates. And call this. invalidate (); to re-paint our view.

So you can move it.

Public Boolean ontouchevent (motionevent event ){
BMP _x = event. getx ();
BMP _y = event. Gety ();

This. invalidate ();
Return super. ontouchevent (event );
}

 

 

Extension supplement:

1,

Why do we need to customize attributes and what are the implementations of attributes?

If I customize this view class in other packages. The resource image of the current package is referenced. If we reference resources in the package where mypictureview is located, and

Generate a lib library. When you reference this package, you cannot obtain the image.

This is my problem. Then, you can use the XML file to customize the attributes and modify the image at will.

Sub-body implementation: Create the values/attrs. xml file:

<? XML version = "1.0" encoding = "UTF-8"?>

<Resources>
<Declare-styleable name = "eqsoundeffect">
<ATTR name = "displaycoordinates" format = "Reference"/>
<ATTR name = "dispalypoint" format = "Reference"/>
<ATTR name = "pointx" format = "dimension"/>
<ATTR name = "Pointy" format = "dimension"/>
</Declare-styleable>
</Resources>

Describes the attributes to be customized. Let typedarray A = context. obtainstyledattributes (attrs, R. styleable. eqsoundeffect );

Recognize custom attributes. If this XML is used to assign values to these attributes. Then typedarray A can be obtained.

How to assign values in XML?

<Relativelayout xmlns: Android = "http://schemas.android.com/apk/res/android"
Xmlns: foryou = "http://schemas.android.com/apk/res/com.tokenwireless.tricycle.skindefault"
Android: layout_width = "match_parent"
Android: layout_height = "match_parent">

<Com. liyulei. mypictureview

Android: Id = "@ + ID/fge_eq_seat_frlr"
Android: layout_width = "322dip"
Android: layout_height = "307dip"
Android: layout_marginleft = "449dip"
Android: layout_margintop = "77dip"
Foryou: pointx = "149dip"
Foryou: Pointy = "113dip"
Foryou: displaycoordinates = "@ drawable/fge_eq_seat_frlr"
Foryou: dispalypoint = "@ drawable/fge_eq_seat_point"
/>
 

</Relativelayout>

 

Note the following:

With this:

Xmlns: foryou = "http://schemas.android.com/apk/res/com.tokenwireless.tricycle.skindefault"

In order to use my own name:

Foryou: pointx = "149dip"
Foryou: Pointy = "113dip"
Foryou: displaycoordinates = "@ drawable/fge_eq_seat_frlr"
Foryou: dispalypoint = "@ drawable/fge_eq_seat_point"

Extension supplement:

2. Do you want to let others know that the custom view has moved?

For more information, see onclicklistener.

View the source code to see what it is:

1> View has a member variable: protected onclicklistener monclicklistener;

2> Public interface onclicklistener {
/**
* Called when a view has been clicked.
*
* @ Param v the view that was clicked.
*/
Void onclick (view V );
}

This view declares this interface again.

3> when we setonclicklistener (listener), we click to call our onclick (view V );

 

We can also do this:

1. Declare an interface in mypictureview:

Public interface myontouchlistener {
Void myontouchlistener (int x, int y );
}
2. Add the member variable myontouchlistener mmyontouchlistener = NULL;

3. Call the myontouchlistener of myontouchlistener during ontouchevent.

If (myontouchlistener! = NULL ){

Myontouchlistener. myontouchlistener (x, y );

}

4. Provides a function setmyontouchlistener.

Public void setmyontouchlistener (myontouchlistener L ){

Myontouchlistener = L;

}

In this way, we have implemented our own listener.

 

 

This is the result after implementation:

 

If you want source code, leave a mailbox.

If there are too many people, I can sort them out and simplify them for you.