Android Curious baby _ watch face World _07

Say less nonsense, first:

(see 4 points at the bottom)

Forget to see the viewpager at the bottom of the app on the dot indicator can scroll with the effect of scrolling, then began to think how to achieve, and finally found that the effect is very simple, to get practiced hand custom view is very good.

Before writing code:

Before writing the code must have at least a general idea, and do not think about the beginning of writing, must be in the overall mind to start writing. For example, when I realized this effect, I was thinking of rewriting the linear layout and then dynamically adding dots to control the interval through margin. But I found that this approach in the rolling process logic is more complex to write, since it is just a few dots, directly inherit the view to draw out the way easier. The class that was eventually written, plus a bunch of auto-generated code, was more than 100 lines.

It's not hard to write code, it's hard to think of the right ideas.

HD Feed Code:

(1) initialization

Public Animdian (context context, AttributeSet Attrs) {Super (context, attrs); TypedArray array = context.obtainstyledattributes (Attrs, R.styleable.animdian);d Iancount = Array.getinteger ( R.styleable.animdian_dian_count, 5);d Iancolor = Array.getcolor (R.styleable.animdian_dian_color, 0XFFFF0000); Dianbgcolor = Array.getcolor (R.styleable.animdian_dian_bg_color, 0x88ffffff); margin = Array.getinteger ( R.styleable.animdian_dian_margin);d iansize = Array.getinteger (r.styleable.animdian_dian_size, 20); Array.recycle (); init ();}

Some custom attributes can be set in XML, and on the teaching of custom properties online A lot, I will not repeat.

private void Init () {//Initialize two brushes dianpaint = new Paint ();d Ianpaint.setantialias (True);d Ianpaint.setcolor (Diancolor); Bgpaint = new Paint (); Bgpaint.setantialias (true); Bgpaint.setcolor (Dianbgcolor);}

Initialize two brushes, one to display the selected foreground, and one for the background point.

(2) Measuring size

protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {//measure itself size//width = width of point (diameter) * Number of points + distance between points * (number of points-1) int width = diansize * diancount + margin * (dianCount-1);//high = point height (diameter) int height = Diansize;int Wmeasurespec = Measurespec. Makemeasurespec (width, measurespec.exactly); int hmeasurespec = Measurespec.makemeasurespec (height, measurespec.exactly);//Set calculation result Setmeasureddimension (Wmeasurespec, hmeasurespec);}

The size of this view is very simple, and I don't waste my saliva.

(3) Painting

Write a custom view is a test process, very few one-time over the entire effect of writing, here we first consider the static, that is, no scrolling effect of how to write, and then consider how to add scrolling effect.

First, the static implementation:

public void Draw (canvas canvas) {//Draw back attractions for (int i = 0; i < Diancount; i++) {Drawbgdian (canvas, i);} Draw the selected point if (Selectposition >-1) {Drawdian (canvas);}}

the static implementation is very simple, is to draw a few background points, and then in the selected location and then draw a different color point to cover the background point.

Note: The post-painting will obscure the first draw.

A little bit more complicated here is the calculation of the position, but as long as serious thinking about the existing data, and whether there are any rules, draw a sketch, is generally not difficult to solve.

Draw Background points:

private void Drawbgdian (canvas canvas, int i) {canvas.drawcircle (diansize + margin) * i + DIANSIZE/2, DIANSIZE/2, Dia NSIZE/2, bgpaint);}

The y-coordinate of the center of the circle is easy to calculate, but the x-coordinate needs to be sketched. Think about it and let your brain move.

The point of the selected state is the same as the background point, only one is drawn, and a brush with no color is used:

private void Drawdian (canvas canvas) {canvas.drawcircle (diansize + margin) * selectposition + DIANSIZE/2, DIANSIZE/2, DIANSIZE/2, dianpaint);}

in this way, the static effect is complete. Now start thinking about how to implement the scrolling effect:

First, to let the red dot scroll, there must be scrolling data, such as scrolling direction, scrolling distance. So we have to get the rolling data source first.

Because we are used on the Viewpager, it is easy to think of setting Onpagechangelistener to Viewpager, and then passing the data to our Animdian:

public void onpagescrolled (int arg0, float arg1, int arg2) {animdian.onpagescrolled (arg0, arg1, arg2);}

then you have to figure out what the 3 parameters mean, print the values, and the result is:

Summary:

The return parameter here is not affected by the sliding direction, and the left side is used as the benchmark, and two page is displayed on the screen when sliding:

ARG0: Index on the left page

Arg1: The percentage of the left page that does not show up, or the percentage that is understood as the part displayed on the right page

Arg2: Same as arg1, but specific pixel values

We only need arg0 and arg1 here, we don't have pixel values.

With scrolling state data, you can calculate the position of the scroll point:

public void onpagescrolled (int arg0, float arg1, int arg2) {if (arg1 > 0 && arg1 < 1) {scrollstate = state_s crolling;//scrolling when calculating the distance from the left of the former attraction Scrolldiancx = (diansize + margin) * (float) (arg0 + arg1) + diansize/2;invalidate ();}}

knowing how to calculate the position after the meaning of the parameter still requires us to move the brain.

Once you have the position, you can draw a scrolling point:

private void Drawscrolldian (canvas canvas) {canvas.drawcircle (Scrolldiancx, DIANSIZE/2, DIANSIZE/2, dianpaint);}

of course, when scrolling, you should not draw the point of the selected position, so modify the Draw method logic:

public void Draw (canvas canvas) {//Draw back attractions for (int i = 0; i < Diancount; i++) {Drawbgdian (canvas, i);} If not in scrolling state, draw the foreground point of the selected position if (Selectposition >-1 && scrollstate! = state_scrolling) {Drawdian (canvas);} In the scrolling state, draw the scroll point if (scrollstate = = state_scrolling) {Drawscrolldian (canvas);}}

You should also notify our Animdian when the scroll ends and the selected positions change:

public void onpagescrollstatechanged (int arg0) {//arg0==0 indicates that the scroll state is End if (arg0 = = 0) {animdian.onpagescrollend ();}} public void onpageselected (int arg0) {animdian.setselectposition (arg0);}

to modify the scrolling state of the Animdian at the end of scrolling:

public void Onpagescrollend () {scrollstate = State_ready;invalidate ();}

Also , when the selected position is changed, it should be processed:

public void setselectposition (int selectposition) {this.selectposition = selectposition;//external can be set to monitor the change of the selected position, generally do not need, Listen directly to the Viewpager if (mlistener! = null) Mlistener.onselectchange (selectposition);//If you are currently scrolling, there is no need to request repainting. Wait until the end of the scroll to request the redraw if (scrollstate = = state_scrolling) return;invalidate ();}

at this point, the custom view is complete. Although a bit simple, but as a novice at the beginning or not to challenge too complex custom view, first write a little bit of a simple sense of accomplishment and self-confidence, thinking and understanding of the principle.

Ready to go home for the New Year!!!

Demo download

Android Curious baby _ watch face World _07