仿京东的放分类页面

首先我们先分析分类的页面

然后我们根据分析的图来布局分类的Frament

            我们命名为fenleiframent.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="match_parent"
    android:orientation="vertical"  >


   

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ListView
            android:background="#F3F3F6"
            android:divider="#F3F3F6"
            android:dividerHeight="0.1dp"
            android:id="@+id/fen_lei_list_view"
            android:scrollbars="none"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent">

        </ListView>

        <FrameLayout
            android:id="@+id/fen_lei_frame"
            android:layout_width="0dp"
            android:layout_weight="3"
            android:layout_height="match_parent">

        </FrameLayout>


    </LinearLayout>
</LinearLayout>

上面就是分类的布局，左边一个listview，右边一个framelayout

然后我们需要在fenleiframent写我们需要的代码了

package com.bw.eastofbeijing.view.fragment;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;

import com.bw.eastofbeijing.R;
import com.bw.eastofbeijing.model.bean.FenLeiBean;
import com.bw.eastofbeijing.persenter.ShouYeFragmentP;
import com.bw.eastofbeijing.utils.ChenJinUtil;
import com.bw.eastofbeijing.utils.Constants;
import com.bw.eastofbeijing.view.acvitity.CustomCaptrueActivity;
import com.bw.eastofbeijing.view.acvitity.SuosouAcvitity;
import com.bw.eastofbeijing.view.adapter.FenLeiLelftAdapter;
import com.bw.eastofbeijing.view.iview.IHome;
import com.google.gson.Gson;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;
import okhttp3.ResponseBody;

/**
 * 祁凯凯 on 2018/3/20
 */

public class FenLeiFragment extends Fragment implements IHome,View.OnClickListener{
    @BindView(R.id.fen_lei_list_view)
     ListView fen_lei_list_view;
    @BindView(R.id.fen_lei_frame)
     FrameLayout fen_lei_frame;
    @BindView(R.id.linear_layout)
    LinearLayout linear_layout;
    @BindView(R.id.sao_hei)
    ImageView sao_hei;
    private ShouYeFragmentP fragmentHomeP;

    private List<FenLeiBean.DataBean> dataBeans=new ArrayList<>();
    private FenLeiLelftAdapter fenLeiLelftAdapter;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fenleifragment,container,false);
        ButterKnife.bind(this,view);
        return view;
    }
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        initChenJin();
        //获取左边listView展示的数据
        fragmentHomeP = new ShouYeFragmentP(this);
       //获取分类的数据
        fragmentHomeP.getFenLeiData(Constants.fenLeiUrl);
        
    }
  
    @Override
    public void onFenLeiSuccess(ResponseBody responseBody) {
        try {
            String json= responseBody.string();
            final FenLeiBean fenLeiBean=new Gson().fromJson(json,FenLeiBean.class);

            //给listView设置适配器
            fenLeiLelftAdapter = new FenLeiLelftAdapter(getActivity(), fenLeiBean);
            fen_lei_list_view.setAdapter(fenLeiLelftAdapter);

            //默认显示京东超市右边对应的数据
            FragmentFenLeiRight fragmentFenLeiRight = FragmentFenLeiRight.getInstance(fenLeiBean.getData().get(0).getCid());

            getChildFragmentManager().beginTransaction().replace(R.id.fen_lei_frame,fragmentFenLeiRight).commit();


            //条目点击事件
            fen_lei_list_view.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

                    //设置适配器当前位置的方法
                    fenLeiLelftAdapter.setCurPositon(i);
                    //刷新适配器...getView重新执行
                    fenLeiLelftAdapter.notifyDataSetChanged();
                    //滚动到指定的位置,,,第一个参数是滚动哪一个条目,,,滚动到哪个位置/偏移量
                    fen_lei_list_view.smoothScrollToPositionFromTop(i,(adapterView.getHeight()-view.getHeight())/2);

                    //使用fragment替换右边frameLayout....fragment之间的传值
                    FragmentFenLeiRight fragmentFenLeiRight = FragmentFenLeiRight.getInstance(fenLeiBean.getData().get(i).getCid());


                    getChildFragmentManager().beginTransaction().replace(R.id.fen_lei_frame,fragmentFenLeiRight).commit();


                }
            });
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

 
    
    
    }
}

我们使用的是mvp来写的

prester和mondel层我们就不用来写了，都是一样的

上面的代码就是给listview点击事件，往frament传值，已经传过去了，下面就是我们来接收传过去的值了

package com.bw.eastofbeijing.view.fragment;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.bw.eastofbeijing.R;
import com.bw.eastofbeijing.model.bean.ChildFenLeiBean;
import com.bw.eastofbeijing.model.linear.FenLeiRightInter;
import com.bw.eastofbeijing.persenter.FragmentFenLeiRightPresenter;
import com.bw.eastofbeijing.utils.Constants;
import com.bw.eastofbeijing.view.adapter.FenLeiRecyclerOutAdapter;
import com.google.gson.Gson;

import java.io.IOException;

import okhttp3.ResponseBody;


/**
 * 祁凯凯 on 2018/3/20
 */
public class FragmentFenLeiRight extends Fragment implements FenLeiRightInter {

    private RecyclerView fen_lei_recycler_out;
    private FragmentFenLeiRightPresenter fragmentFenLeiRightPresenter;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_fen_lei_right_layout,container,false);

        fen_lei_recycler_out = view.findViewById(R.id.fen_lei_recycler_out);

        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        fragmentFenLeiRightPresenter = new FragmentFenLeiRightPresenter(this);

        //获取传递的cid
        int cid = getArguments().getInt("cid", -1);
        if (cid != -1) {
            //获取展示的数据
            fragmentFenLeiRightPresenter.getChildData(Constants.childFenLeiUrl,cid);
        }

    }

    public static FragmentFenLeiRight getInstance(int cid) {
        FragmentFenLeiRight fragmentFenLeiRight = new FragmentFenLeiRight();

        //传值
        Bundle bundle = new Bundle();
        bundle.putInt("cid",cid);
        fragmentFenLeiRight.setArguments(bundle);

        return fragmentFenLeiRight;
    }

    @Override
    public void getSuccessChildData(ResponseBody responseBody) {
        try {
            String   json= responseBody.string();
            ChildFenLeiBean childFenLeiBean=new Gson().fromJson(json,ChildFenLeiBean.class);


            fen_lei_recycler_out.setLayoutManager(new LinearLayoutManager(getActivity()));
            //设置适配器
            FenLeiRecyclerOutAdapter fenLeiRecyclerOutAdapter = new FenLeiRecyclerOutAdapter(getActivity(), childFenLeiBean);
            fen_lei_recycler_out.setAdapter(fenLeiRecyclerOutAdapter);
        } catch (IOException e) {
            e.printStackTrace();
        }

    }
}

这里面用到一个布局

fragment_fen_lei_right_layout

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

    <ScrollView
        android:scrollbars="none"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:src="@drawable/timg"
                android:scaleType="fitXY"
                android:layout_width="match_parent"
                android:layout_height="100dp" />

            <android.support.v7.widget.RecyclerView
                android:id="@+id/fen_lei_recycler_out"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

            </android.support.v7.widget.RecyclerView>


        </LinearLayout>

    </ScrollView>





</LinearLayout>

这时候已经接收到了传过来的值，然后我们就要写一下适配器了

package com.bw.eastofbeijing.view.adapter;

import android.content.Context;
import android.content.Intent;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;

import com.bw.eastofbeijing.R;
import com.bw.eastofbeijing.model.bean.ChildFenLeiBean;
import com.bw.eastofbeijing.view.Holder.FenLeiRecyclerOutHolder;
import com.bw.eastofbeijing.view.acvitity.ProductListActivity;
import com.bw.eastofbeijing.view.adapter.linter.OnItemListner;


/**
 * 祁凯凯 on 2018/3/20
 */
public class FenLeiRecyclerOutAdapter extends RecyclerView.Adapter<FenLeiRecyclerOutHolder>{
    private ChildFenLeiBean childFenLeiBean;
    private Context context;

    public FenLeiRecyclerOutAdapter(Context context, ChildFenLeiBean childFenLeiBean) {
        this.context = context;
        this.childFenLeiBean = childFenLeiBean;
    }

    @Override
    public FenLeiRecyclerOutHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        View view = View.inflate(context, R.layout.reycler_out_item_layout,null);
        FenLeiRecyclerOutHolder fenLeiRecyclerOutHolder = new FenLeiRecyclerOutHolder(view);

        return fenLeiRecyclerOutHolder;
    }

    @Override
    public void onBindViewHolder(FenLeiRecyclerOutHolder holder, int position) {

        final ChildFenLeiBean.DataBean dataBean = childFenLeiBean.getData().get(position);
        //赋值...设置适配器
        holder.recycler_out_text.setText(dataBean.getName());

        //设置布局管理器
        holder.recycler_innner.setLayoutManager(new GridLayoutManager(context,3));
        //给里面的recyclerView设置适配器
        FenRecyclerInnerAdapter fenRecyclerInnerAdapter = new FenRecyclerInnerAdapter(context, dataBean);
        holder.recycler_innner.setAdapter(fenRecyclerInnerAdapter);
        //设置条目的点击事件
        fenRecyclerInnerAdapter.setOnItemListner(new OnItemListner() {
            @Override
            public void onItemClickListner(int i) {
                //Toast.makeText(context,dataBean.getList().get(i).getName(),Toast.LENGTH_SHORT).show();
                //做跳转传值的操作....跳转的是商品列表页面...商品列表页面调用的而是搜索关键字的接口
                Intent intent = new Intent(context, ProductListActivity.class);

                //传值...关键词
                intent.putExtra("keywords",dataBean.getList().get(i).getName());

                context.startActivity(intent);
            }
        });

    }

    @Override
    public int getItemCount() {
        return childFenLeiBean.getData().size();
    }
}

这个里面需要一个布局

reycler_out_item_layout

下面就是

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

    <TextView
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:id="@+id/recycler_out_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.v7.widget.RecyclerView
        android:background="#ffffff"
        android:id="@+id/recycler_innner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.v7.widget.RecyclerView>

</LinearLayout>

里面还有一个适配器

FenRecyclerInnerAdapter 

package com.bw.eastofbeijing.view.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;

import com.bumptech.glide.Glide;
import com.bw.eastofbeijing.R;
import com.bw.eastofbeijing.model.bean.ChildFenLeiBean;
import com.bw.eastofbeijing.view.Holder.FenRecyclerInnerHolder;
import com.bw.eastofbeijing.view.adapter.linter.OnItemListner;


/**
 * Created by Dash on 2018/1/26.
 */
class FenRecyclerInnerAdapter extends RecyclerView.Adapter<FenRecyclerInnerHolder>{
    private ChildFenLeiBean.DataBean dataBean;
    private Context context;
    private OnItemListner onItemListner;

    public FenRecyclerInnerAdapter(Context context, ChildFenLeiBean.DataBean dataBean) {
        this.context = context;
        this.dataBean = dataBean;
    }


    @Override
    public FenRecyclerInnerHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        View view = View.inflate(context, R.layout.fen_recycler_innner_layout,null);
        FenRecyclerInnerHolder fenRecyclerInnerHolder = new FenRecyclerInnerHolder(view);

        return fenRecyclerInnerHolder;
    }

    @Override
    public void onBindViewHolder(FenRecyclerInnerHolder holder, final int position) {

        ChildFenLeiBean.DataBean.ListBean listBean = dataBean.getList().get(position);

        //赋值
        holder.recycler_inner_text.setText(listBean.getName());
        Glide.with(context).load(listBean.getIcon()).into(holder.recycler_innner_image);

        //点击事件
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //回到
                onItemListner.onItemClickListner(position);
            }
        });

    }

    @Override
    public int getItemCount() {
        return dataBean.getList().size();
    }

    public void setOnItemListner(OnItemListner onItemListner) {
        this.onItemListner = onItemListner;
    }
}

然后里面的一个布局

fen_recycler_innner_layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_margin="5dp"
    android:padding="15dp"
    android:gravity="center_horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/recycler_innner_image"
        android:layout_width="50dp"
        android:layout_height="50dp" />

    <TextView
        android:gravity="center"
        android:id="@+id/recycler_inner_text"
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

正因为是recycView，所以需要2个viewhodle下面的两个自定义holder

package com.bw.eastofbeijing.view.Holder;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;

import com.bw.eastofbeijing.R;


/**
 * 祁凯凯 on 2018/3/20.
 */
public class FenLeiRecyclerOutHolder extends RecyclerView.ViewHolder {

    public TextView recycler_out_text;
    public RecyclerView recycler_innner;

    public FenLeiRecyclerOutHolder(View itemView) {
        super(itemView);

        recycler_out_text = itemView.findViewById(R.id.recycler_out_text);
        recycler_innner = itemView.findViewById(R.id.recycler_innner);

    }
}

package com.bw.eastofbeijing.view.Holder;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.bw.eastofbeijing.R;


/**
 * 祁凯凯 on 2018/3/20
 */
public class FenRecyclerInnerHolder extends RecyclerView.ViewHolder {

    public ImageView recycler_innner_image;
    public TextView recycler_inner_text;

    public FenRecyclerInnerHolder(View itemView) {
        super(itemView);

        recycler_innner_image = itemView.findViewById(R.id.recycler_innner_image);
        recycler_inner_text = itemView.findViewById(R.id.recycler_inner_text);

    }
}

都看到了我们用的接口，接口自己定义，然后在网络上请求的json串，放在接口上，进行请求就好了

这个时候基本上我们的项目分类已经完成了