Android仿京东商品分类效果-技术圈

最近做项目需求的时候，需要实现类似京东的商品分类。网上看了很多都是通过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的童鞋，公众号回复 "商品分类"即可获取。

到这里就完成啦.

点击这里留言交流哦