源码已同步到github:https://github.com/ykbjson/FocusView.git
闲话
本来最近在做一个IPTV的广告插件包,因为这个项目没多少功能,仅仅涉及悬浮Window的相关操作,所以后面就很闲,看到别的同事在分析阿狸TV市场的一个炫酷效果,所以就索性自己尝试仿效一下。
模仿效果
这个炫酷的效果大致如下:1.当视图容器里的子视图发生焦点切换时,一个悬浮的焦点框(不是系统的)会从失去焦点的子视图上飘移到获得焦点的子视图上,并且焦点框的大小逐渐变化为获得焦点视图的大小;2,飘移完成后,获得焦点的子视图放大、焦点框放大,失去焦点的子视图缩小。可能我描述起来大家觉得很抽象,有兴趣的童鞋可以去到自家电视上找找(估计没多少机顶盒有阿狸市场),或者运行我的demo,看看基础效果。
过程分析
这里先说明,由于我不是专门负责这个效果的,所以我实现第一个效果后就没有往下继续了,后续效果由别的同事研究,所以以下内容仅围绕第一种效果展开。
估计大部分童鞋都会想到,要实现这个效果,使用的东西要么是动画,要么是矩阵。不错,我是用矩阵也实现了,但是矩阵出现的问题是.9的边框放大后直接画出来也会失真,所以我采用动画。但是可能大部分童鞋都和我一样只是常使用View Animation,我本来也想使用View Animation,但是发现控制焦点框宽高均匀动态变化好难(网上有教使用缩放&平移动画混合并计算动画偏移的方法可以实现这个效果,不过我智商太低,真的看不懂O(∩_∩)O),主要问题在于AnimationListener里没有动画实时更新回调的相关接口,所以我只好另寻出路,于是乎,我认识了Property Animation。关于Property Animation,有兴趣的童鞋请移步:PropertyAnimation详解。
实施过程
1.一个自定义ViewGroup
这个容器的作用主要作用是控制焦点框的初始位置和大小以及对子视图焦点变化事件的捕获。
/**
* com.ykbjson.view.MFocusView
*
* @author Kebin.Yan
* @Description 子view获得焦点时焦点框有动画效果的视图容器
* @date Create At :2015年7月2日 上午9:01:37
*/
public class MFocusView extends RelativeLayout implements OnFocusChangeListener, OnClickListener {
private final String TAG = getClass().getSimpleName();
/**
* 焦点框
*/
private FloatView floatView;
/**
* 是否初始化过
*/
private boolean isInit;
public MFocusView(Context context) {
this(context, null);
}
public MFocusView(Context context, AttributeSet attr) {
this(context, attr, 0);
}