前言:
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实现标题切换和焦点效果