前言:

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>


横竖屏切换 android 横竖屏切换tv版_横竖屏切换 android

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]);
    }
}


横竖屏切换 android 横竖屏切换tv版_竖向_02

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

横竖屏切换 android 横竖屏切换tv版_竖向_03

横竖屏切换 android 横竖屏切换tv版_android_04

横竖屏切换 android 横竖屏切换tv版_android_05

横竖屏切换 android 横竖屏切换tv版_android_06

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

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