RecyclerView优雅实现复杂列表布局

这次学习的内容是使用recyclerview来实现一些较为复杂的布局，比如一个item：

最左边是一个imageview，中间部分为textview，textview下面又是一个textview，最右边为一个imageview。

1、首先在activity_main.xml中添加recyclerview，随后正如之前所说的分别针对左中右新建3个xml布局文件命名为item_type_one、two、three.随后对其进行布局配置。

2、新建一个adapter添加模拟数据。然后针对布局新建三个viewholder。随后新建一个抽象类typeabstractviewholder，将三个viewholder用到的同一个方法封装起来调用,将三个viewholder继承自抽象类。为了优雅。

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingbottom="@dimen/activity_vertical_margin"
  android:paddingleft="@dimen/activity_horizontal_margin"
  android:paddingright="@dimen/activity_horizontal_margin"
  android:paddingtop="@dimen/activity_vertical_margin"
  tools:context="com.example.tony.recyclerviewdemo.mainactivity">

  <android.support.v7.widget.recyclerview
    android:id="@+id/recycleview"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

</relativelayout>

item_type_one.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="60dp"
  xmlns:tools="http://schemas.android.com/tools"
  android:background="@android:color/white"
  android:gravity="center_vertical"
  android:orientation="horizontal">

  <imageview
    android:id="@+id/avatar"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_marginleft="20dp" />

  <textview
    tools:text = "月满轩尼诗"
    android:id="@+id/name"
    android:layout_marginleft="20dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</linearlayout>

item_type_two.xml:

<?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="60dp"
  android:background="@android:color/white"
  android:gravity="center_vertical"
  android:orientation="horizontal">

  <imageview
    android:id="@+id/avatar"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_marginleft="20dp" />

  <linearlayout
    android:layout_marginleft="20dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <textview
      android:id="@+id/name"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      tools:text="月满轩尼诗" />

    <textview
      android:id="@+id/content"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margintop="5dp"
      tools:text="月满轩尼诗是一部好电影吗？" />

  </linearlayout>


</linearlayout>

item_type_three.xml:

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="60dp"
  android:background="@android:color/white"
  android:gravity="center_vertical"
  android:orientation="horizontal">

  <imageview
    android:id="@+id/avatar"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_centervertical="true"
    android:layout_marginleft="20dp" />

  <imageview
    android:id="@+id/contentimage"
    android:layout_width="100dp"
    android:layout_height="60dp"
    android:layout_alignparentright="true"
    android:layout_centervertical="true"
    android:layout_marginleft="20dp"
    android:layout_marginright="20dp" />

  <linearlayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginleft="20dp"
    android:orientation="vertical"
    android:layout_centervertical="true"
    android:layout_torightof="@+id/avatar"
    android:layout_toendof="@+id/avatar"
    android:layout_marginstart="20dp">

    <textview
      android:id="@+id/name"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      tools:text="月满轩尼诗" />

    <textview
      android:id="@+id/content"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margintop="5dp"
      tools:text="月满轩尼诗是一部好电影吗？" />

  </linearlayout>


</relativelayout>

这边提一个小技巧，一般textview如果不设置文本内容的话是无法预览的，这里我们在属性中添加一个：tools:text=”abc”;
这个时候abc就会在ui上面显示出来了，而且abc也不用加入string.xml.

java文件：

mainactivity.class

package com.example.tony.recyclerviewdemo;

import android.support.v7.app.appcompatactivity;
import android.os.bundle;
import android.support.v7.widget.linearlayoutmanager;
import android.support.v7.widget.recyclerview;

import java.util.arraylist;
import java.util.list;

public class mainactivity extends appcompatactivity {

  private recyclerview mrecyclerview;

  private demoadapter madapter;

  int colors[] = {android.r.color.holo_blue_light,
          android.r.color.holo_orange_light,
          android.r.color.holo_red_light};

  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);

    mrecyclerview = (recyclerview) findviewbyid(r.id.recycleview);
    mrecyclerview.setlayoutmanager(new linearlayoutmanager(this,
        linearlayoutmanager.vertical, false));
    madapter = new demoadapter(this);
    mrecyclerview.setadapter(madapter);

    initdata();
  }

  private void initdata() {
    list<datamodel> list = new arraylist<>();

    for (int i = 0; i < 20; i++) {
      int type = (int) (math.random() * 3 + 1);
      datamodel data = new datamodel();
      data.avatarcolor = colors[type - 1];
      data.type = type;
      data.name = "name: " + i;
      data.content = "content: " + i;
      data.contentcolor = colors[(type + 1) % 3];
      list.add(data);
    }
    madapter.addlist(list);
    madapter.notifydatasetchanged();
  }
}

demoadapter.class

package com.example.tony.recyclerviewdemo;

import android.content.context;
import android.support.v7.widget.recyclerview;
import android.view.layoutinflater;
import android.view.viewgroup;

import java.util.arraylist;
import java.util.list;

/*
 * created by tony on 2016/12/3.
 */

public class demoadapter extends recyclerview.adapter<recyclerview.viewholder>{


  private layoutinflater mlayoutinflater;

  private list<datamodel> mlist = new arraylist<>();

  public demoadapter(context context) {
    mlayoutinflater = layoutinflater.from(context);
  }

  public void addlist(list<datamodel> list) {
    mlist.addall(list);
  }

  @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) {
    ((typeabstractviewholder) holder).bindholder(mlist.get(position));
  }

  @override
  public int getitemviewtype(int position) {
    return mlist.get(position).type;
  }

  @override
  public int getitemcount() {
    return mlist.size();
  }
}

datamodel.class

package com.example.tony.recyclerviewdemo;

/**
 * created by tony on 2016/12/3.
 */

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;
}

typeabstractviewholder.class

package com.example.tony.recyclerviewdemo;

import android.support.v7.widget.recyclerview;
import android.view.view;

/**
 * created by tony on 2016/12/3.
 */

public abstract class typeabstractviewholder extends recyclerview.viewholder{

  public typeabstractviewholder(view itemview) {
    super(itemview);
  }
  public abstract void bindholder(datamodel model);
}

typeoneviewholder.class

package com.example.tony.recyclerviewdemo;

import android.view.view;
import android.widget.imageview;
import android.widget.textview;

/**
 * created by tony on 2016/12/3.
 */

public class typeoneviewholder extends typeabstractviewholder {

  private imageview avatar;

  private textview name;

  public typeoneviewholder(view itemview) {
    super(itemview);

    avatar = (imageview) itemview.findviewbyid(r.id.avatar);
    name = (textview) itemview.findviewbyid(r.id.name);
  }
  //viewholder数据和外面数据绑定起来
  @override
  public void bindholder(datamodel model) {
    avatar.setbackgroundresource(model.avatarcolor);
    name.settext(model.name);
  }
}

typetwoviewholder.class

package com.example.tony.recyclerviewdemo;

import android.support.v7.widget.recyclerview;
import android.view.view;
import android.widget.imageview;
import android.widget.textview;

/**
 * created by tony on 2016/12/3.
 */

public class typetwoviewholder extends typeabstractviewholder {

  private imageview avatar;

  private textview name;

  private textview content;

  public typetwoviewholder(view itemview) {
    super(itemview);

    avatar = (imageview) itemview.findviewbyid(r.id.avatar);
    name = (textview) itemview.findviewbyid(r.id.name);
    content = (textview) itemview.findviewbyid(r.id.content);
  }
  //viewholder数据和外面数据绑定起来
  @override
  public void bindholder(datamodel model) {
    avatar.setbackgroundresource(model.avatarcolor);
    name.settext(model.name);
    content.settext(model.content);
  }
}

typethreeviewholder.class

package com.example.tony.recyclerviewdemo;

import android.view.view;
import android.widget.imageview;
import android.widget.textview;

/**
 * created by tony on 2016/12/3.
 */

public class typethreeviewholder extends typeabstractviewholder {

  private imageview avatar;

  private textview name;

  private textview content;

  private imageview contentimage;

  public typethreeviewholder(view itemview) {
    super(itemview);

    avatar = (imageview) itemview.findviewbyid(r.id.avatar);
    contentimage = (imageview) itemview.findviewbyid(r.id.contentimage);
    name = (textview) itemview.findviewbyid(r.id.name);
    content = (textview) itemview.findviewbyid(r.id.content);
  }
  //viewholder数据和外面数据绑定起来
  @override
  public void bindholder(datamodel model) {
    avatar.setbackgroundresource(model.avatarcolor);
    name.settext(model.name);
    contentimage.setbackgroundresource(model.contentcolor);
    content.settext(model.content);
  }
}

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