RecycleView系列三:带Tab导航的宫格布局

163 阅读2分钟

在Android TV开发中,使用ViewPager2结合RecyclerViewGridLayoutManager来实现 一个具有Tab导航的宫格布局是一个很好的选择。以下是如何实现这个布局的基本步骤:

1. 添加依赖

首先,确保你的build.gradle文件中已经添加了ViewPager2RecyclerView的依赖):

dependencies {
    // ViewPager2
    implementation 'androidx.viewpager2:viewpager2:1.0.0'

    // RecyclerView
    implementation 'androidx.recyclerview:recyclerview:1.2.1'

    // 如果需要额外的功能,比如卡片式布局,可以添加CardView
    implementation 'androidx.cardview:cardview:1.0.0'
}

2. 布局文件

在你的Activity或Fragment的布局文件中,添加一个ViewPager2用于Tab导航, 并为每个Tab页面准备一个包含RecyclerView的布局。

activity_main.xml:

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

fragment_tv_category.xml (假设你为每个Tab类别创建了一个Fragment,这里以电影为例):

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp" />

3. RecyclerView Adapter 和 ViewHolder

RecyclerView创建一个Adapter和ViewHolder,用于展示每个宫格的内容(一张图片和一个名称)。

MovieAdapter.java:

public class MovieAdapter extends RecyclerView.Adapter<MovieAdapter.MovieViewHolder> {
    // 假设有一个Movie类,包含图片URL和名称
    private List<Movie> movies;

    // 构造函数、getItemCount、onBindViewHolder等方法

    public static class MovieViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        TextView textView;

        public MovieViewHolder(View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.movie_image);
            textView = itemView.findViewById(R.id.movie_name);
        }
    }
}

4. 设置RecyclerView的LayoutManager

在你的Fragment中,设置RecyclerViewLayoutManagerGridLayoutManager, 并指定列数和行数(或者只指定列数,让行数自适应)。

MovieFragment.java:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_tv_category, container, false);

    RecyclerView recyclerView = view.findViewById(R.id.recyclerView);
    recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2)); // 2列
    recyclerView.setAdapter(new MovieAdapter(movieList)); // 假设movieList是你的数据列表

    return view;
}

5. 设置ViewPager2的Adapter

创建一个ViewPager2.Adapter来管理不同的Fragment(每个Tab对应一个Fragment)。

ViewPagerAdapter.java:

public class ViewPagerAdapter extends FragmentStateAdapter {
    private List<Fragment> fragments;

    public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity, List<Fragment> fragments) {
        super(fragmentActivity);
        this.fragments = fragments;
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragments.get(position);
    }

    @Override
    public int getItemCount() {
        return fragments.size();
    }
}

在你的Activity中设置这个Adapter:

ViewPager2 viewPager = findViewById(R.id.viewPager);
List<Fragment> fragments = Arrays.asList(new MoviesFragment(), new TVShowsFragment(), new VarietyShowsFragment());
ViewPagerAdapter adapter = new ViewPagerAdapter(this, fragments);
viewPager.setAdapter(adapter);