Android仿京东商品分类效果

龙旋

共 9860字,需浏览 20分钟

 ·

2021-03-10 20:27

最近做项目需求的时候,需要实现类似京东的商品分类。网上看了很多都是通过listview+fragment实现,个人比较习惯使用RecyclerView,所以就通过RecyclerView+fragment实现了该需求,记录一下。


实现流程:


1、效果图



其中选中状态可以根据需求进行设置


2、Demo目录结构



3、主程序MainActivity(MainActivity)

public class MainActivity extends AppCompatActivity implements ThemeMainAdapter.OnSelectorListener {
private RecyclerView recyclerView; private ThemeMainAdapter adapter; private List<ThemeMainReq.DatasBean> datasBeanList; private ThemeFragment themeFragment;
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);
initView(); initData(); initListener(); }
private void initView() { recyclerView = findViewById(R.id.recyclerview);
//初始化recyclerView recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext(), LinearLayoutManager.VERTICAL, false)); recyclerView.addItemDecoration(new SpaceItemDecoration(getApplicationContext(), 5, 3));
//初始化adapter adapter = new ThemeMainAdapter(this); adapter.setOnSelectorListener(this); }
private void initData() { //模拟数据 String response = "{\"datas\": [{\"id\": \"56\",\"showName\": \"清新\"},{\"id\": \"57\",\"showName\": \"复古\"},{\"id\": \"58\", \"showName\": \"古风\"},{\"id\": \"59\", \"showName\": \"盐系\"},{ \"id\": \"141\", \"showName\": \"暗黑\"},{ \"id\": \"62\", \"showName\": \"花草\"},{\"id\": \"63\", \"showName\": \"\n" + "美食物品\"},{ \"id\": \"64\", \"showName\": \"人物\" },{ \"id\": \"65\", \"showName\": \"文字字母\"},{\"id\": \"67\", \"showName\": \"基础款\"},{\"id\": \"68\",\"showName\": \"风景\"},{ \"id\": \"70\", \"showName\": \"动物\"}]}\n"; //对数据进行解析 ThemeMainReq themeMainReq = new Gson().fromJson(response, ThemeMainReq.class); //获取分类集合 datasBeanList = themeMainReq.getDatas(); //数据处理 dealWithData(datasBeanList); }
private void dealWithData(List<ThemeMainReq.DatasBean> datasBeanList) { //传递数据 adapter.setData(datasBeanList); recyclerView.setAdapter(adapter); //默认选中 datasBeanList.get(0).setChick(true); //创建Fragment对象 themeFragment = new ThemeFragment(); FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction(); fragmentTransaction.replace(R.id.fragment_container, themeFragment);
//传递数据到Fragment Bundle mBundle = new Bundle(); mBundle.putSerializable("info", datasBeanList.get(0)); themeFragment.setArguments(mBundle); fragmentTransaction.commit(); }
private void initListener() {
}
@Override public void onSelect(View view, int position) {
//选中处理 ThemeMainReq.DatasBean datasBean = datasBeanList.get(position); for (int i = 0; i < datasBeanList.size(); i++) { if (datasBeanList.get(i).getShowName().equals(datasBean.getShowName())) { datasBeanList.get(i).setChick(true); } else { datasBeanList.get(i).setChick(false); } }
//刷新列表 adapter.notifyDataSetChanged();
//创建Fragment对象 themeFragment = new ThemeFragment(); FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction(); fragmentTransaction.replace(R.id.fragment_container, themeFragment);
//传递数据到Fragment Bundle mBundle = new Bundle(); mBundle.putSerializable("info", datasBeanList.get(position)); themeFragment.setArguments(mBundle); fragmentTransaction.commit(); }}


4、主程序布局文件(activity_main.xml)

<?xml version="1.0" encoding="utf-8"?><LinearLayout 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"    tools:context=".MainActivity">
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fbfbfb" android:orientation="horizontal">
<android.support.v7.widget.RecyclerView android:id="@+id/recyclerview" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="#fff" android:scrollbars="none" />
<View android:layout_width="1dp" android:layout_height="match_parent" android:background="#cdcdcd" />
<FrameLayout android:id="@+id/fragment_container" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="3" /> </LinearLayout>
</LinearLayout>


5、bean数据类(ThemeMainReq)

public class ThemeMainReq implements Serializable {

private List<DatasBean> datas;
public List<DatasBean> getDatas() { return datas; }
public void setDatas(List<DatasBean> datas) { this.datas = datas; }
public static class DatasBean implements Serializable{ /** * id : 56 * showName : 清新 */
private String id; private String showName; private boolean chick; //标识
public boolean isChick() { return chick; }
public void setChick(boolean chick) { this.chick = chick; }
public String getId() { return id; }
public void setId(String id) { this.id = id; }
public String getShowName() { return showName; }
public void setShowName(String showName) { this.showName = showName; } }}


6、适配器adapter(ThemeMainAdapter)

public class ThemeMainAdapter extends RecyclerView.Adapter<ThemeMainAdapter.ViewHolder> {    private Context mContext;    private List<ThemeMainReq.DatasBean> listinfos;
public ThemeMainAdapter(Context context) { this.mContext = context; }
//接收数据 public void setData(List<ThemeMainReq.DatasBean> listinfos) { this.listinfos = listinfos; }
@Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(mContext).inflate(R.layout.item, parent, false); ViewHolder viewHolder = new ViewHolder(view); return viewHolder; }
@Override public void onBindViewHolder(final ViewHolder holder, final int position) {
holder.itemView.setId(position);
ThemeMainReq.DatasBean datasBean = listinfos.get(position); holder.text_content.setText(datasBean.getShowName());
if (datasBean.isChick()) { holder.itemView.setBackgroundResource(R.drawable.auth_code_bg); } else { holder.itemView.setBackgroundColor(Color.parseColor("#DDDDDD")); }
holder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mSelectorListener.onSelect(v, position); } });
}
public interface OnSelectorListener { void onSelect(View view, int position); }
public void setOnSelectorListener(OnSelectorListener listener) { mSelectorListener = listener; }
private OnSelectorListener mSelectorListener;
@Override public int getItemCount() { return listinfos.size() == 0 ? 0 : listinfos.size(); }
public static class ViewHolder extends RecyclerView.ViewHolder { public TextView text_content;
public ViewHolder(View itemView) { super(itemView); text_content = itemView.findViewById(R.id.tv); } }}


7、Fragment类(ThemeFragment)

public class ThemeFragment extends Fragment {
@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // TODO Auto-generated method stub View view = inflater.inflate(R.layout.myfragment, null); TextView tv_title = (TextView) view.findViewById(R.id.tv_title); //得到数据 ThemeMainReq.DatasBean info = (ThemeMainReq.DatasBean) getArguments().getSerializable("info"); tv_title.setText(info.getShowName()); return view; }}


需要Demo的童鞋,公众号回复 "商品分类"即可获取。


到这里就完成啦.


点击这里留言交流哦


浏览 73
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报