Android Study Material Design 二

本文目标

阅读完本文，你会get如下技能：

• 使用RecyclerView实现复杂布局；

• 使用RecyclerView实现ListView以及GirdView混排效果；

• 通过优化Model加深了解通过RecyclerView实现混排效果。

希望通过不断get小技能，让你在Android路上一路畅通无堵~

废话不多说，开车~

一、使用RecyclerView实现复杂布局

首先我们先做一些基本操作，类似于控件放置，初始化(控件，模拟数据)等。

1.1 引用RecyclerView，填充布局

1）Android Studio的小伙伴记得引入有关RecyclerView依赖；
2）Eclipse的小伙伴记得拷贝本地SDK下载包含的RecyclerView jar包即可。

布局放置如下：

放置好了一个RecyclerView，下面模拟数据时，来一个Model类。

1.2 设置Model类

package com.materialdesignstudy.complexrecycler.itemone;/**
 * Created by HLQ on 2017/10/22
 */public class DataModel {    // 状态标识位
    public static final int TYPE_ONE = 1;    public static final int TYPE_TWO = 2;    public static final int TYPE_THREE = 3;    public int type; // 类型 针对某种样式文件 也就是布局
    public int avatarColor; // 头像颜色
    public String name; // 姓名
    public String content; // 内容
    public int contentColor; // 内容颜色}

1.3 定义item布局

如效果图一般，我们创建如下item布局文件：

item_type_one

item_type_two：

item_layout_three：

1.4 编写对应ViewHolder

由于我们的ViewHolder都需要构造以及数据绑定，由此，我们拓展一个封装ViewHolder类，让其他的ViewHolder直接集成此类即可。

定义封装ViewHolder类：

package com.materialdesignstudy.complexrecycler.itemone;import android.support.v7.widget.RecyclerView;import android.view.View;/**
 * ViewHolder封装类
 * Created by HLQ on 2017/10/22
 */public abstract class TypeAbstractViewHolder extends RecyclerView.ViewHolder {    public TypeAbstractViewHolder(View itemView) {        super(itemView);
    }    /**
     * 数据绑定
     *
     * @param dataModel 数据源 由于我们模拟数据实体类暂定为DataModel 这里直接传入这个即可
     *                  后期可根据项目实际需求去设置 也可以直接写为T
     */
    public abstract void bindHolder(DataModel dataModel);

}

定义Item1对应的ViewHolder：

package com.materialdesignstudy.complexrecycler.itemone;import android.graphics.Color;import android.view.View;import android.widget.ImageView;import android.widget.TextView;import com.materialdesignstudy.R;/**
 * Created by HLQ on 2017/10/22
 */public class TypeOneViewHolder extends TypeAbstractViewHolder {    public ImageView avatar;    public TextView name;    public TypeOneViewHolder(View itemView) {        super(itemView);        // 初始化控件
        avatar = itemView.findViewById(R.id.avatar);
        name = itemView.findViewById(R.id.name);        // 为了区分item 这里为item设置背景颜色
        itemView.setBackgroundColor(Color.YELLOW);
    }    @Override
    public void bindHolder(DataModel dataModel) {        // 数据绑定
        avatar.setBackgroundResource(dataModel.avatarColor);
        name.setText(dataModel.name);
    }

}

item2对应ViewHolder：

package com.materialdesignstudy.complexrecycler.itemone;import android.graphics.Color;import android.view.View;import android.widget.ImageView;import android.widget.TextView;import com.materialdesignstudy.R;/**
 * Created by HLQ on 2017/10/22
 */public class TypeTwoViewHolder extends TypeAbstractViewHolder {    public ImageView avatar;    public TextView name, content;    public TypeTwoViewHolder(View itemView) {        super(itemView);
        avatar = itemView.findViewById(R.id.avatar);
        name = itemView.findViewById(R.id.name);
        content = itemView.findViewById(R.id.content);
        itemView.setBackgroundColor(Color.GRAY);
    }    @Override
    public void bindHolder(DataModel dataModel) {
        avatar.setBackgroundResource(dataModel.avatarColor);
        name.setText(dataModel.name);
        content.setText(dataModel.content);
    }

}

item3对应ViewHolder：

package com.materialdesignstudy.complexrecycler.itemone;import android.graphics.Color;import android.view.View;import android.widget.ImageView;import android.widget.TextView;import com.materialdesignstudy.R;/**
 * Created by HLQ on 2017/10/22
 */public class TypeThreeViewHolder extends TypeAbstractViewHolder {    public ImageView avatar, contentImg;    public TextView name, content;    public TypeThreeViewHolder(View itemView) {        super(itemView);
        avatar = itemView.findViewById(R.id.avatar);
        name = itemView.findViewById(R.id.name);
        content = itemView.findViewById(R.id.content);
        contentImg = itemView.findViewById(R.id.contentImg);
        itemView.setBackgroundColor(Color.BLUE);
    }    @Override
    public void bindHolder(DataModel dataModel) {
        avatar.setBackgroundResource(dataModel.avatarColor);
        name.setText(dataModel.name);
        content.setText(dataModel.content);
        contentImg.setBackgroundResource(dataModel.contentColor);
    }

}

1.5 定义空的Adapter类，初始化控件、模拟数据

package com.materialdesignstudy.complexrecycler.itemone;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import com.materialdesignstudy.R;import java.util.ArrayList;import java.util.List;/**
 * 复杂布局实现
 * Created by HLQ on 2017/10/22
 */public class ComplexOneActivity extends AppCompatActivity {    private RecyclerView mRecyclerView;    private OneAdapter mOneAdapter;    private int mColor[] = {android.R.color.holo_red_light,
            android.R.color.holo_green_light,
            android.R.color.holo_blue_light};    @Override
    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_complec_one);
        initItem();
        initData();
    }    private void initData() {
        List dataList = new ArrayList<>();        for (int i = 0; i < 20; i++) {            int type = (int) ((Math.random() * 3) + 1); // 随机type
            DataModel dataModel = new DataModel();
            dataModel.avatarColor = mColor[type - 1];
            dataModel.type = type;
            dataModel.name = "name" + i;
            dataModel.content = "content:" + i;
            dataModel.contentColor = mColor[(type + 1) % 3];
            dataList.add(dataModel);
        }
        mOneAdapter.addList(dataList);
        mOneAdapter.notifyDataSetChanged();
    }    private void initItem() {
        mRecyclerView = findViewById(R.id.id_recy);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
        mOneAdapter = new OneAdapter(this);
        mRecyclerView.setAdapter(mOneAdapter);
    }
}

以上这些都是很easy的，这里就不过多说明了。关键内容如下，让我们一起瞅瞅Adapter又是如何编写的。

1.6 打造属于you的Adapter

首先，这里需要再次说明一点：

• getItemViewType()：返回当前ItemView类型，而我们将会根据此类型进行相应的业务处理。

嗯那，就是这样，下面直接放出代码：

package com.materialdesignstudy.complexrecycler.itemone;import android.content.Context;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.ViewGroup;import com.materialdesignstudy.R;import java.util.ArrayList;import java.util.List;/**
 * Created by HLQ on 2017/10/22
 */public class OneAdapter extends RecyclerView.Adapter {    private LayoutInflater mLayoutInflater;    private List mDataList = new ArrayList<>();    public OneAdapter(Context context) {        this.mLayoutInflater = LayoutInflater.from(context);
    }    public void addList(List dataModelList) {        this.mDataList.addAll(dataModelList);
    }    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        // 通过获取不同的viewType，返回对应的ViewHolder以及引入的布局文件进行渲染，从而实现复杂布局实现
        switch (viewType) {            case DataModel.TYPE_ONE:                return new TypeOneViewHolder(mLayoutInflater.inflate(R.layout.item_type_one, parent, false));            case DataModel.TYPE_TWO:                return new TypeTwoViewHolder(mLayoutInflater.inflate(R.layout.item_type_two, parent, false));            case DataModel.TYPE_THREE:                return new TypeThreeViewHolder(mLayoutInflater.inflate(R.layout.item_type_three, parent, false));
        }        return null;
    }    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {        // 由于子类ViewHolder继承自TypeAbstractViewHolder，这里可以直接通过强制转化去绑定数据
        // 这也是我们为什么要对ViewHolder进行封装的一点优势
        ((TypeAbstractViewHolder) holder).bindHolder(mDataList.get(position));
    }    @Override
    public int getItemCount() {        return mDataList.size();
    }    @Override
    public int getItemViewType(int position) {        return mDataList.get(position).type;
    }
}

到现在为止，我们已经完成了通过RecyclerView实现复杂布局，不信你可以运行下你现在的代码喽~

二、使用RecyclerView实现ListView以及GirdView混排效果

本小节内容主要关注于LayoutManager的setSpanSizeLookup()方法，下面对其进行简述。

> setSpanSizeLookup()： 主要使用这个方法来展示不同的 item 屏幕跨度 
> 
> * spanCount：在创建 GridLayoutManager 对象的时候构造方法需要传入这个参数，也就是设置每行排列 item 个数。
><br/>
> * spanSize：在 setSpanSizeLookup() 方法中，这个方法返回的是当前位置的 item 跨度大小。
> 

嗯哼，简单了解后，我们撸码呗`

package com.materialdesignstudy.complexrecycler.itemtwo;import android.graphics.Rect;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.GridLayoutManager;import android.support.v7.widget.RecyclerView;import android.view.View;import com.materialdesignstudy.R;import com.materialdesignstudy.complexrecycler.itemone.DataModel;import com.materialdesignstudy.complexrecycler.itemone.OneAdapter;import java.util.ArrayList;import java.util.List;/**
 * 使用RecyclerView实现ListView+GridView混排效果
 * create by heliquan at 2017年10月23日
 * 重点关注setSpanSizeLookup即可 获取当前跨度
 */public class ComplexTwoActivity extends AppCompatActivity {    private RecyclerView mRecyclerView;    private OneAdapter mOneAdapter;    private int mColor[] = {android.R.color.holo_red_light,
            android.R.color.holo_green_light,
            android.R.color.holo_blue_light};    @Override
    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_complec_one);
        initItem();
        initData();
    }    private void initData() {
        List dataList = new ArrayList<>();        for (int i = 0; i < 30; i++) {            // 模拟不同itemType
            int type;            if (i  15 && i < 20)) {
                type = 1;
            } else if (i  20) {
                type = 2;
            } else {
                type = 3;
            }
            DataModel dataModel = new DataModel();
            dataModel.avatarColor = mColor[type - 1];
            dataModel.type = type;
            dataModel.name = "name" + i;
            dataModel.content = "content:" + i;
            dataModel.contentColor = mColor[(type + 1) % 3];
            dataList.add(dataModel);
        }
        mOneAdapter.addList(dataList);
        mOneAdapter.notifyDataSetChanged();
    }    private void initItem() {
        mRecyclerView = findViewById(R.id.id_recy);        // 更换显示布局样式为GirdLayoutManager
        final GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2);
        gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {            @Override
            public int getSpanSize(int position) {                // 获取当前位置下的ItemViewType
                int type = mRecyclerView.getAdapter().getItemViewType(position);                // 由于item1和item2可以正常显示 而item3需要横跨2列
                // 所以需要在这里对item3进行单独处理
                if (type == DataModel.TYPE_THREE) {                    return gridLayoutManager.getSpanCount(); // item3需要横跨2列
                } else {                    return 1;
                }
            }
        });
        mRecyclerView.setLayoutManager(gridLayoutManager);
        mOneAdapter = new OneAdapter(this);
        mRecyclerView.setAdapter(mOneAdapter);        // 为了显示效果更好 在此添加分割线
        mRecyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {            @Override
            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
                GridLayoutManager.LayoutParams layoutParams = (GridLayoutManager.LayoutParams) view.getLayoutParams();                int spanSize = layoutParams.getSpanSize(); // 获取当前位置的 item 跨度大小
                int spanIndex = layoutParams.getSpanIndex(); // 获取每行排列 item 个数
                outRect.top = 20;                // 如果当前跨度不等于当前索引 表示当前不属于item3
                if (spanSize != gridLayoutManager.getSpanCount()) { // 针对item1，item2做分割线处理
                    if (spanIndex == 1) {
                        outRect.left = 10;
                    } else {
                        outRect.right = 10;
                    }
                }
            }
        });
    }
}

其实这部分的关键点就是在于那个方法，大家有时间可以细致了解。

好了，到现在为止，第二小节也over了。Nice。

三、复杂Model应对之策

以上俩点都是基于相同的Model，那么在实际开发中，我们Model也许各不相同，那么这时候该如何处理呢？

这里为大家提供下思路，可以顺着延伸下。

• 改造ViewHolder封装类，之前我们直接采用固定Model，而今替换T即可，而对应子类ViewHolder继承时需要指定Model类型；

• Adapter中却需要记录当前itemType对应包含List.size()以及itemType对应类型。原因在于我们需要将数据进行组合，因为后台的数据不可能会按照我们所想的来，只能进行二次拼接。

关键内容如上，下面就简单贴出关键代码，完整代码请在下方查看GitHub。

3.1 改造后的ViewHolder封装类

package com.materialdesignstudy.complexrecycler.itemthree;import android.support.v7.widget.RecyclerView;import android.view.View;import com.materialdesignstudy.complexrecycler.itemone.DataModel;/**
 * Created by HLQ on 2017/10/22
 */public abstract class TypeAbstractViewHolder extends RecyclerView.ViewHolder {    public TypeAbstractViewHolder(View itemView) {        super(itemView);
    }    public abstract void bindHolder(T dataModel);

}

3.2 改造后的数据初始化

    private void initData() {
        List oneList = new ArrayList<>();        for (int i = 0; i < 10; i++) {
            DataModelOne dataModel = new DataModelOne();
            dataModel.name = "name" + i;
            dataModel.avatatColor = mColor[0];
            oneList.add(dataModel);
        }
        List twoList = new ArrayList<>();        for (int i = 0; i < 10; i++) {
            DataModelTwo dataModel = new DataModelTwo();
            dataModel.name = "name" + i;
            dataModel.avatatColor = mColor[1];
            dataModel.content = "content:" + i;
            twoList.add(dataModel);
        }
        List threeList = new ArrayList<>();        for (int i = 0; i < 10; i++) {
            DataModelThree dataModel = new DataModelThree();
            dataModel.name = "name" + i;
            dataModel.avatatColor = mColor[2];
            dataModel.content = "content:" + i;
            dataModel.contentColor = mColor[2];
            threeList.add(dataModel);
        }
        mOneAdapter.addList(oneList,twoList,threeList);
        mOneAdapter.notifyDataSetChanged();
    }

3.3 改造后的Adapter

package com.materialdesignstudy.complexrecycler.itemthree;import android.content.Context;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.ViewGroup;import com.materialdesignstudy.R;import com.materialdesignstudy.complexrecycler.itemone.DataModel;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;/**
 * Created by HLQ on 2017/10/22
 */public class TwoAdapter extends RecyclerView.Adapter {    public static final int TYPE_ONE = 1;    public static final int TYPE_TWO = 2;    public static final int TYPE_THREE = 3;    private LayoutInflater mLayoutInflater;    private List mTypes = new ArrayList<>(); // 存放type
    private Map mPositions = new HashMap<>(); // 存放type下包含数据itemCount
    private List mOneList = new ArrayList<>();    private List mTwoList = new ArrayList<>();    private List mThreeList = new ArrayList<>();    public TwoAdapter(Context context) {        this.mLayoutInflater = LayoutInflater.from(context);
    }    public void addList(List oneList, List twoList, List threeList) {
        addListByType(TYPE_ONE, oneList);
        addListByType(TYPE_TWO, twoList);
        addListByType(TYPE_THREE, threeList);        this.mOneList = oneList;        this.mTwoList = twoList;        this.mThreeList = threeList;
    }    private void addListByType(int type, List list) {
        mPositions.put(type, mTypes.size());        for (int i = 0; i < list.size(); i++) {
            mTypes.add(type);
        }
    }    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        switch (viewType) {            case DataModel.TYPE_ONE:                return new TypeOneViewHolder(mLayoutInflater.inflate(R.layout.item_type_one, parent, false));            case DataModel.TYPE_TWO:                return new TypeTwoViewHolder(mLayoutInflater.inflate(R.layout.item_type_two, parent, false));            case DataModel.TYPE_THREE:                return new TypeThreeViewHolder(mLayoutInflater.inflate(R.layout.item_type_three, parent, false));
        }        return null;
    }    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {        int viewType = getItemViewType(position);        int realPosition = position - mPositions.get(viewType);        switch (viewType) {            case DataModel.TYPE_ONE:
                ((TypeAbstractViewHolder) holder).bindHolder(mOneList.get(realPosition));                break;            case DataModel.TYPE_TWO:
                ((TypeAbstractViewHolder) holder).bindHolder(mTwoList.get(realPosition));                break;            case DataModel.TYPE_THREE:
                ((TypeAbstractViewHolder) holder).bindHolder(mThreeList.get(realPosition));                break;
        }
    }    @Override
    public int getItemCount() {        return mTypes.size();
    }    @Override
    public int getItemViewType(int position) {        return mTypes.get(position);
    }
}

到此，RecyclerView实现复杂布局结束了，还是希望大家有时间多看多敲，多去理解。

GitHub地址

> https://github.com/HLQ-Struggle/MaterialDesignStudy

学习地址

> 泥阿布慕课网视频地址：http://www.imooc.com/learn/731；
> 
> 废大半天劲儿找到的GitHub地址：https://github.com/nimengbo
> 
> 图片地址：http://www.jianshu.com/p/29465cce1131

结束

我们沿着前人的路慢慢前行，只要坚持，就会有收获，可能目前的现状有些不尽人意，但是只要坚持下去，希望的曙光始终会照亮前行的路~

致自己，致坚持看完本文的你~加油~

原文链接：http://www.apkbus.com/blog-904057-75990.html