Androidtv in the Fly box check effect

I believe that many of the friends engaged in ANDROIDTV development are distressed about how to display the selected effect of item, the biggest difference between TV development and mobile is that the user can only control via a remote controller (unless, of course, your TV is touch screen ...). At this point, we need to let the user know which project is currently selected, and generally, there are several common implementations:

• By defining a selector for the background property of item, define different background styles for different states (focused, selected) to show the selected effect.

• Define the control behavior when focus is acquired by defining a global Focus listener view.getviewtreeobserver (). Addonglobalfocuschangelistener, such as zooming in, changing the background, etc.

Although the above two methods do not need to add additional elements, the operation is relatively simple, but the effect is more blunt and single, if we want to enrich the animation effect, obviously the above two ways can not meet our needs. Here, we introduce a ANDROIDTV development kit Android-tv-widget. This is an open source ANDROIDTV development framework, which has a lot of UI controls and functions for TV-end adaptation, so we can implement many of the required functions. In the Com.open.androidtvwidget.view.MainUpView, there is a control that can help us achieve the fly-box selection effect.

Implementation results:

650) this.width=650; "Src=" https://camo.githubusercontent.com/849166340c6e18cae087179b4134d8c3e67831e3/ 687474703a2f2f6769742e6f736368696e612e6e65742f75706c6f6164732f696d616765732f323031362f303931312f3131323731345f33303237633 430665f3131313930322e676966 "alt=" Input picture description "/>

Simple to use:

1. You can add this control first in our page root layout

<com.open.androidtvwidget.view.mainupview
        Android: id="@+id/mainupview"
        Android: Layout_width="Wrap_content"
        Android: layout_height="Wrap_content"
        Android: tag="Upview"
        Bind: effect_bridge="@{viewmodel.bridge}"
        Bind: rect_padding="@{viewmodel.rectpadding}"
        Bind: up_rect_drawable="@{viewmodel.rectdrawable}"/>

</RelativeLayout>

There is no need to adjust the layout, because the flying frame is normally set to invisible. There are three properties bound here, one is Effect_bridge, one is rect_padding, the other is up_rect_drawable. We can look at the definition of these three properties. In ViewModel we add the following three members (for the specific contents of databinding are not described here):

@Bindablepublic int rectdrawable = r.drawable.white_light_10; @Bindablepublic Effectnodrawbridge bridge = new Effectnodrawbridge (); @Bindablepublic rect rectpadding = new Rect (0, 10, 0, 10);

Effect_bridge is a flying frame object, we control the focus of the fly frame and move is the operation of this object, rect_padding is the inner margin of the flying frame, you can adjust the size of the Rect object, to adjust the distance between the four edges of the flying frame, we can adjust according to the actual state, And rectdrawable is the specific flying frame style, it is recommended to use the 9-patch format of the picture, so that the flying frame is not easy to deform when zooming.

What we actually need to do is mainupview itself and the corresponding bridge object.

Mainupview Mainupview = (mainupview) Mainview.findviewbyid (R.id.mainupview); Openeffectbridge bridge = ( Openeffectbridge) Mainupview.geteffectbridge ();

In the home page, we can get the Mainupview object and get the corresponding bridge through the Geteffectbridge () method.

Mainupview.setfocusview (newfocus, scale); Mainupview.setfocusview (Newfocus, oldfocus, scale);

With these two functions, we can make Mainupview capture the View object that currently has the focus, and the fly box will move and display. The scale parameter that is passed in is the magnification factor after the frame captures the view, which is used to achieve the magnified effect.

Of course, when the layout of the screen view is uneven, the flying frame effect may be more abrupt, because you can see a white box flashed on the screen, if the screen two controls between the large gap, the effect is not beautiful. We can set the animation monitoring of the flying frame, so that the flying frame is moved to the destination control before it is displayed.

Bridge.setonanimatorlistener (New openeffectbridge.newanimatorlistener ()  {                           @Override                          public void onanimationstart ( openeffectbridge bridge, view view,                                                                         animator animation)  {               &nBsp;             bridge.setvisiblewidget (True );                         }                          @Override                           public void onanimationend (openeffectbridge bridge, view view,                                                                      animator animation)  {                              if  (Msavebridge == bridge && view.hasfocus ())                                   bridge.setvisiblewidget (False);                          }                     });

Here, the Setvisiblewidget method controls whether bridge is displayed, which is hidden when passed to true. Our operation is to hide the bridge at the beginning of the animation, and then re-display the animation at the end.

The above is the basic method of using Mainupview control, of course, there are a lot of expansion of the function, we can be familiar with the use of the source after reading to continue digging. We hope to help you.

This article is from the "Davidwillo blog" blog, make sure to keep this source http://davidwillo.blog.51cto.com/12613091/1906300

Androidtv in the Fly box check effect