Android TV使用属性动画绘制平移焦点框

Android系统一开始就提供了两种实现动画的方式：

• View Animation（补间动画 Tweened animation）

• Drawable Animation（逐帧动画 Frame Animation）

逐帧动画就不用说了，补间动画可以实现4种基本变换—平移、旋转、缩放、透明度，但是也存在一定的缺点

• 作用对象局限于View

• 没有改变View的属性，只是改变视觉效果

• 动画效果单一

为了解决补间动画的缺陷，从 Android 3.0（API 11）开始，系统提供了一种全新的动画模式—属性动画（Property Animation），下面我们就用属性动画来实现TV上的焦点框移动效果。

首先，我们在xml布局中定义一个ImageView控件作为焦点框，这里布局采用ConstraintLayout和DataBinding

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <import type="android.view.View"/>
        <variable
            name="value"
            type="com.tcl.john.focus.MainActivity.Value"/>
    data>

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.tcl.john.focus.MainActivity"
        android:background="@android:color/black"
        android:padding="20dip">

        <ImageView
            android:id="@+id/selector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/buttons_focus"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="@+id/btn_1"/>

        <Button
            android:id="@+id/btn_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/buttons_normal"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            android:gravity="center"
            android:text="@{value.buttonTxt1}"
            android:textColor="@android:color/white"
            android:textSize="22sp" />

        <Button
            android:id="@+id/btn_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btn_1"
            android:layout_marginTop="66dip"
            android:background="@mipmap/buttons_normal"
            android:gravity="center"
            android:text="@{value.buttonTxt2}"
            android:textColor="@android:color/white"
            android:textSize="22sp" />

        <Button
            android:id="@+id/btn_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btn_2"
            android:layout_marginTop="66dip"
            android:background="@mipmap/buttons_normal"
            android:gravity="center"
            android:text="@{value.buttonTxt3}"
            android:textColor="@android:color/white"
            android:textSize="22sp" />

    android.support.constraint.ConstraintLayout>

layout>

然后，各个目标控件监听焦点事件，在实现焦点事件的方法里设置焦点框控件的动画偏移量为获得焦点的view的坐标

public class MainActivity extends AppCompatActivity implements View.OnFocusChangeListener {

    private ActivityMainBinding mActivityMainBinding;

    public class Value {
        public final ObservableField<String> buttonTxt1 = new ObservableField<>();
        public final ObservableField<String> buttonTxt2 = new ObservableField<>();
        public final ObservableField<String> buttonTxt3 = new ObservableField<>();
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        initWidget();
        setListener();
    }

    private void initWidget() {
        Value value = new Value();
        value.buttonTxt1.set("按钮1");
        value.buttonTxt2.set("按钮2");
        value.buttonTxt3.set("按钮3");
        mActivityMainBinding.setValue(value);
    }

    private void setListener() {
        mActivityMainBinding.btn1.setOnFocusChangeListener(this);
        mActivityMainBinding.btn2.setOnFocusChangeListener(this);
        mActivityMainBinding.btn3.setOnFocusChangeListener(this);
    }

    @Override
    public void onFocusChange(View view, boolean hasFocus) {
        if(hasFocus)
        {
            mActivityMainBinding.selector.animate().translationY(view.getTop()).setDuration(300).start();
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event)
    {
        switch (keyCode)
        {
            case KeyEvent.KEYCODE_DPAD_UP:
                if(mActivityMainBinding.btn1.hasFocus())
                {
                    mActivityMainBinding.btn1.clearFocus();
                    mActivityMainBinding.btn3.requestFocus();
                    return true;
                }
                break;

            case KeyEvent.KEYCODE_DPAD_DOWN:
                if(mActivityMainBinding.btn3.hasFocus())
                {
                    mActivityMainBinding.btn3.clearFocus();
                    mActivityMainBinding.btn1.requestFocus();
                    return true;
                }
                break;

            default :
                break;
        }
        return super.onKeyDown(keyCode, event);
    }
}

最终实现的效果