Android TＶ开发 焦点框

Android TＶ开发　焦点框

1. 对于TV或者投影设备来说说，各种事件的处理，主要依赖于遥控器，通过焦点框来显示焦点出现的位置
2. 一般可以通过响应事件来切换控件的背景（例：drawable/selector.xml），但是影响用户体验
3. 通过焦点框的动画效果，使用平移动画绘制焦点框的移动轨迹，并且焦点框随着控件的形状而变化。
   动画最终状态是,焦点框从失去焦点的位置移动到获得焦点的位置,控件放大,焦点框尺寸最后变为放大后的控件尺寸.

设计思路

1. 焦点框位于布局最上层，当控件获取焦点后，焦点框移动到控件上方
2. 获取当前位置及大小
3. 获取获取焦点控件的位置及大小
4. 计算出平移距离及移动后的大小
5. 开启动画，设置动画效果(移动时间及加速效果等)

自定义焦点框代码

/**
 * 自定义焦点框
 */
public class FocusBorderView extends AppCompatButton {

    private int moveCount;//记录次数，第一次不出现平移动画
    public static final int TRAN_DUR_ANIM = 300;//平移时间
    private static final int DEFAULT_BACKGROUND_RESOURCE_ID = R.drawable.icon_focus_border;
    private int fixX = 0;//x轴偏移量
    private int fixY = 0;//y轴偏移量

    public FocusBorderView(Context context) {
        this(context, null);
    }

    public FocusBorderView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public FocusBorderView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.FocusBorderView, defStyle, 0);
        setBackgroundResource(typedArray.getResourceId(R.styleable.FocusBorderView_focus_border_background, DEFAULT_BACKGROUND_RESOURCE_ID));
        typedArray.recycle();
        setFocusable(false);
        setClickable(false);
    }

    public void runTranslateAnimation(View toView) {
        runTranslateAnimation(toView, 1.0F, 1.0F);
    }

    public void runTranslateAnimation(View toView, final float scaleX, final float scaleY) {
        if (toView instanceof AbsListView) {
            AbsListView absListView = (AbsListView) toView;
            absListView.setOnItemSelectedListener(new OnItemSelectedListener() {

                public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                    runTranslateAnimation(view, scaleX, scaleY);
                }

                public void onNothingSelected(AdapterView<?> parent) {

                }
            });
            toView = absListView.getSelectedView();
        }

        Rect fromRect = findLocationWithView(this);

        if (toView == null) {
            return;
        }
        Rect toRect = findLocationWithView(toView);

        int x = toRect.left - fromRect.left;
        int y = toRect.top - fromRect.top;

        int width = (int) (toView.getWidth() * scaleX);
        int height = (int) (toView.getHeight() * scaleY);
        int deltaX = (int) ((toView.getWidth() * Math.abs(scaleX - 1)) / 2.0f);
        int deltaY = (int) ((toView.getHeight() * Math.abs(scaleY - 1)) / 2.0f);

        x += fixX;
        y += fixY;
        flyWhiteBorder(width, height, x - deltaX, y - deltaY);
    }

    /**
     * 焦点框飞动、移动、变大
     *
     * @param width  框的宽
     * @param height 框的高
     * @param x      x坐标偏移量，相对于初始的框的中心点
     * @param y      y坐标偏移量，相对于初始的框的中心点
     */
    @SuppressLint("NewApi")
    private void flyWhiteBorder(int width, int height, float x, float y) {
        AnimatorSet animSet = new AnimatorSet();
        animSet.play(ObjectAnimator.ofFloat(this, "x", x)).with(ObjectAnimator.ofFloat(this, "y", y))
                .with(ObjectAnimator.ofInt(this, "width", this.getWidth(), width))
                .with(ObjectAnimator.ofInt(this, "height", this.getHeight(), height));
        animSet.setInterpolator(new DecelerateInterpolator());
        animSet.addListener(flyListener);
        animSet.setDuration(TRAN_DUR_ANIM).start();
    }

    /**
     * 获取View的位置
     *
     * @param view 获取的控件
     * @return 位置
     */
    public Rect findLocationWithView(View view) {
        ViewGroup root = (ViewGroup) this.getParent();
        Rect rect = new Rect();
        view.getDrawingRect(rect);
        root.offsetDescendantRectToMyCoords(view, rect);
        return rect;
    }

    private Animator.AnimatorListener flyListener = new Animator.AnimatorListener() {

        public void onAnimationCancel(Animator arg0) {
        }

        public void onAnimationEnd(Animator arg0) {
            moveCount++;
            setVisibility(View.VISIBLE);
        }

        public void onAnimationRepeat(Animator arg0) {
        }

        public void onAnimationStart(Animator arg0) {
            if (moveCount != 0 && getVisibility() != View.VISIBLE) {
                setVisibility(View.VISIBLE);
            }
        }
    };

    public int getFixX() {
        return fixX;
    }

    public void setFixX(int fixX) {
        this.fixX = fixX;
    }

    public int getFixY() {
        return fixY;
    }

    public void setFixY(int fixY) {
        this.fixY = fixY;
    }

布局文件

在style中，需要将textView设置为可获取焦点

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="cc.myandroid.focusborderviewdemo.MainActivity">
        <GridLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:columnCount="4">
            <TextView
                android:id="@+id/view_1"
                style="@style/ItemStyle"
                android:background="@color/color_menu_item_1"
                android:text="view1" />
            <TextView
                android:id="@+id/view_2"
                style="@style/ItemStyle"
                android:background="@color/color_menu_item_2"
                android:text="view2" />

            <TextView
                android:id="@+id/view_3"
                style="@style/ItemStyle"
                android:background="@color/color_menu_item_3"
                android:text="view3" />
            <TextView
                android:id="@+id/view_4"
                style="@style/ItemStyle"
                android:background="@color/color_menu_item_4"
                android:text="view4" />
            <TextView
                android:id="@+id/view_5"
                style="@style/ItemStyle"
                android:background="@color/color_menu_item_5"
                android:text="view5" />

            <TextView
                android:id="@+id/view_6"
                style="@style/ItemStyle"
                android:background="@color/color_menu_item_6"
                android:text="view6" />
            <TextView
                android:id="@+id/view_7"
                style="@style/ItemStyle"
                android:background="@color/color_menu_item_7"
                android:text="view7" />

            <TextView
                android:id="@+id/view_8"
                style="@style/ItemStyle"
                android:background="@color/color_menu_item_8"
                android:text="view8" />
        </GridLayout>
    <cc.myandroid.focusborderviewdemo.FocusBorderView
        android:id="@+id/focus_border_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="false"
        android:visibility="invisible" />
</FrameLayout>

Activity

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.FrameLayout;

public class MainActivity extends AppCompatActivity implements ViewTreeObserver.OnGlobalFocusChangeListener{
    private FocusBorderView focusBorderView;
    private FrameLayout root;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        focusBorderView = (FocusBorderView) findViewById(R.id.focus_border_view);
        root = (FrameLayout) findViewById(R.id.root);
        root.getViewTreeObserver().addOnGlobalFocusChangeListener(this);
    }

    @Override
    public void onGlobalFocusChanged(View oldFocus, View newFocus) {
        focusBorderView.runTranslateAnimation(newFocus,1.2f,1.2f);
    }
}

主要在根布局中添加监听，不用对每个控件单独设置监听

了解ViewTreeObserver ：
解析 ViewTreeObserver 源码，体会观察者模式、Android消息传递（上）

在runTranslateAnimation方法中，可以根据获取焦点控件不同，设置不同的缩放值

github地址
(https://github.com/chenzaidong/FocusBorderViewDemo)