AndroidTV中利用MainUpView实现飞框选中效果

  相信很多从事AndroidTV开发的朋友都对如何展示item的选中效果感到苦恼，电视端开发与移动端最大的不同是用户只能通过一个遥控器进行控制（当然如果你的电视是触屏的话除外……），在这个时候，我们需要让用户知道当前选中的到底是哪一个项目，通常来说，有几种常见的实现方法：

•   通过给item的background属性定义一个selector，为不同状态下（focused、selected）定义不同的背景样式来展现选中的效果。

•    通过定义一个全局的焦点监听view.getViewTreeObserver().addOnGlobalFocusChangeListener，来定义焦点获得时的控件行为，比如放大、改变背景等

  以上两种方法虽然不需要另外增加元素，操作起来比较简单，但是效果比较生硬且单一，如果我们想要更丰富的动画效果，显然上面两种方式不能满足我们的需求。在这里，给大家介绍一个AndroidTV开发的套件Android-tv-widget。这是一个开源的AndroidTV开发框架，里面有不少为TV端适配的UI控件跟函数，可以方便我们实现不少所需的功能。在其中的com.open.androidtvwidget.view.MainUpView，就是一个可以帮助我们实现飞框选中效果的控件。

  实现效果：

  简单的使用：

    1.首先可以在我们的页面根布局下添加这一控件

<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>

     这里并不需要调整布局，因为飞框一般情况下我们设定为不可见的。在这里绑定了三个属性，一个是effect_bridge,一个是rect_padding,一个是up_rect_drawable.我们可以看一下这三个属性的定义。在ViewModel中我们添加如下三个成员（对于databinding的具体内容不在这里细述）：

    @Bindable
    public int rectDrawable = R.drawable.white_light_10;

    @Bindable
    public EffectNoDrawBridge bridge = new EffectNoDrawBridge();

    @Bindable
    public Rect rectPadding = new Rect(0, 10, 0, 10);

    effect_bridge是飞框对象,我们控制飞框的聚焦跟移动都是操作这一个对象，rect_padding是飞框的内边距，可以调整这个Rect对象的大小，来调整飞框离内部四个边缘的距离，我们可以根据实际的状态适当调整，而rectDrawable则是具体的飞框样式，这里推荐使用9-Patch格式的图片，这样飞框在缩放的时候不容易变形。

    实际需要我们操作的是mainupview本身以及对应的bridge对象。

    MainUpView mainUpView = (MainUpView) mainView.findViewById(R.id.mainUpView);
    OpenEffectBridge bridge = (OpenEffectBridge) mainUpView.getEffectBridge();

    在首页中，我们可以获取mainupview对象，并通过getEffectBridge()方法获取对应的bridge。

    mainUpView.setFocusView(newFocus, scale);
    mainUpView.setFocusView(newFocus, oldFocus, scale);

    利用这两个函数，我们可以使mainUpView捕获当前获得焦点的View对象，飞框也随之移动并显示。传入的scale参数是飞框捕获view后的放大系数，用于实现放大的效果。

    当然了，当屏幕上view的布局不均匀的时候，飞框效果可能比较突兀，因为可以看到一个白色的框在屏幕上闪过，如果屏幕两个控件之间的空隙较大，效果并不美观。我们可以设置飞框的动画监听，让飞框在移到目的控件后才显示。

    

    bridge.setOnAnimatorListener(new OpenEffectBridge.NewAnimatorListener() {
                        @Override
                        public void onAnimationStart(OpenEffectBridge bridge, View view, 
                                                                    Animator animation) {
                            bridge.setVisibleWidget(true);
                        }

                        @Override
                        public void onAnimationEnd(OpenEffectBridge bridge, View view,
                                                                 Animator animation) {
                            if (mSaveBridge == bridge && view.hasFocus())
                                bridge.setVisibleWidget(false);
                        }
                    });

    在这里，setVisibleWidget方法控制bridge是否显示，传入为true的时候隐藏。我们的操作是在动画开始的时候隐藏bridge，动画结束后再重新显示。

    以上就是使用MainUpView控件的基本方法，当然还有不少拓展的功能，大家可以在熟悉使用后通过阅读源码继续挖掘。希望对大家有所帮助。

本文出自 “DavidWillo的博客” 博客，请务必保留此出处http://davidwillo.blog.51cto.com/12613091/1906300