AndroidTV中實現飛框選中效果

標籤：androidtv   焦點控制   mainupview   androidtvwidget   飛框   

  相信很多從事AndroidTV開發的朋友都對如何展示item的選中效果感到苦惱，電視端開發與移動端最大的不同是使用者只能通過一個遙控器進行控制（當然如果你的電視是觸屏的話除外……），在這個時候，我們需要讓使用者知道當前選中的到底是哪一個項目，通常來說，有幾種常見的實現方法：

•   通過給item的background屬性定義一個selector，為不同狀態下（focused、selected）定義不同的背景樣式來展現選中的效果。

•    通過定義一個全域的焦點監聽view.getViewTreeObserver().addOnGlobalFocusChangeListener，來定義焦點獲得時的控制項行為，比如放大、改變背景等

  以上兩種方法雖然不需要另外增加元素，操作起來比較簡單，但是效果比較生硬且單一，如果我們想要更豐富的動畫效果，顯然上面兩種方式不能滿足我們的需求。在這裡，給大家介紹一個AndroidTV開發的套件Android-tv-widget。這是一個開源的AndroidTV開發架構，裡面有不少為TV端適配的UI控制項跟函數，可以方便我們實現不少所需的功能。在其中的com.open.androidtvwidget.view.MainUpView，就是一個可以協助我們實現飛框選中效果的控制項。

  實現效果：

650) this.width=650;" src="https://camo.githubusercontent.com/849166340c6e18cae087179b4134d8c3e67831e3/687474703a2f2f6769742e6f736368696e612e6e65742f75706c6f6164732f696d616765732f323031362f303931312f3131323731345f33303237633430665f3131313930322e676966" alt="輸入圖片說明" />

  簡單的使用：

    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的具體內容不在這裡細述）：

@Bindablepublic int rectDrawable = R.drawable.white_light_10;@Bindablepublic EffectNoDrawBridge bridge = new EffectNoDrawBridge();@Bindablepublic 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

AndroidTV中實現飛框選中效果