Android商城开发----点击左侧分类列表右侧更新对应列表内容

Android商城开发----点击左侧分类列表右侧更新对应列表内容

一、首先说布局：

1.整个分类页是一个Fragment，在这个前面链接里，建的底部导航栏基础上做的，这页是分类的Fragment点击查看 ，同时本文在点击实现类别选中状态切换这篇文章的基础上做的，这篇文章识别了左侧点击的类别项目是哪个，为后续点击实现右侧列表展现做了铺垫。

2.我是在这个基础上自己写了两个Fragment，左侧一个Fragment：内部是一个RecyclerView，用来显示分类列表；右侧是一个Fragment：内部也是一个RecyclerView，显示的是商品列表，商品列表包含左侧商品Icon(ImageView)，右侧是标题(TextView)。如下图所示：

关于布局的问题主要是RecyclerVIew的使用及Adapter的使用，这里先不说啦。布局代码在最下面！

二、主要说一下，布局完成后实现点击左侧类别时，右侧展现对应类的商品列表。

主要思想：

主要思想是，
1.左侧Fragment点击时使用EventBus发送信号（position点击的位置）（这个操作在左侧Fragment的RecyclerView的Adapter中实现的。），
2.右侧Fragment.java接收信号，识别出点击的是哪个类别。
3.Fragment.java将position传给RecyclerView的Adapter，根据类别，填充对应的Icon和Title。
（PS:
相关文章：EventBus使用详解这篇文章写的非常非常详细了，我就是参照这篇文章用的EventBus，你们也去学习一下吧！）

源代码：

1.左侧Fragment发送信号

EventBus发送方，如果不需要接收信号就不用进行EventBus的注册，直接写：

//把点击的选项position传给右侧Fragment
EventBus.getDefault().post(new MessageEvent(position)); 
1
2

位置放在左侧Fragment RecyclerView 的adapter中，具体位置如下图。

这是因为在切换选中背景一文中，我在这里判断了 点击的卡片，点击后切换背景颜色。同时，发送EventBus信号，让右侧的Fragment做出回应。

2.右侧Fragment 接受，右侧Fragment.java注册/反注册：

注册和反注册总是成对出现，注册在onCreate方法中，反注册在onDestory方法中

 @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //注册EventBus  注册在onCreate方法中
        EventBus.getDefault().register(this);

    }
1
2
3
4
5
6
7

    @Override
    public void onDestroy(){
        super.onDestroy();
        //反注册EventBus  反注册在onDestory方法中
        EventBus.getDefault().unregister(this);
    }
1
2
3
4
5
6

3.右侧Fragment.java中，在onCreateView()中初始化View：

//onCreateView()
initView();

//在函数外面定义initView()方法
//定义初始化
    private void initView(){
        rightRecyclerView=root.findViewById(R.id.category_list_right);
    }
1
2
3
4
5
6
7
8

4.订阅事件

右侧Fragment.java中订阅事件：

//收到消息后，改变recyclerview的列表
//这里方法名可以任意取，但必须添加@Subscribe注解，在这里写下接收到信号后要做的事情
    @Subscribe(threadMode = ThreadMode.MAIN)
    public void onMessageEvent(MessageEvent event){

       
        int position=event.getMessage();//获得传的信息，左侧点的是哪个选项
		//将position作为参数传给商品列表的Adapter，让Adapter判断添加对应的商品列表
        rightAdapter=new CategoryListRightAdapter(getActivity(),position); //更新adapter
         rightRecyclerView.setAdapter(rightAdapter); //重新设置新的adapter
       // 这里我先打印了下，position的值，我设了三个分类 position是0，1，2
        Log.e(TAG,"onMessageEvent:"+event.getMessage());
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14

5.在右侧RecyclerView的Adapter中，根据position配置商品信息

Adapter.java文件：这里是写右侧RecyclerView内容的adapter文件

private List<Integer> listIcon=new ArrayList<Integer>();
private List<Integer> listTitle=new ArrayList<Integer>();
public CategoryListRightAdapter(Context context,int position){ //这里的position就是前面传过来的position
        if(position==0){  //如果是第一个分类 加载哪个图片，哪个标题 这里个数要一致
            icons=new int[]{R.drawable.icon1, R.drawable.icon2};
            titles= new int[]{R.string.title1, R.string.title2};
        }else if(position==1){//如果是第二个分类 加载哪个图片，哪个标题 
            icons=new int[]{R.drawable.icon3, R.drawable.icon4};
            titles= new int[]{R.string.title3, R.string.title4};
        }else if(position==2){//如果是第三个分类 加载哪个图片，哪个标题 
            icons=new int[]{R.drawable.icon5, R.drawable.icon6};
            titles= new int[]{R.string.title5, R.string.title6};
        }else{//开始的时候，没有发生点击事件，设置adapter的时候默认传一个其他的值，刚点分类进去的时候显示所有列表
         icons=new int[]{R.drawable.icon1, R.drawable.icon2,R.drawable.icon3, R.drawable.icon4,R.drawable.icon5, R.drawable.icon6};
            titles= new int[]{R.string.title1, R.string.title2,R.string.title3, R.string.title4,R.string.title5, R.string.title6};
        }
        lContext=context;
        for (int i=0;i<icons.length;i++){
            listIcon.add(icons[i]);//把他们加进RecyclerView中
            listTitle.add(titles[i]);
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

布局文件：

fragment_category.xml

这里布局了两个fragment 左右两个：

<?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"
    android:orientation="horizontal"
    tools:context=".ui.category.CategoryFragment">

 <fragment
     android:id="@+id/frag_left"
     android:name="com.domain.mainView.CategoryLeftFragment"
     android:layout_width="0dp"
     android:layout_height="match_parent"

     android:layout_weight="0.8"/>
 <fragment
   android:id="@+id/frag_right"
     android:layout_toRightOf="@+id/frag_left"
     android:name="com.domain.mainView.CategoryRightFragment"
     android:layout_width="0dp"
     android:layout_height="match_parent"

     android:layout_weight="2.2"/>
</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

fragment_category_left.xml

左侧Fragment，这里布局了一个RecyclerView用来放商品类别

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".CategoryLeftFragment">

    <!-- TODO: Update blank fragment layout -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/category_list_left"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#BFBFBF"
     />
</FrameLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

RecyclerView对应的list布局：category_list_left.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#00AAA6"
    android:orientation="vertical"
    >

    <TextView
        android:id="@+id/category_list_text"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:textSize="20sp"

        android:background="#00AAA6"
        android:textColor="@color/black"
        android:layout_gravity="center_vertical"
        android:gravity="center"
        />
    <View
        android:id="@+id/line"
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="#A3A2A3" />

</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

fragment_category_right.xml

右侧fragment布局
这里也是只放了一个RecyclerView，用来放列表对应的商品列表：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".CategoryRightFragment">

    <!-- TODO: Update blank fragment layout -->
   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/category_list_right"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:paddingBottom="?attr/actionBarSize"
       android:background="#F0FFF0"/>

</FrameLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

右侧RecyclerView对应的list布局文件：fragment_list_right.xml
这个list里放了商品的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <!--    Icon和标题-->
    <LinearLayout
        android:id="@+id/visibility_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="10dp">

        <ImageView
            android:id="@+id/img_icon_right"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="left"
            android:scaleType="fitXY" />
        <!--标题和价格-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingTop="10dp">

            <TextView
                android:id="@+id/text_title_right"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:textSize="15sp" />
            <!--            价格和加入购物车-->
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:id="@+id/text_price_right"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="#D00000"
                    android:layout_marginLeft="10dp"
                    android:layout_marginBottom="3dp"
                    android:layout_marginTop="3dp"
                    android:textSize="16sp" />

                <ImageButton
                    android:id="@+id/img_shopCar"
                    android:layout_width="40dp"
                    android:layout_height="35dp"
                    android:layout_toRightOf="@+id/text_price_right"
                    android:layout_alignRight="@+id/text_title_right"
                    android:scaleType="fitXY"
                    android:src="@drawable/car"
                    tools:ignore="NotSibling" />
            </RelativeLayout>
        </LinearLayout>
    </LinearLayout>

    <View
        android:id="@+id/line"
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:layout_marginRight="5dp"
        android:background="#A3A2A3" />

</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

下一篇：点击将商品加入购物车！
快来上手试试吧！路过的点个赞哦！