Android Curious baby _ watch face World _05

The last article on a fried chicken fried chicken Simple Custom ProgressBar, this one based on the foundation of the previous extension for Seekbar, did not read the previous article, please read first: Portal

First on (2G memory of the machine running the simulator, so a little card):

This effect didn't know where I had seen it before, and I forgot about it.

Below to get to the chase:

The measuring size and the drawing part are used in the previous article, ProgressBar, please go above the portal.

Compare the extension of the previous article:

(1)Seekbar can change the scale by touch

(2)add a floating view above Seekbar that shows the current scale (followed by Floatview)

(1) Change the scale by touch:

This is easy to implement, as long as the touch event is handled, then the scale is modified based on the touch coordinates and the request is redrawn.

One thing to be aware of is to deal with a critical state, otherwise it may be a negative scale or a maximum of 99.

Because this is very simple, no longer say, the code will wait a moment with the implementation of Floatview , because Floatview also need to touch the event.

(2) The realization of floating view:

Before seeing this effect on the Internet, I was thinking about how to achieve it.

At first I thought that by listening to the touch event, I could calculate the position of the floatview and then draw it out in OnDraw.

But I found the problem before I started to write it, and that's the case . Floatview is part of the Seekbar and its position is outside the Seekbar, so Floatview is not visible.

Since there is a problem, then think about the solution, I think of three ways:

(1) Dynamically change the height of the Seekbar, so that Floatview can be displayed. However, another problem is raised, and the adjacent view is squeezed, so the method is not feasible.

(2) I remember ViewGroup has a property that allows the child view to exceed its own display range, which I can set in code like this:

((ViewGroup) getParent ()). Setclipchildren (True);

But the problem with this method is more, first of all, you let your direct parent view allow you to exceeddisplay range, but perhaps your Floatview appears outside the scope of your immediate parent view, so you have to loop through the parent view, set all the parent view's Clipchildren properties, This may affect other view within the page. So this method is not recommended, we should only show Floatview and avoid having any effect on other view in any layout.

(3) Do not draw in OnDraw, use WindowManager to add floatview:

Bingo, this is it. Use this method Floatview does not belong to Seekbar, even does not belong to this page, can be said to belong to this screen, so will not affect any view within the page. What's even better is that we can show any view, not as much as we can draw in the OnDraw method (in fact, you can draw other view in the OnDraw method, but it's more troublesome to deal with).

In fact, we commonly used Popupwindow and now many applications have desktop suspended windows are this method.

OK, Let's start with the implementation of this method, it's unclear how to add Floatview reference with WindowManager my other blog post: portal

(1) Create a Floatview:

Create Floatviewfloatview = new TextView (GetContext ()); floatview.setgravity (Gravity.center); Floatview.setbackgroundresource (R.drawable.shape_circle_blue); Floatview.settextcolor (0XFFFFFFFF); Floatviewwidth = (int) dp2px (+); floatviewheight = Floatviewwidth;

(2) Initialize the Floatview layoutparams:

Floatview added to window parameter initialization FLOATLP = new Layoutparams (); floatlp.width = Floatviewwidth;floatlp.height = floatviewheight;floatlp.gravity = Gravity.left | Gravity.top;floatlp.format = Pixelformat.rgba_8888;floatlp.windowanimations = R.style.pppanim;

Notice here the Windowanimations property, is to add the entry and exit animation effect for Floatview, add the way withPopupwindow are the same (they are all added through WindowManager ), you can see the animation style:

    <style name= "Pppanim" >        <item name= "android:windowenteranimation" > @anim/ppp</item>        < Item Name= "Android:windowexitanimation" > @anim/pppout</item>    </style>

The specific animation can be arbitrarily defined by itself, enter represents the animation when added, exit represents the removal.

(3) Start showing Floatview:

The display of the Floatview is linked to the touch event. We should update the location of the Floatview and the displayed scale when adding the Floatview,move event to the window at the down event, removing Floatview from the window when the Up event occurs.

Note: Adding two times the same view to the window and attempting to remove a view that is not added to the window will result in an exception.

@Overridepublic boolean ontouchevent (Motionevent event) {switch (event.getaction ()) {case motionevent.action_down:// Get status bar Height statusheight = getstatusheight (Mcontext);//Modify Scale Fontrectf.right = Event.getx (); changeprogress ();// Modify Floatview display text Floatview.settext (mprogress + "");//modify Floatview x and Y coordinates//X coordinate = width of x-floatview of the current touch/2+ The left coordinate of the ProgressBar floatlp.x = (int) event.getrawx ()-floatviewwidth/2;//y-coordinate = Relative screen Touch x-coordinate-vertical interval based on screen density-the height of the status bar-floatview floatlp.y = (int) Event.getrawy ()-mfloatverticalspacing- statusheight-floatviewheight;//add Floatview into Windowwm.addview (Floatview, FLOATLP); Break;case MotionEvent.ACTION_ Move:float newx = Event.getx ();//Critical handling if (Newx < 0) {newx = 0;} else if (Newx > Mwidth) {newx = Mwidth;} Modify the scale fontrectf.right = newx;changeprogress ();//modify Floatview display text Floatview.settext (mprogress + "");//Modify the x-coordinate of Floatview Critical handling, only if the touch is within the bar range to update if (EVENT.GETRAWX () >= getLeft () && event.getrawx () <= getRight ()) {floatlp.x = (in T) event.getrawx ()-FLOATVIEWWIdth/2;//update the position of Floatview in window Wm.updateviewlayout (Floatview, FLOATLP);} Break;case MotionEvent.ACTION_CANCEL:case motionevent.action_up://remove floatview//from window Reported illegalargumentexception in version 2.3 Simulator, not yet identified cause wm.removeview (Floatview); We want to handle touch events, so here to return true, for touch events not clear, find me another post return true;}

Look at the notes, I wrote them very carefully. What is more complicated here is the calculation of the position and critical processing of the Floatview.

Notice the difference between getx () and GETRAWX ():

GetX () is relative to the coordinates of this seekbar, andgetrawx () is relative to the screen's coordinates.

So when we calculate the scale, we should use GetX (). While calculating the location of Floatview, our Floatview is added to the screen instead of adding to Seekbar, should use getrawx (), basically add view with WindowManager, in most cases should be used getrawx ().

Found there is nothing to explain, do not understand the words download demo own research and research, a bit of the basis of the proposal to directly test their own implementation, the principle is very simple.

Of course, this control has many places to optimize, such as: Many properties can be written by external dynamic settings, such as brush color, floatview appearance, Floatview animation,floatview vertical spacing. There are 2.3 of the simulator in the removal of Floatview do not know why the error, and can not find the real machine test, have to know the reason of kneeling for comment pointing.

Demo download

Android Curious baby _ watch face World _05