转发请注明出处：https://www.jianshu.com/p/cf818a09f756
  在正文前来个小介绍，笔者的现公司原是做电视实业的，最近公司打算进军智能电视操作系统，笔者负责前端桌面开发，所以对于一些有异于移动端的地方，做一些心得，抱着互相学习的心态，如果有误或者有更好的处理方法，请留言互相交流，如果你喜欢本文章，小礼物就别破费了，给个喜欢，给个关注，是对我最大的支持。
  用过智能电视的都了解，首页无论如何变换，都会有一个导航栏，这个导航栏的作用不仅仅是描述当前页面所属的栏目，还能让用户有目的性的去选择自己所需要的分栏进行切换，可以说是桌面最主要的一个控件，今天我们分析的就是导航栏，首先我们来看一下效果图。

导航栏效果图

一、模块初始化

  导航栏与光标看似是一整个模块，但实际做法，文字部分是主要组件，负责排布展示分栏和改变分栏状态，光标则是作为一个附属组件，只根据分栏状态做动画。
  初始化NavigationLinearLayout的时候在xml文件会定义好必要的属性，这个是属于自定义view的一些基础，不熟悉的可以去找下资料，这里就不多说，主要有两个属性需要说明：

    var orderMode: String = ""//item排列模式，"same":固定宽模式，"self":自适应宽模式
    var itemSpace: Int = 0//"same":item宽度，"self":item距左或右宽度(实际每个item间距是两个itemSpace值)

  同时保存了一个map集合，存储的是每个item中点到父布局NavigationLinearLayout左边的距离：

    var mToLeftMap: MutableMap<Int, Int> = HashMap()//存储每个item中点到父布局左边的距离

  数据初始化与数据改变时重新初始化的操作是一样的，遍历数据长度增加删除item，item根据xml所赋值的属性生成并动态设置selector，还原所有的状态，对item进行赋值，同时对每个item的绘制做监听，得到每个item中点到父布局左边的距离，最后根据默认展示的item进行处理：

    private fun initView() {
        if (mToLeftMap.isNotEmpty()) mToLeftMap.clear()//还原状态
        if (mDataList.size > childCount) {
        ...
        } else if (mDataList.size < childCount) {
        ...
        }
        if (mNowPos != -1 && mNowPos < childCount) changeItemState(mNowPos, STATE_NO_SELECT)//还原状态
        for (i in 0..(childCount - 1)) {
            ...
            child.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
                override fun onGlobalLayout() {
                    ...
                    mToLeftMap[i] = child.width / 2 + child.left + this@NavigationLinearLayout.left//每个item中点到父布局左边的距离
                    if (defaultPos == i) {//TODO 如果编辑导航后不要重置pos，可根据实际修改逻辑
                        mNowPos = defaultPos//默认要展示的pos
                        changeItemState(mNowPos, STATE_HAS_SELECT_HAS_fOCUS)//修改默认要展示的pos的状态
                        mToLeftMap[mNowPos]?.let { mNavigationCursorView?.fsatJumpTo(it) }//移动光标
                        mNavigationListener?.onNavigationChange(mNowPos, KeyEvent.KEYCODE_DPAD_LEFT)//展示内容数据，仅仅展示数据，写左右都没问题
                    }
                }
            })
        }
    }

  要说明下，根据默认pos的完成最后初始化做了三步操作：
  (1)changeItemState()这个方法就是改变item的状态，状态有三种：

    const val STATE_NO_SELECT = 666//默认状态
    const val STATE_HAS_SELECT_NO_fOCUS = 667//选中无焦点
    const val STATE_HAS_SELECT_HAS_fOCUS = 668//选中有焦点

    private fun changeItemState(pos: Int, state: Int) {
        ...
            when (state) {
                STATE_NO_SELECT -> {
                    //if (child.scaleX != 1f) ViewCompat.animate(child).scaleX(1f).scaleY(1f).translationZ(0f).start()//TODO BUG
                    ViewCompat.animate(child).scaleX(1f).scaleY(1f).translationZ(0f).start()
                    (child as TextView).setShadowLayer(0f, 0f, 0f, fontColorLight)
                    child.isSelected = false
                }
                STATE_HAS_SELECT_NO_fOCUS -> {
                    if (child.scaleX != 1f) ViewCompat.animate(child).scaleX(1f).scaleY(1f).translationZ(0f).start()
                    if (!child.isSelected) {
                        (child as TextView).setShadowLayer(25f, 0f, 0f, fontColorLight)
                        child.isSelected = true
                    }
                }
                STATE_HAS_SELECT_HAS_fOCUS -> {
                    ViewCompat.animate(child).scaleX(enlargeRate).scaleY(enlargeRate).translationZ(0f).start()
                    if (!child.isSelected) {
                        (child as TextView).setShadowLayer(25f, 0f, 0f, fontColorLight)
                        child.isSelected = true
                    }
                }
            }
    }

  在这遇到一个问题，在代码里面用TODO BUG标明，当焦点在导航栏，比如从影视切换到教育，这时候影视分栏状态是从STATE_HAS_SELECT_HAS_fOCUS变成STATE_NO_SELECT，起初考虑到性能问题，做了判断，只有字体放大过才做还原动画(注释了的那句代码)，此时出现bug了：

Bug演示

    interface NavigationListener {
        /**
         * @param pos     选中的序号
         * @param keyCode 点击的按键
         */
        fun onNavigationChange(pos: Int, keyCode: Int)
    }

二、key与focus事件设置

  并不是每个分栏单独获取焦点，整个导航栏只有父布局NavigationLinearLayout能获取焦点，事件全部也由父布局处理。
  key事件我把他分为三类：
  (1)切换分栏刷新数据：分栏内切换左、右；
  (2)会导致焦点变化：上、下、左上、右上及跳出导航栏的左右事件等等；
  (3)其他事件：menu，source等不会导致焦点有变化的事件；
  所有事件如果return true了则无系统按键音，需手动调用，同样受到系统设置声音大小或静音的控制(系统源码的按键音也同样是调用了此方法)。

    override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
        if (event?.action == KeyEvent.ACTION_DOWN) {
            when (keyCode) {
                KeyEvent.KEYCODE_DPAD_LEFT -> {
                    if (mNowPos > 0) {
                        changeItemState(mNowPos, STATE_NO_SELECT)
                        changeItemState(--mNowPos, STATE_HAS_SELECT_HAS_fOCUS)
                        mToLeftMap[mNowPos]?.let { mNavigationCursorView?.jumpTo(it) }
                        mNavigationListener?.onNavigationChange(mNowPos, keyCode)
                    }//如果有跳出导航栏的左右事件需求可在次此处else回调出去
                    SoundUtil.playClickSound(this@NavigationLinearLayout)
                    return true//TODO 系统声音会被屏蔽掉
                }
                ...
                KeyEvent.KEYCODE_DPAD_UP, KeyEvent.KEYCODE_DPAD_DOWN -> {//TODO 方向类型的事件，不想系统自动找焦点，可试试return true
                    mNavigationListener?.onNavigationChange(mNowPos, keyCode)
                }
                KeyEvent.KEYCODE_MENU -> {//TODO 非方向类型事件
                    mNavigationListener?.onNavigationChange(mNowPos, keyCode)
                    return true//TODO bug
                }
            }
        }
        ...
    }

  这里又有一个小插曲，具体原因还没搞明白，如果menu事件不返回true，即使不做任何处理，第一次按完menu键，就会导致绝大部分的按键事件全部失效的bug，只有再次按menu或者返回，才恢复正常，我猜是因为系统弹了一层属于menu的view出来，虽然看不到，但是把最上层view改变了所以导致这个bug，这里我直接返回ture，有需要的时候在回调处理即可。
  focus事件的处理相对简单点，只做了改变item状态及控制下标的显隐的操作：

    override fun onFocusChanged(gainFocus: Boolean, direction: Int, previouslyFocusedRect: Rect?) {
        changeItemState(mNowPos, if (gainFocus) STATE_HAS_SELECT_HAS_fOCUS else STATE_HAS_SELECT_NO_fOCUS)
        mNavigationCursorView?.visibility = if (gainFocus) View.VISIBLE else View.INVISIBLE
        super.onFocusChanged(gainFocus, direction, previouslyFocusedRect)
    }

三、下标的设置

  上文提过下标NavigationCursorView作为导航栏的一个组件，与activity没有任何逻辑交互，只根据导航栏的切换做动画，这里把下标单独在layout文件里面写一个控件，是方便控制下标的距离导航栏的位置，甚至可以与导航栏垂直居中，作为背景展示不一样的效果，如果是不需要光标的时候，xml里面注释掉控件，再把关联的那句代码注释，搞定，并不需要修改其他任何的地方，再者，如果有两个地方都需要用到导航栏，并且不一样动画，直接继承重写一下生成动画的方法即可，拓展起来比较方便。
  NavigationCursorView里面比较简单，只有3个方法，fsatJumpTo()方法是初始化的时候用的，jumpTo()是正常切换的时候调用，还有一个就是createAnimator()生成动画的方法。
  每次初始化或切换时，会传目标分栏中点距离NavigationLinearLayout左边的值，用于确定光标中点做位移动画的目标位置，同时保存本地作为下次位移的初始值使用，实际上做动画的时候，由于动画的相对坐标是控件的左上角(0,0)坐标，因此实际位置还需减去光标的宽度的一半，才是设置给位移动画的目标位移值。

    val realLocation = location - width / 2

四、在activity的调用

  调用非常简单，就三行代码，调用顺序已经做了兼容处理所以怎么调都行，光标默认是隐藏可以在需要的时候再设置展示出来，也可以先初始化好导航栏，需要设置数据的时候再设置监听(这个是YY出来的，一般没这种需求吧)。

    mNavigationLinearLayout_id.mDataList = arrayListOf("我的电视", "影视", ...)
    mNavigationLinearLayout_id.mNavigationListener = mNavigationListener
    mNavigationLinearLayout_id.mNavigationCursorView = mNavigationCursorView_id

  同时还模拟了在内容区域切换分栏，分栏切换时刷新内容区域，模拟用户重新编辑导航栏数据后刷新的场景，这里的状态栏跟内容区域只用了一个TextView模拟，实际上是要复杂得多，这个就看各自的产品需求然后各自各精彩吧。

五、后记

  到此整个控件已经介绍完毕，再砸一个彩蛋，如果你的需求是导航栏不止一屏，需要滑动的话，臣妾做不到！这就是把整个导航栏当作一个view来获取焦点的弊端，后期有空再研究改进，接下来要先写桌面开发的其他模块了，毕竟公司的开发进度要紧，后面还会整理然后写一系列关于TV开发的文章。

整体效果图演示