iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0

今天來教大家如何讓 ListRow 的 Item 固定焦點在最左邊
什麼意思呢?
大家如果有照著我前面的教學,或是自己看官方文件說明練習
最一開始做出來的效果都會向下面這樣
Yes

焦點會從最左邊開始,到中間,最後會停在最右邊

而 Android TV 的首頁就有做出我們今天想要的效果,如下影片
Yes

官方怎麼沒有提供 Function 讓我們做調整呢
其實是有的,讓我們繼續看下去

新增 CutstomListRowPresenter

因為我們要改變的是 ListRow 焦點的位置,所以會要自定義一個 CutstomListRowPresenter 來取代原先的 ListRowPresenter

class CustomListRowPresenter(var mContext: Context?, var mFocusType: FocusType, focusHightlightMode: Int = FocusHighlight.ZOOM_FACTOR_MEDIUM): ListRowPresenter(focusHightlightMode) {

    private val TAG: String = javaClass.simpleName
    private var vHorizontalGridView: HorizontalGridView? = null

    override fun onBindViewHolder(
        viewHolder: Presenter.ViewHolder?,
        item: Any?,
        payloads: MutableList<Any>?
    ) {

        val view: View = viewHolder!!.view
        vHorizontalGridView = view.findViewById(androidx.leanback.R.id.row_content)

        when(mFocusType){
            FocusType.START -> {
                Log.v(TAG, "===== FocusType.START =====")
                vHorizontalGridView?.run{
                    Log.w(TAG, "vHorizontalGridView is not null")
                    windowAlignment = BaseGridView.WINDOW_ALIGN_LOW_EDGE
                    windowAlignmentOffsetPercent = 0f
                    windowAlignmentOffset = resources.getDimensionPixelSize(R.dimen.lb_browse_padding_start)
                    itemAlignmentOffsetPercent = 0f
                }
            }
        }

        super.onBindViewHolder(viewHolder, item, payloads)
    }

}

這裡面最重要的就是這段,這些是 HorizontalGridView 的參數

windowAlignment = BaseGridView.WINDOW_ALIGN_LOW_EDGE
windowAlignmentOffsetPercent = 0f
windowAlignmentOffset = resources.getDimensionPixelSize(R.dimen.lb_browse_padding_start)
itemAlignmentOffsetPercent = 0f

windowAlignment 有以下四種類型

  1. WINDOW_ALIGN_LOW_EDGE (固定在第一個)
  2. WINDOW_ALIGN_HIGH_EDGE (固定在最後一個,這要在研究下)
  3. WINDOW_ALIGN_BOTH_EDGE (預設)
  4. WINDOW_ALIGN_NO_EDGE (無)

再來說明一下建構子中需傳入的 focusHightlightMode 是指 Focus 到的時候放大的大小
https://ithelp.ithome.com.tw/upload/images/20201009/20107165omGwvMPTim.png

  1. ZOOM_FACTOR_NONE (不放大)
  2. ZOOM_FACTOR_SMALL (小)
  3. ZOOM_FACTOR_MEDIUM (中/預設大小)
  4. ZOOM_FACTOR_LARGE (大)
  5. ZOOM_FACTOR_XSMALL (超小)

置換 ListRowPresenter

最後我們回 PageRowFragmentFactory 裡,把 ArrayObjectAdapter 中的 ListRowPresenter 改成 CutstomListRowPresenter 並執行看看!!

完成

Yes

程式碼在Github 的 Day 24 commit 點唷~~~


上一篇
Day 23 - Android TV to Google TV 搶先體驗!!!
下一篇
Day 25 - 客製化 ListRowPresenter 來實作 Loop Banner 效果 Part1
系列文
宅經濟起飛,想當顆沙發馬鈴薯嗎??智慧電視會是未來的趨勢嗎??讓我們一探 Android TV 的神秘世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言