1. 功能需求

1. 顯示商品分類數據
2. 當分類數據超過一屏時，可以左右滑動顯示
3. 點擊當前商品分類時，需要高亮顯示，并且默認第一個商品分類選中

2. 代碼實現過程

1. 編寫布局文件

創建一個布局文件activity_main.xml，用戶顯示商品分類頁的內容：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><!-- TODO: Update blank fragment layout --><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/purple_200"app:title="商品分類"app:titleTextColor="@color/white" /><androidx.appcompat.widget.LinearLayoutCompatandroid:layout_below="@id/toolbar"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><androidx.appcompat.widget.LinearLayoutCompatandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/topRecyclerView"android:layout_width="match_parent"android:layout_height="wrap_content" /><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recyclerView"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#f5f5f5"app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" /><androidx.appcompat.widget.LinearLayoutCompatandroid:id="@+id/empty_view"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:orientation="vertical"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="80dp"android:src="@mipmap/img_empty" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:text="暫無數據~" /></androidx.appcompat.widget.LinearLayoutCompat></RelativeLayout></androidx.appcompat.widget.LinearLayoutCompat></androidx.appcompat.widget.LinearLayoutCompat></RelativeLayout>

2. 創建商品分類（Adapter）適配器

public class CategoryListAdapter extends RecyclerView.Adapter<CategoryListAdapter.MyHolder> {private List<String> categoryList = new ArrayList<>();private int currentPosition = 0;public void setCategoryList(List<String> categoryList) {this.categoryList = categoryList;notifyDataSetChanged();}@NonNull@Overridepublic MyHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {return new MyHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_category_list, parent, false));}@Overridepublic void onBindViewHolder(@NonNull MyHolder holder, int position) {//綁定數據holder.tv_category_name.setText(categoryList.get(position));if (position == currentPosition) {holder.category_bg.setVisibility(View.VISIBLE);holder.tv_category_name.setTextColor(Color.parseColor("#333333"));} else {holder.category_bg.setVisibility(View.GONE);holder.tv_category_name.setTextColor(Color.parseColor("#666666"));}holder.itemView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {if (onItemClickListener != null) {onItemClickListener.onItemClick(position);}}});}@Overridepublic int getItemCount() {return categoryList.size();}static class MyHolder extends RecyclerView.ViewHolder {TextView tv_category_name;View category_bg;public MyHolder(@NonNull View itemView) {super(itemView);tv_category_name =itemView.findViewById(R.id.tv_category_name);category_bg =itemView.findViewById(R.id.category_bg);}}public void setCurrentPosition(int currentPosition) {this.currentPosition = currentPosition;notifyDataSetChanged();}//設置回調public interface OnItemClickListener {void onItemClick(int position);}private OnItemClickListener onItemClickListener;public void setOnItemClickListener(OnItemClickListener onItemClickListener) {this.onItemClickListener = onItemClickListener;}
}

對應布局文件item_category_list.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"><RelativeLayoutandroid:layout_width="wrap_content"android:layout_height="40dp"android:layout_marginLeft="16dp"android:layout_marginRight="16dp"><Viewandroid:id="@+id/category_bg"android:layout_width="40dp"android:layout_height="6dp"android:layout_alignParentBottom="true"android:layout_centerInParent="true"android:layout_marginBottom="12dp"android:background="#FF8C00" /><TextViewandroid:id="@+id/tv_category_name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:gravity="center"android:text="新品推薦"android:textColor="#333333" /></RelativeLayout></LinearLayout>

3. 實現商品分類Activity

在MainActivity中，初始化控件，綁定adapter，并實現點擊事件

public class MainActivity extends AppCompatActivity {private RecyclerView topRecyclerView;private CategoryListAdapter mCategoryListAdapter;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//初始化控件topRecyclerView = findViewById(R.id.topRecyclerView);//設置布局管理器  可以橫向滑動topRecyclerView.setLayoutManager(new LinearLayoutManager(MainActivity.this, LinearLayoutManager.HORIZONTAL, false));//初始化適配器mCategoryListAdapter = new CategoryListAdapter();//設置適配器topRecyclerView.setAdapter(mCategoryListAdapter);//獲取數據String[] stringArray = getResources().getStringArray(R.array.goods_type);mCategoryListAdapter.setCategoryList(Arrays.asList(stringArray));//topRecyclerView點擊事件mCategoryListAdapter.setOnItemClickListener(new CategoryListAdapter.OnItemClickListener() {@Overridepublic void onItemClick(int position) {mCategoryListAdapter.setCurrentPosition(position);}});}
}

4. 在res/values/ 下新建 array.xml ，用于添加商品分類數據

新建array.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<resources><!--    商品分類-->
<string-array name="goods_type"><item>食品飲料</item><item>日用百貨</item><item>母嬰用品</item><item>家居電器</item><item>美妝個護</item><item>服飾鞋帽</item><item>數碼產品</item><item>文體用品</item><item>醫藥保健</item><item>寵物用品</item>
</string-array></resources>

5. 效果演示

6. 關于作者其它項目視頻教程介紹

1. Android新聞資訊app實戰：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
2. Androidstudio開發購物商城實戰：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
3. Android開發備忘錄記事本實戰：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
4. Androidstudio底部導航欄實現：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
5. Android使用TabLayout+ViewPager2實現左右滑動切換：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8