当前位置：首页 > news >正文

Androidstudio开发，实现商品分类

news 来源：原创 2025/5/25 14:06:33

文章目录

- 1. 功能需求
- 2. 代码实现过程
- - - 1. 编写布局文件
    - 2. 创建商品分类（Adapter）适配器
    - 3. 实现商品分类Activity
    - 4. 在res/values/ 下新建 array.xml ，用于添加商品分类数据
    - 5. 效果演示
- 6. 关于作者其它项目视频教程介绍

1. 功能需求

在这里插入图片描述

显示商品分类数据
当分类数据超过一屏时，可以左右滑动显示
点击当前商品分类时，需要高亮显示，并且默认第一个商品分类选中

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.Toolbar
        android: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.LinearLayoutCompat
            android:layout_below="@id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/topRecyclerView"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />


                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <androidx.recyclerview.widget.RecyclerView
                        android: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.LinearLayoutCompat
                        android:id="@+id/empty_view"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:gravity="center"
                        android:orientation="vertical">


                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="80dp"
                            android:src="@mipmap/img_empty" />

                        <TextView
                            android: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
    @Override
    public MyHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new MyHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_category_list, parent, false));
    }

    @Override
    public 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() {
            @Override
            public void onClick(View view) {
                if (onItemClickListener != null) {
                    onItemClickListener.onItemClick(position);
                }
            }
        });
    }

    @Override
    public 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">


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp">

        <View
            android: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" />

        <TextView
            android: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;

    @Override
    protected 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() {
            @Override
            public 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. 关于作者其它项目视频教程介绍

Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
Androidstudio底部导航栏实现：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
Android使用TabLayout+ViewPager2实现左右滑动切换：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8