RecyclerView系列 - 仿内涵段子列表整合

1. 说明

---

通过我们上节课对RecyclerView分割线源码的分析，那么这节课我们就来将内涵段子中的列表整合到我们的RecyclerView中。这节课的代码也可以说是和我们正式开发是一样的流程：先findviewbyid我们的RecyclerView的控件、然后使用 OkHttp来请求网络数据、然后使用Glide来加载图片。那么我们接下来就正式的开始我们今天的课程。

2. 步骤

---

2.1 首先先findViewById找到 RecyclerView控件，然后设置布局样式，设置分割线；
2.2 初始化 OKHttp；
2.3 请求服务器数据
2.4 获取服务器返回的List 集合数据，注意这里必须使用handler 来进行填充数据，因为这里不是主线程；
2.5 自定义一个 CategoryListAdapter
这里需要注意：
2.5.1 自定义一个CategoryListAdapter需要 继承 RecyclerView.Adapter<泛型>；
2.5.2 这里的泛型必须是自定义一个 ViewHolder , 然后继承 RecyclerView.ViewHolder；
2.5.3 然后实现RecyclerView的3个方法，分别是getItemCount()、onCreateViewHolder()、onBindViewHolder()，意思分别是获取item个数、创建布局、显示布局绑定数据；
创建布局的类型必须是 自定义CategoryListAdapter 下的ViewHolder，而不能是 RecyclerView下的 ViewHolder；
显示布局岗顶参数的onBindViewHolder方法中第一个参数必须是 自定义CategoryListAdapter 下的ViewHolder，而不能是 RecyclerView下的 ViewHolder；

---

NHDZListActivity.class 代码如下：

/**
 * Created by JackChen on 2018/3/3.
 * decription : 仿内涵段子列表整合的RecyclerView
 */
public class NHDZListActivity extends AppCompatActivity {

    private RecyclerView recycler_view;

    //不管listview还是RecyclerView，都必须在最外层定义一个list集合，用于存放从服务器请求的数据
//    private ArrayList> listItem;

    private OkHttpClient mOkHttpClient;
    private static Handler mHandler = new Handler();


    // 后台返回的数据集合
    List mData;
    private CategoryListAdapter listAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_base_use) ;



        recycler_view = (RecyclerView) findViewById(R.id.recycler_view);
        // 设置布局样式为 ListView样式
        recycler_view.setLayoutManager(new LinearLayoutManager(this));
        // 添加分割线
        recycler_view.addItemDecoration(new LinearLayoutItemDecoration(this , R.drawable.category_list_divider));

        mOkHttpClient = new OkHttpClient() ;

        //请求服务器数据
        requestListData() ;




    }


    /**
     * 请求服务器数据
     */
    private void requestListData() {
        // 利用Okhttp去获取网络数据
        Request.Builder builder = new Request.Builder();
        // 这里是写死的 后面系统讲的时候会优化  后面我们自己会打造第三方的网络引擎不会直接拿过来用第三方的
        builder.url("http://is.snssdk.com/2/essay/discovery/v3/?iid=6152551759&channel=360&aid=7" +
                "&app_name=joke_essay&version_name=5.7.0&ac=wifi&device_id=30036118478&device_brand=Xiaomi&update_version_code=5701&" +
                "manifest_version_code=570&longitude=113.000366&latitude=28.171377&device_platform=android");

        mOkHttpClient.newCall(builder.build()).enqueue(new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {
                e.printStackTrace();
            }

            @Override
            public void onResponse(Call call, Response response) throws IOException {

                // 后台返回的json字符串
                String result = response.body().string();
                // Gson 解析成对象
                ChannelListResult channelList = new Gson().fromJson(result, ChannelListResult.class);
                // 获取列表数据
                final List categoryList =
                        channelList.getData().getCategories().getCategory_list();


                // 注意：这里更新数据必须使用handler 该方法不是在主线程中
                mHandler.post(new Runnable() {
                    @Override
                    public void run() {
                        showListData(categoryList);
                    }
                });
            }
        });
    }



    /**
     * 显示列表数据
     *
     * @param categoryList
     */
    private void showListData(List categoryList) {
        // 这里在在最外层定义一个集合，用于接收请求接口的数据，
        // 其实这里也可以不用在最外层定义list集合来接收数据，直接使用接口返回的categoryList数据也是可以的
        mData = categoryList;
        listAdapter = new CategoryListAdapter(this, mData);
        recycler_view.setAdapter(listAdapter);
    }

}

---

CategoryListAdapter.class 代码如下：
代码中注释已经很详细了，一定要注意代码中 的 4个注意

/**
 * Created by JackChen on 2018/3/4.
 * Email: [email protected]
 * Description: 内涵段子列表数据的 adapter
 */
// 注意1. 自己写的Adapter 继承自 RecyclerView.Adapter，
// 还要添加泛型，泛型也是自己写的 Adapter下的ViewHolder，而不是RecyclerView下的ViewHolder
public class CategoryListAdapter extends RecyclerView.Adapter {

    private Context mContext ;
    private List mData ;

    public CategoryListAdapter(Context context, List datas) {
        this.mContext = context ;
        this.mData = datas ;
    }


    // 注意2. 这里的创建布局是自己写的 Adapter下的ViewHolder，而不是RecyclerView下的ViewHolder
    // 创建ViewHolder 实例化View
    @Override
    public CategoryListAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(mContext).inflate(R.layout.channel_list_item, parent , false) ;
        ViewHolder viewHolder = new ViewHolder(itemView) ;
        return viewHolder;
    }


    // 注意3. 这里的绑定数据的 参数1的ViewHolder也是自己 写的Adapter下的 ViewHolder，而不是RecyclerView下的ViewHolder
    // 显示布局 绑定数据
    @Override
    public void onBindViewHolder(CategoryListAdapter.ViewHolder holder, final int position) {
        // 在这里取出 Activity中请求接口的list集合数据，然后给 item 中 每个子控件去设置数据
        ChannelListResult.DataBean.
                CategoriesBean.CategoryListBean item = mData.get(position) ;
        Glide.with(mContext).load(item.getIcon_url()).into(holder.channel_icon) ;


        // 名字
        holder.channel_text.setText(item.getName());
        // 内容
        holder.channel_topic.setText(item.getIntro());

        // 显示数据  因为最下边数据是：左边灰色，右边粉红色，所以这里使用html
        String str = item.getSubscribe_count() + " 订阅 | " +
                "总帖数 " + item.getTotal_updates() + "";
        holder.channel_update_info.setText(Html.fromHtml(str));

    }

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



    // 注意4. 这里自己 写一个ViewHolder 继承 RecyclerView下的ViewHolder
    public static class ViewHolder extends RecyclerView.ViewHolder{

        public ImageView channel_icon;
        public ImageView recommend_label;
        public TextView channel_text ;
        public TextView action_btn ;
        public TextView channel_topic ;
        public TextView channel_update_info ;


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

            // 在这里进行findviewbyid 找到item布局中所有的控件

            recommend_label = (ImageView) itemView.findViewById(R.id.recommend_label); //左上角new
            channel_icon = (ImageView) itemView.findViewById(R.id.channel_icon);  //最左边大图
            action_btn = (TextView) itemView.findViewById(R.id.action_btn);  // 最右边的订阅

            channel_text = (TextView) itemView.findViewById(R.id.channel_text);  //文字1 左边灰色 右边红色可以用html写
            channel_topic = (TextView) itemView.findViewById(R.id.channel_topic); //文字2
            channel_update_info = (TextView) itemView.findViewById(R.id.channel_update_info); // 文字3
        }
    }
}