RecycleView 实现多Item布局

    最近公司的项目暂时处于维护中，新项目还没有正式启动，就在网上看看有什么东东以前没有实现过，写个Demo来玩玩。前同事发来一个UI图，说正在实现RecycleView多item布局，也实现一个，以后会用到的......

    废话不多说了，直接先来个图，

下面是demo的实现

上面一共有三个item，后台数据我就不知道怎么样了，但是此文，我使用的是同实体类的多item布局。上面有3个item，分别是圈子item、活动item、文章item。

下面来3个不同的item的xml文件

1、item_multi_one.xml

xml version="1.0" encoding="utf-8"?>
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="16dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="16dp"
    >
            android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:text="TextView"
        android:textColor="@color/colorPrimary"
        android:textSize="14sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

2、item_multi_second.xml

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="16dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="16dp"
    >
            android:id="@+id/photo"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginBottom="16dp"
        android:contentDescription="@null"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

3、item_multi_third.xml

xml version="1.0" encoding="utf-8"?>
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="16dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="16dp"
    >

            android:id="@+id/photo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="16dp"
        android:contentDescription="@null"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

            android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="TextView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/photo"/>

下面再来一个activity的xml

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

            android:id="@+id/recycle_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

布局文件到此为止，下面是代码的实现方式，本人懒，很懒，很懒，能减就减，能删就删

mAdapter = new MultiTypeAdapter( this, mData, R.layout.item_multi_one,
        R.layout.item_multi_second, R.layout.item_multi_third ) {
    @Override
    public void convert ( int position, ViewHolder helper, Common item ) {
        helper.setText( R.id.title, item.getName() );
    }

    @Override
    public void convertByImage ( int position, ViewHolder helper, Common item ) {
        helper.setImageResource( R.id.photo, R.mipmap.ic_launcher );
    }

    @Override
    public void convertByAll ( int position, ViewHolder helper, Common item ) {
        helper.setText( R.id.title, item.getName() );
        helper.setImageResource( R.id.photo, R.mipmap.ic_launcher );
    }
};

上面是activity中的实现方式

下面再来一个适配器的部分代码

private List< Common > mData = new ArrayList<>();

private Context mContext;

private LayoutInflater mInflater;

private int[] layoutIds;

private OnItemClickListener mOnItemClickListener;

构造器：

public MultiTypeAdapter ( Context mContext, List< Common > mData, int... itemLayoutIds ) {
    this.mData = mData;
    this.mContext = mContext;
    this.layoutIds = itemLayoutIds;
    this.mInflater = LayoutInflater.from( mContext );
}

最主要的getItemViewType()

@Override
public int getItemViewType ( int position ) {
    Common common = mData.get( position );
    //通过字段status值，来使用不同的布局
    if ( common.getStatus() == 1 ) {
        return layoutIds[0];
    }
    if ( common.getStatus() == 2 ) {
        return layoutIds[1];
    }
    if ( common.getStatus() == 3 ) {
        return layoutIds[2];
    }
    return super.getItemViewType( position );
}

onCreateViewHolder():

@NonNull
@Override
public ViewHolder onCreateViewHolder ( @NonNull ViewGroup parent, int viewType ) {
    View view;
    if ( viewType == layoutIds[0] ) {
        view = mInflater.inflate( layoutIds[0], parent, false );
    } else if ( viewType == layoutIds[1] ) {
        view = mInflater.inflate( layoutIds[1], parent, false );
    } else {
        view = mInflater.inflate( layoutIds[2], parent, false );
    }
    return new ViewHolder( view );
}

onBindViewHolder():

@Override
public void onBindViewHolder ( @NonNull final ViewHolder holder, int position ) {
    final Common t = mData.get( position );
    if ( holder.getItemViewType() == layoutIds[0] ) {
        convert( position, holder, t );
    } else if ( holder.getItemViewType() == layoutIds[1] ) {
        convertByImage( position, holder, t );
    } else if ( holder.getItemViewType() == layoutIds[2] ) {
        convertByAll( position, holder, t );
    }
    // 设置回调，看需求，设置点击和长按点击事件,左滑事件暂时未设置
    if ( mOnItemClickListener != null ) {
        holder.itemView.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick ( View v ) {
                        int pos = holder.getLayoutPosition();
                        mOnItemClickListener.onItemClickListener( holder.itemView, pos, t );
                    }
                } );
    }
}

getItemCount():

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

来个ViewHolder 继承 RecycleView.ViewHolder

public View itemView;

private SparseArray< View > mViews;

public ViewHolder ( View itemView ) {
    //   这里传入的就是我们item的布局，注意这个类的实例化地方
    super( itemView );
    this.itemView = itemView;
    this.mViews = new SparseArray<>();
}

/**
 * 为TextView设置字符串
 *
 * @param viewId
 * @param text
 * @return
 */
public ViewHolder setText ( int viewId, String text ) {
    TextView view = getView( viewId );
    view.setText( text );
    return this;
}

/**
 * 为ImageView设置图片
 *
 * @param viewId
 * @param drawableId
 * @return
 */
public ViewHolder setImageResource ( int viewId, int drawableId ) {
    ImageView view = getView( viewId );
    view.setImageResource( drawableId );
    return this;
}

好像到这里就结束了......加上一些静态数据，怕自己以后回来看忘了，还要花时间来看代码。

Common common = new Common();
common.setStatus( 1 );
common.setName( "泰迪" );
mData.add( common );
common = new Common();
common.setStatus( 1 );
common.setName( "金毛" );
mData.add( common );
common = new Common();
common.setStatus( 1 );
common.setName( "哈士奇" );
mData.add( common );

common = new Common();
common.setStatus( 2 );
common.setName( "英短" );
mData.add( common );
common = new Common();
common.setStatus( 2 );
common.setName( "加菲" );
mData.add( common );
common = new Common();
common.setStatus( 2 );
common.setName( "布偶" );
mData.add( common );

common = new Common();
common.setStatus( 3 );
common.setName( "老虎" );
mData.add( common );
common = new Common();
common.setStatus( 3 );
common.setName( "狮子" );
mData.add( common );

common = new Common();
common.setStatus( 3 );
common.setName( "豹子" );
mData.add( common );

～完～