AndroidTV开发6实现竖向TV导航栏切换

前言：

Android中TV开发经常见到竖向排列的栏目列表和内容，今天就来讲讲怎么实现的。最开始我的实现方式的用一个竖向的第三方tablayout库,喜气洋洋的引用到项目中，效果也实现了，因为我们的项目有单选、上一步、下一步、刷新等按钮操作，发现有时候快速操作，焦点很混乱，而且后期扩展也不是很好，此方案被项目组老大给否定了.于是改为ListView，这时扩展问题解决了，但是发现焦点乱跑问题还是没有解决，于是改为Recyclerview，只需要把方向改为竖向排列即可，还可以自定义间距大小、添加动画等。所以功能采用更为强大的Recyclerview,解决了扩展、动画、焦点乱跑等问题.

一、TV竖向排列的栏目列表有以下几种实现方案：

1.自定义竖向的Tablayout

2.RecyclerView

二、由于第1种方式有bug,且扩展性不好，修改起来很麻烦，这里就不写出源码了，给出第2种方案，主要是一个横向的Recyclerview和一个竖向的栏目Tab，代码如下：

1.布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_141843"
    android:orientation="horizontal">
​
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_tab"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_gravity="center" />
​
    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@color/white" />
​
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_game_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center" />
</LinearLayout>

2.Activity代码如下：

代码很简单，两个Recyclerview，初始化数据和控件，获取焦点的效果和事件

package com.example.tvrecyclerview;
​
import android.os.Bundle;
import android.view.View;
​
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
​
import com.example.tvrecyclerview.adapter.GameListAdapter;
import com.example.tvrecyclerview.adapter.MyRecycleViewAdapter;
import com.example.tvrecyclerview.bean.GameListBean;
import com.example.tvrecyclerview.view.SpaceDecoration;
​
import java.util.ArrayList;
import java.util.List;
​
/**
 * @author: njb
 * @date: 2020/7/12 0012 23:33
 * @desc: 竖直的Tab切换，仿TV频道切换
 */
public class VerticalTabActivity extends AppCompatActivity implements MyRecycleViewAdapter.OnItemClickListener{
​
    private MyRecycleViewAdapter adapter;
    private RecyclerView recyclerView, rvGameList,rvTimeList;
    //标题
    private String[] titles = {"首页", "游戏", "教育", "生活", "娱乐", "新闻", "直播", "我的"};
    private GameListAdapter gameListAdapter;
    private List<GameListBean> gameListBeans;
​
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_vertical_recyclerview);
        initView();
        initAdapter();
        initGameListAdapter();
    }
    private void initView() {
        recyclerView = findViewById(R.id.rv_tab);
        rvGameList = findViewById(R.id.rv_game_list);
    }
​
​
    private void initGameListAdapter() {
        setData();
        gameListAdapter = new GameListAdapter(gameListBeans, this, new GameListAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
​
            }
        }) {
            @Override
            protected void onItemFocus(View itemView) {
                itemView.setSelected(true);
                View view = itemView.findViewById(R.id.iv_bg);
                view.setSelected(true);
            }
​
            @Override
            protected void onItemGetNormal(View itemView) {
                itemView.setSelected(true);
                View view = itemView.findViewById(R.id.iv_bg);
                view.setSelected(true);
            }
        };
        rvGameList.setLayoutManager(new GridLayoutManager(this,5));
        rvGameList.addItemDecoration(new SpaceDecoration(30));
        rvGameList.setAdapter(gameListAdapter);
    }
​
    private void initAdapter() {
        adapter = new MyRecycleViewAdapter(this, titles);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
        recyclerView.setLayoutManager(linearLayoutManager);
        recyclerView.setAdapter(adapter);
        recyclerView.requestFocus();
        adapter.setOnItemClickListener(this);
    }
​
    private void updateData(String title) {
        if (gameListBeans != null && gameListBeans.size() > 0) {
            gameListBeans.clear();
        }
        for (int i = 0; i < 40; i++) {
            GameListBean gameListBean = new GameListBean();
            gameListBean.setGameName(title);
            gameListBean.setImg("2");
            gameListBeans.add(gameListBean);
​
        }
        gameListAdapter.notifyDataSetChanged();
    }
​
    private void setData() {
        gameListBeans = new ArrayList<>();
        for (int i = 0; i < 40; i++) {
            GameListBean gameListBean = new GameListBean();
            gameListBean.setGameName("王者荣耀");
            gameListBean.setImg("2");
            gameListBeans.add(gameListBean);
        }
    }
​
    @Override
    public void onItemClick(View view, int position) {
        updateData(titles[position]);
    }
}

3.实现的效果截图如下：

4.以上就是实现代码和选择方案分析，

由于项目过去3年了，所以一些的细节问题记不太清了，这里没有做非常详细的问题和项目方案选择分析，小伙伴们如果有更好地方案可以给我留言,我会积极采纳,一起学习，共同成长.后面有时间会整理出焦点错乱的案例和分析.

5.项目的源码地址如下：

TvRecyclerView: TV项目，使用recyclerview实现标题切换和焦点效果

​​​​​​​