文章目录
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