Android TV开发 焦点框
- 对于TV或者投影设备来说说,各种事件的处理,主要依赖于遥控器,通过焦点框来显示焦点出现的位置
- 一般可以通过响应事件来切换控件的背景(例:drawable/selector.xml),但是影响用户体验
- 通过焦点框的动画效果,使用平移动画绘制焦点框的移动轨迹,并且焦点框随着控件的形状而变化。
动画最终状态是,焦点框从失去焦点的位置移动到获得焦点的位置,控件放大,焦点框尺寸最后变为放大后的控件尺寸.
设计思路
- 焦点框位于布局最上层,当控件获取焦点后,焦点框移动到控件上方
- 获取当前位置及大小
- 获取获取焦点控件的位置及大小
- 计算出平移距离及移动后的大小
- 开启动画,设置动画效果(移动时间及加速效果等)
自定义焦点框代码
/**
* 自定义焦点框
*/
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)