Android控件RecyclerView实现混排效果仿网易云音乐

概述前言最近在使用网易云音乐的时候，看到如下图的排版效果图，自己也想实现一个

前言

最近在使用网易云音乐的时候，看到如下图的排版效果图，自己也想实现一个

这里采用网上用法最多的方式，而且是比较简单的方式实现的，想要做项目的同学也可以快速入手搞定首页界面，可以在最快的时间内模仿出来，且效果达到90%以上的相似

效果演示

至于图片的加载你们可以根据网上的API获取相应的图片加载到对应的位置，这里只是采用本地图片来演示

实现分析

这里是采用RecyclerVIEw的GrIDLayoutManager的一个SpanSize这么一个东西，从下图很容易知道其意思

项目结构

项目结构可能对初学者感觉很庞大，不用担心，这里我会按照下面的包名划分，从最简单的开始分析

引入依赖

首先是在Gradle中引入对RecyclerVIEw的依赖

compile 'com.androID.support:recyclervIEw-v7:25.3.1'

VIEw包

由于项目用到的图片是有规格限定的，所以需要对ImageVIEw覆写，得到我们想要尺寸的图片

SquareImageVIEw：正方形图片
RectimageVIEw：长方形图片

public class SquareImageVIEw extends androID.support.v7.Widget.AppCompatimageVIEw {  public SquareImageVIEw(Context context) {    this(context,null);  }  public SquareImageVIEw(Context context,@Nullable AttributeSet attrs) {    this(context,attrs,0);  }  public SquareImageVIEw(Context context,@Nullable AttributeSet attrs,int defStyleAttr) {    super(context,defStyleAttr);    setScaleType(ScaleType.FIT_XY);  }  @OverrIDe  protected voID onMeasure(int wIDthMeasureSpec,int heightmeasureSpec) {    super.onMeasure(wIDthMeasureSpec,wIDthMeasureSpec);  }}

public class RectimageVIEw extends androID.support.v7.Widget.AppCompatimageVIEw {  public RectimageVIEw(Context context) {    this(context,null);  }  public RectimageVIEw(Context context,0);  }  public RectimageVIEw(Context context,int heightmeasureSpec) {    int wIDthMode = MeasureSpec.getMode(wIDthMeasureSpec);    int wIDth = MeasureSpec.getSize(wIDthMeasureSpec);    // 设置大小为宽度的三分之二    int halfWIDthMeasureSpec = MeasureSpec.makeMeasureSpec(wIDth / 3 * 2,wIDthMode);    super.onMeasure(wIDthMeasureSpec,halfWIDthMeasureSpec);  }}

Music包

这里是我们存储实体的地方，其中四种类型的划分，分别对应项目展示中的前三个模块的划分，其中还有一个标题也算是一种类型，所以共四种

public class Music {  public int type;  public String Title;  // 后期可加入GlIDe加载网络图片Url  public int imageID;  public interface TYPE {    int TYPE_GRID_THREE = 0x01;    int TYPE_GRID_TWO = 0x02;    int TYPE_List = 0x03;    int TYPE_Title = 0x04;  }}

Listener包

由于RecyclerVIEw自身是没有点击事件的，所以这个包是RecyclerVIEw的点击事件接口

public interface OnItemClickListener {  voID OnItemClick(int position);}

decoration包

由于RecyclerVIEw是不提供分割线的，所以这个包是自定义的分割线

public class SpacesItemdecoration extends RecyclerVIEw.Itemdecoration {  private int space;  public SpacesItemdecoration(int space) {    this.space = space;  }  @OverrIDe  public voID getItemOffsets(Rect outRect,VIEw vIEw,RecyclerVIEw parent,RecyclerVIEw.State state) {    outRect.left = space;    outRect.right = space;    outRect.bottom = space;    outRect.top = space;  }}

VIEwHolder

这里存储的是我们混排效果的控件，标题可能会有点区别，其他是一样的效果，为了后期方便拓展，我们就把他们分开，不代码复用

public class GrIDThreeVIEwHolder extends RecyclerVIEw.VIEwHolder {  public SquareImageVIEw iv_icon;  public TextVIEw tv_content;  public GrIDThreeVIEwHolder(VIEw itemVIEw) {    super(itemVIEw);    iv_icon = (SquareImageVIEw) itemVIEw.findVIEwByID(R.ID.iv_icon);    tv_content = (TextVIEw) itemVIEw.findVIEwByID(R.ID.tv_content);  }}

public class GrIDTwoVIEwHolder extends RecyclerVIEw.VIEwHolder {  public RectimageVIEw iv_icon;  public TextVIEw tv_content;  public GrIDTwoVIEwHolder(VIEw itemVIEw) {    super(itemVIEw);    iv_icon = (RectimageVIEw) itemVIEw.findVIEwByID(R.ID.iv_icon);    tv_content = (TextVIEw) itemVIEw.findVIEwByID(R.ID.tv_content);  }}

public class ListVIEwHolder extends RecyclerVIEw.VIEwHolder {  public RectimageVIEw iv_icon;  public TextVIEw tv_content;  public ListVIEwHolder(VIEw itemVIEw) {    super(itemVIEw);    iv_icon = (RectimageVIEw) itemVIEw.findVIEwByID(R.ID.iv_icon);    tv_content = (TextVIEw) itemVIEw.findVIEwByID(R.ID.tv_content);  }}

public class TitleVIEwHolder extends RecyclerVIEw.VIEwHolder {  public TextVIEw tv_content;  public TitleVIEwHolder(VIEw itemVIEw) {    super(itemVIEw);    tv_content = (TextVIEw) itemVIEw.findVIEwByID(R.ID.tv_content);  }}

Adapter包

这里就是对所有VIEwHolder的控制器，然而这里并不是混排效果实现的最终地方，只不过是填充数据的地方

public class RecyclerAdapter extends RecyclerVIEw.Adapter<RecyclerVIEw.VIEwHolder> implements VIEw.OnClickListener {  private List<Music> mList;  private Context mContext;  private LayoutInflater mInflater;  /**   * 点击事件   */  private OnItemClickListener mOnItemClickListener;  public voID setonItemClickListener(OnItemClickListener onItemClickListener) {    this.mOnItemClickListener = onItemClickListener;  }  public RecyclerAdapter(Context context,List<Music> List) {    this.mList = List;    this.mContext = context;    this.mInflater = LayoutInflater.from(context);  }  @OverrIDe  public RecyclerVIEw.VIEwHolder onCreateVIEwHolder(VIEwGroup parent,int vIEwType) {    VIEw vIEw;    RecyclerVIEw.VIEwHolder mVIEwHolder = null;    if (vIEwType == Music.TYPE.TYPE_GRID_THREE) {      vIEw = mInflater.inflate(R.layout.item_grID_three,parent,false);      mVIEwHolder = new GrIDThreeVIEwHolder(vIEw);    } else if (vIEwType == Music.TYPE.TYPE_GRID_TWO) {      vIEw = mInflater.inflate(R.layout.item_grID_two,false);      mVIEwHolder = new GrIDTwoVIEwHolder(vIEw);    } else if (vIEwType == Music.TYPE.TYPE_List) {      vIEw = mInflater.inflate(R.layout.item_List,false);      mVIEwHolder = new ListVIEwHolder(vIEw);    } else if (vIEwType == Music.TYPE.TYPE_Title) {      vIEw = mInflater.inflate(R.layout.item_Title,false);      mVIEwHolder = new TitleVIEwHolder(vIEw);    }    return mVIEwHolder;  }  @OverrIDe  public voID onBindVIEwHolder(RecyclerVIEw.VIEwHolder holder,int position) {    switch (getItemVIEwType(position)) {      case Music.TYPE.TYPE_GRID_THREE:        GrIDThreeVIEwHolder gHolder_three = (GrIDThreeVIEwHolder) holder;        gHolder_three.tv_content.setText(mList.get(position).Title);        gHolder_three.iv_icon.setimageResource(mList.get(position).imageID);        //点击事件        gHolder_three.itemVIEw.setonClickListener(this);        gHolder_three.itemVIEw.setTag(position);        break;      case Music.TYPE.TYPE_GRID_TWO:        GrIDTwoVIEwHolder gHolder_two = (GrIDTwoVIEwHolder) holder;        gHolder_two.tv_content.setText(mList.get(position).Title);        gHolder_two.iv_icon.setimageResource(mList.get(position).imageID);        //点击事件        gHolder_two.itemVIEw.setonClickListener(this);        gHolder_two.itemVIEw.setTag(position);        break;      case Music.TYPE.TYPE_List:        ListVIEwHolder lHolder = (ListVIEwHolder) holder;        lHolder.tv_content.setText(mList.get(position).Title);        lHolder.iv_icon.setimageResource(mList.get(position).imageID);        //点击事件        lHolder.itemVIEw.setonClickListener(this);        lHolder.itemVIEw.setTag(position);        break;      case Music.TYPE.TYPE_Title:        TitleVIEwHolder tHolder = (TitleVIEwHolder) holder;        tHolder.tv_content.setText(mList.get(position).Title);        //点击事件        tHolder.itemVIEw.setonClickListener(this);        tHolder.itemVIEw.setTag(position);        break;    }  }  @OverrIDe  public int getItemVIEwType(int position) {    return mList.get(position).type;  }  @OverrIDe  public int getItemCount() {    return mList.size();  }  @OverrIDe  public voID onClick(VIEw v) {    if (mOnItemClickListener != null) {      int position = (int) v.getTag();      mOnItemClickListener.OnItemClick(position);    }  }}

Activity

这里就是我们实现混排效果的关键，我们会根据不同类型的数据，对RecyclerVIEw的SpanSize的进行设置

public class MainActivity extends AppCompatActivity implements OnItemClickListener {  private RecyclerVIEw ry;  private GrIDLayoutManager layoutManager;  private RecyclerAdapter mAdapter;  private static List<Music> mList;  /**   * 模拟本地数据   */  static {    mList = new ArrayList<>();    for (int i = 0; i < 1; i++) {      Music music = new Music();      music.type = Music.TYPE.TYPE_Title;      music.imageID = R.drawable.ic_cover;      music.Title = "推荐歌单";      mList.add(music);    }    for (int i = 0; i < 6; i++) {      Music music = new Music();      music.type = Music.TYPE.TYPE_GRID_THREE;      music.imageID = R.drawable.ic_cover;      music.Title = "先不要降温！我没钱买衣服";      mList.add(music);    }    for (int i = 0; i < 1; i++) {      Music music = new Music();      music.type = Music.TYPE.TYPE_Title;      music.imageID = R.drawable.ic_cover;      music.Title = "推荐MV";      mList.add(music);    }    for (int i = 0; i < 4; i++) {      Music music = new Music();      music.type = Music.TYPE.TYPE_GRID_TWO;      music.imageID = R.drawable.ic_cover;      music.Title = "Perfect Day";      mList.add(music);    }    for (int i = 0; i < 1; i++) {      Music music = new Music();      music.type = Music.TYPE.TYPE_Title;      music.imageID = R.drawable.ic_cover;      music.Title = "精选专栏";      mList.add(music);    }    for (int i = 0; i < 3; i++) {      Music music = new Music();      music.type = Music.TYPE.TYPE_List;      music.imageID = R.drawable.ic_cover;      music.Title = "去看《银翼杀手2049》前，你应该知道的三件事";      mList.add(music);    }    for (int i = 0; i < 1; i++) {      Music music = new Music();      music.type = Music.TYPE.TYPE_Title;      music.imageID = R.drawable.ic_cover;      music.Title = "最新音乐";      mList.add(music);    }    for (int i = 0; i < 6; i++) {      Music music = new Music();      music.type = Music.TYPE.TYPE_GRID_THREE;      music.imageID = R.drawable.ic_cover;      music.Title = "[BGM]一定听过的神级背景配乐";      mList.add(music);    }  }  @OverrIDe  protected voID onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentVIEw(R.layout.activity_main);    ry = (RecyclerVIEw) findVIEwByID(R.ID.ry);    layoutManager = new GrIDLayoutManager(this,6);    layoutManager.setSpanSizeLookup(new GrIDLayoutManager.SpanSizeLookup() {      @OverrIDe      public int getSpanSize(int position) {        int type = mList.get(position).type;        if (type == Music.TYPE.TYPE_GRID_THREE) {          return 2;        } else if (type == Music.TYPE.TYPE_GRID_TWO) {          return 3;        } else if (type == Music.TYPE.TYPE_List) {          return 6;        } else if (type == Music.TYPE.TYPE_Title) {          return 6;        }        return 0;      }    });    ry.setLayoutManager(layoutManager);    ry.addItemdecoration(new SpacesItemdecoration(2));    // 填充数据    mAdapter = new RecyclerAdapter(this,mList);    mAdapter.setonItemClickListener(this);    ry.setAdapter(mAdapter);  }  @OverrIDe  public voID OnItemClick(int position) {    String Title = mList.get(position).Title;    Toast.makeText(this,Title,Toast.LENGTH_SHORT).show();  }}

layout布局文件

这里的布局很简单，比如用到我们的正方形图片，长方形图片等，这里就不做代码贴出，详细可以查看源码

源码下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android控件RecyclerView实现混排效果仿网易云音乐全部内容，希望文章能够帮你解决Android控件RecyclerView实现混排效果仿网易云音乐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。