Android电视项目焦点跨层级流转

1. 背景

在智家电视项目中，主要操作方式不是触摸，而是遥控器，通过Focus进行移动，确定点击进行的交互，所以在电视项目中焦点、选中、确定、返回这几个交互比较重要。由于电视屏比较大，在一些复杂页面中会存在一级Tab选择，二级选择，三级选择等，这就涉及到了焦点与选中的联动实现业务逻辑。这块的逻辑比较复杂，在做好了一个页面后，把这块的内容记录一下，同时提炼出了一个辅助类，MultiLevelFocusHelper，后续可进行复用。

2. 基本使用：遥控器+焦点控制

2.1 使用原则

Android原生就能比较好的支持Focus及切换，使用时只要按照它本身的逻辑使用就好，如果碰到不能很好支撑业务的时候再进行扩展，如下是我们小组实践过后，总结出来的几项原则，实际效果很好：

• 不进行过度控制，使用默认规则

• 使用focusable、descendantFocusability把XML中的控件按照父控件统一管控，如必须下放时再进行子控件控制

• nextFocusUp、nextFocusDown、nextFocusLeft、nextFocusRight、nextFocusForward这几个属性不要轻易使用，只要在需要定制的复杂页面才有可能用到

2.2 View中涉及到焦点的几个属性

属性	使用场景说明
focusable	物理按键时获得焦点的属性 android:focusable="false" android:focusable="true"
descendantFocusability	该属性是当一个view获取焦点时，定义viewGroup和其子控件两者之间的关系，属性的值有三种： beforeDescendants：viewgroup会优先其子类控件而获取到焦点 afterDescendants：viewgroup只有当其子类控件不需要获取焦点时才获取焦点 blocksDescendants：viewgroup会覆盖子类控件而直接获得焦点
nextFocusUp nextFocusDown nextFocusLeft nextFocusRight	android:nextFocusUp-定义当点up键时，哪个控件将获得焦点 android:nextFocusDown-定义当点down键时，哪个控件将获得焦点 android:nextFocusLeft-定义当点left键时，哪个控件将获得焦点 android:nextFocusRight--定义当点right键时，哪个控件将获得焦点
nextFocusForward	我是谁，我有什么用？？？

2.3 如何使用

1. XML中从顶到细，一层一层的看，如果此View及其子View不需要获得焦点，则直接把它的焦点屏蔽掉

android:focusable="false"
android:descendantFocusability="blocksDescendants"

2. 如果只有此ViewGroup需要获得焦点，它的子View不需要，则设置如下

android:focusable="true"
android:descendantFocusability="blocksDescendants"

3. RecyclerView或ListView，根据需要，如果是简单的能自动处理的则只修改XML即可，否则可以XML+代码进行控制

// 1. 第一种情况：recyclerView的 xml 设置 recyclerView 不获得焦点，子控件获得焦点
android:focusable="false"
android:descendantFocusability="afterDescendants"// recyclerView的item 布局中添加
android:focusable="true"
android:descendantFocusability="blocksDescendants"// 2. 第二种情况：代码控制时， recyclerView先获得焦点，然后根据需要，再在它的OnFocusChangeListener中进行焦点转移
android:focusable="true"
android:descendantFocusability="beforeDescendants"

4. 至此，如果没有特殊的需求，只是简单的焦点控制，通过XML配置属性+Android强大的默认功能即可完成

3. 高级用法：增加层级

3.1 层级是什么? 为什么要有三态？

如图，感兴趣的往下看，一切尽在图中，祭镇楼图

• 图中的设备列表与全屋节能信息构成了一级焦点，后边的节电数据范围是二级焦点，它俩是一个整体，这里暂且起名叫节能数据查看

• 其中全屋节能信息是一个ViewGroup，下边的设备列表是一个RecyclerView

• 图中的帮助按钮是另一个可欺获得焦点的控件，与上边的节能数据查看是并列关系

• 根据以上分析，得出：层级就是 完成同一个功能的多级多控件的可分别获得焦点的聚合体，特点如下：

  • 焦点可在多级中的多个控件中自由流转，同时只有一个控件具备焦点

  • 在同一级中，如果没有焦点，则需要有一个控件具备已选中状态，由此引出了三态：有焦点、无焦点选中、无焦点未选中

  • 焦点在多级流转时有一定的规则，大部分情况下是从一级流向另一级时，优先流到已选中的控件上

  • 多级具备方向性，比如1->2->3-4， 或 4->3->2->1， 在这个模型中，不可以跨级流转，如果后续有跨级流转的业务需求，再另说（产品经理不要搞太复杂呀...）

3.2 自定义的层级管理辅助类：MultiLevelFocusHelper

基于以上的层级焦点定义，我封装了一个辅助类，MultiLevelFocusHelper，可用于简化层级焦点的操作实现，它主要实现的功能有：

• 当某一层级的控件获得焦点时，通过它可记录最新的有焦点控件，并同时设置其中选中状态

• 设置当前层级有焦点的控件往下一级流转时的按键，并精准定位到下一级的选中控件上

• 获得所有层级的当前控件对应的附加数据

• 遵循了最小实现、不过渡设计的原则，当前只实现了两级，如果将来需要支持更多的级数，可扩展此类

代码如下：

class MultiLevelFocusHelper(private val totalLevel: Int) {private var mCurLevel1View: View? = nullprivate var mCurLevel1ViewId: Int? = nullprivate var mCurLevel1Data: Any? = nullprivate var mCurLevel2View: View? = nullprivate var mCurLevel2ViewId: Int? = nullprivate var mCurLevel2Data: Any? = null/*** 某一个控件得到了焦点*  @param level: 得到焦点的控件的层级*  @param view:  得到焦点的控件*  @param viewId: 得到焦点的控件的Id，如果是recycleView，则设置它的父控件的Id，主要是为的是上下级Level切换*  @param extraData: 得到焦点的控件对应的附属数据，暂存一下，后续业务需要时可直接get*  @param nextLevelMoveDirect:*/fun receiveFocus(level: Int, view: View, viewId: Int, extraData: Any) {if (level > totalLevel) returnwhen(level) {1 -> {if (mCurLevel1View != null) {mCurLevel1View!!.isSelected = false}mCurLevel1View = viewmCurLevel1View!!.isSelected = truemCurLevel1ViewId = viewIdmCurLevel1Data = extraData}2 -> {if (mCurLevel2View != null) {mCurLevel2View!!.isSelected = false}mCurLevel2View = viewmCurLevel2View!!.isSelected = truemCurLevel2ViewId = viewIdmCurLevel2Data = extraData}else -> {// nothing}}}/*** 设置某一层级当前选中View的 nextFocusLeftId, nextFocusDownId 等* @param moveDirect, 移动方向，用于决定设置当前级Level的哪个属性 nextFocusLeftId 等。 传入值：使用本类中定义的四个常量值，多个方向时可进行&运算再传进来* @param moveCommander, 移动命令，是前进还是后退，用于确定要设置的Value是上一级还是下一步当前选中的View*                      为 null，忽略，如果是头尾的，只有一个方向，直接设就行。 如果是中间的则忽略不进行设置了。*/fun setDirectToCurrentView(level: Int, moveDirect: Int, moveCommander: MoveCommander? = null) {if (level > totalLevel) returnwhen(level) {1 -> {// 第一层，只能往下移，不能回移setNextMoveTarget(mCurLevel1View, moveDirect, mCurLevel2ViewId)}2 -> {if (level < totalLevel) {if (moveCommander != null) {if (moveCommander == MoveCommander.forward) {// TODO， 当 totalLevel 大于等于 3 的时候，加上这一个分支， 它应该往 3 去移动了// setNextMoveTarget(mCurLevel2View, moveDirect, mCurLevel3ViewId)} else {setNextMoveTarget(mCurLevel2View, moveDirect, mCurLevel1ViewId)}}} else {// 这是最后一层， 只有一个方向setNextMoveTarget(mCurLevel2View, moveDirect, mCurLevel1ViewId)}}else -> {// nothing}}}/*** 所有控件失去焦点， 暂时应该没有场景调到它，如果有的话，需要考虑一下行为是否正确*/fun clearAllFocus() {if (mCurLevel1View != null) {mCurLevel1View!!.isSelected = false}mCurLevel1Data = nullif (mCurLevel2View != null) {mCurLevel2View!!.isSelected = false}mCurLevel2Data = null}/*** 获得某一层当前选中控件对应的 View*/fun getView(level: Int): View? {if (level > totalLevel) return nullreturn when(level) {1 -> {mCurLevel1View}2 -> {mCurLevel2View}else -> {null}}}/*** 获得某一层当前选中控件对应的数据*/fun getData(level: Int): Any? {if (level > totalLevel) return nullreturn when(level) {1 -> {mCurLevel1Data}2 -> {mCurLevel2Data}else -> {null}}}private fun setNextMoveTarget(view: View?, direct: Int?, nextViewId: Int?) {if (view == null || direct == null || nextViewId == null) {return}if (direct and Direct_Up > 0) {view.nextFocusUpId = nextViewId}if (direct and Direct_Right > 0) {view.nextFocusRightId = nextViewId}if (direct and Direct_Down > 0) {view.nextFocusDownId = nextViewIdview.nextFocusDownId}if (direct and Direct_Left > 0) {view.nextFocusLeftId = nextViewId}}
}

3.3 MultiLevelFocusHelper要点说明

1. 构造函数中的参数 totalLevel

   1. 总级数，从1开始的， 比如totalLevel为3, 则所有级别即为1,2,3

   2. 目前 totalLevel 最大为 2，超过2 按 2 计算

2. 对外函数receiveFocus(level: Int, view: View, viewId: Int, extraData: Any)

   1. 当层级中的某一个控件获得焦点时调用此函数

   2. 参数说明

      1. @param level: 得到焦点的控件的层级

      2. @param view: 得到焦点的控件

      3. @param viewId: 得到焦点的控件的Id，如果是recycleView，则设置它的父控件的Id，主要是为的是上下级Level切换

      4. @param extraData: 得到焦点的控件对应的附属数据，暂存一下，后续业务需要时可直接get

   3. 这里的 viewId 可以是 view 的Id，也可以不是， 基本用法是，如果是ListView或RecyclerView，则可以把viewId设置为 recyclerView 的Id，这样再在业务代码的 recyclerView 获得焦点事件中转一下即可

3. 层级流转

   1. level 移动顺序： 目前是一个约定，不能自定义。 1->2->3->4, 或 4->3->2->1。 如果后续有不同需求，可以再进行扩充

   2. 两个概念：MoveCommander， MoveDirect：

      // 层级移动命令，向前进，还是后退，参考按照类说明了中的移动顺序
      enum class MoveCommander {forward,back
      }// 焦点移动方向，比如按了遥控器上的上下左右, 使用Int值表示， 多个方向时可以进行&运算
      val Direct_Up = 0x01
      val Direct_Right = 0x02
      val Direct_Down = 0x04
      val Direct_Left = 0x08

   3. 对外函数：setDirectToCurrentView(level: Int, moveDirect: Int, moveCommander: MoveCommander? = null)

      1. 设置某一层级当前选中View的 nextFocusLeftId, nextFocusDownId 等，当某一个控件获得焦点后，再马上调用此函数设置一下

      2. 参数说明

         1. moveDirect, 移动方向，用于决定设置当前级Level的哪个属性 nextFocusLeftId 等。 传入值：使用本类中定义的四个常量值，多个方向时可进行&运算再传进来

         2. moveCommander, 移动命令，是前进还是后退，用于确定要设置的Value是上一级还是下一步当前选中的View为 null，忽略，如果是头尾的，只有一个方向，直接设就行。 如果是中间的则忽略不进行设置了

4. 使用实例

这里附上全屋节能的使用示例，它结合了 MultiLevelFocusHelper，并在Activity中实现了业务关联的一部分代码

4.1 相关控件的XML设置

1. 设置所有没有焦点的控件中的属性， focusable 和 descendantFocusability

2. 有焦点的控件属性设置上， focusable 和 descendantFocusability

3. recyclerView 设置为： android:focusable="true" android:descendantFocusability="beforeDescendants"

4.2 帮助按钮的Focus监听不必设置，使用系统默认的即可

4.3 初始化时，把默认的Focus给到 一级中的全屋信息

mMultiLevelFocusHelper.receiveFocus(1, mFullHouseSaveInfo, mFullHouseSaveInfo.id, "all") // 初始一化一下 mMultiLevelFocusChangeManager 中的状态
mMultiLevelFocusHelper.setDirectToCurrentView(1, MultiLevelFocusHelper.Direct_Right)
mMultiLevelFocusHelper.receiveFocus(2, mTextViewSaveElectricDurationLastMonth, mTextViewSaveElectricDurationLastMonth.id, ElectricIndexDateRange.LAST_MONTH)
mMultiLevelFocusHelper.setDirectToCurrentView(2, MultiLevelFocusHelper.Direct_Down)
mFullHouseSaveInfo.requestFocus()

4.4 RecyclerView 和 它的 item 设置 OnFocusChangeListener

mRecyclerViewDeviceDetailInfo.setOnFocusChangeListener(object : OnFocusChangeListener {override fun onFocusChange(v: View?, hasFocus: Boolean) {if (v == null) returnif (!hasFocus) returnval view = mMultiLevelFocusHelper.getView(1)val tag = view?.getTag()    // 看它有没有存 tag 来判断它是不是 recyclerView 的 itemif (view == null || tag == null) {// 没有上一次的View 或 上一次的第一层View 不是 recyclerView的 item 时if (mRecyclerViewDeviceDetailInfo.getChildAt(0) != null) {mRecyclerViewDeviceDetailInfo.getChildAt(0).requestFocus()}} else {view.requestFocus()}}
})// 这里的最后一个参数 OnFocusChangeListener， 内部又传给了 item， 当它有 FocusChange事件时，再转调用此参数实例
mAdapterDeviceDetailInfo = SaveEnergyAdapterDeviceDetailInfo(mViewModal.getAllSavingDevice(),mViewModal.getAllSavingDeviceRank(),mViewModal.getAllSavingSwitchStatus(),object: OnFocusChangeListener {// 给 设备列表的 recycleview item 设置焦点移动回调override fun onFocusChange(v: View?, hasFocus: Boolean) {if (v == null) {return}if (!hasFocus) {return}val deviceId = v.getTag()mMultiLevelFocusHelper.receiveFocus(1, v, mRecyclerViewDeviceDetailInfo.id, deviceId)mMultiLevelFocusHelper.setDirectToCurrentView(1, MultiLevelFocusHelper.Direct_Right)initSavingElectricData()}})

这里啰嗦一下，RecyclerView拿到焦点时，把焦点转给它下边的之前具有焦点的控件；item中的view有一个tag，存的是业务数据(deviceId)，当它拿到焦点时，取到此业务数据，传入到了 mMultiLevelFocusHelper 中

4.5 设置全屋信息 和 所有二级控件的 setOnFocusChangeListener，代码略

5. 总结

1. 如果没有特殊的需求，只是简单的焦点控制，通过XML配置属性+Android强大的默认功能即可完成。

2. 如果具有多个层级，焦点需要在多层级间进行流转并需要记忆功能，则可使用MultiLevelFocusHelper类，经过实践检验，可完美应用于此场景。

6. 团队介绍

「三翼鸟数字化技术平台-场景设计交互平台」主要负责设计工具的研发，包括营销设计工具、家电VR设计和展示、水电暖通前置设计能力，研发并沉淀素材库，构建家居家装素材库，集成户型库、全品类产品库、设计方案库、生产工艺模型，打造基于户型和风格的AI设计能力，快速生成算量和报价；同时研发了门店设计师中心和项目中心，包括设计师管理能力和项目经理管理能力。实现了场景全生命周期管理，同时为水，空气，厨房等产业提供商机管理工具，从而实现了以场景贯穿的B端C端全流程系统。