RecylerView中的多重布局

Question

I am trying to use a RecyclerView grid item so that at position one it displays 2 items side by side, at position 2 it should display 1 item.
Here is my adapter class code; it displays grid items on 2 columns, but I need like in the image below.

MainFragment.class

public class MoviesFragment extends Fragment {

private MoviesAdapter mAdapter;
private RecyclerView mRecyclerView;

RecyclerView.LayoutManager mLayoutManager;

public MoviesFragment() {
    // Required empty public constructor
}


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View rootview= inflater.inflate(R.layout.fragment_movies, container, false);

    mRecyclerView = (RecyclerView)rootview.findViewById(R.id.list);
    mRecyclerView.setHasFixedSize(true);

    // The number of Columns
    mLayoutManager = new GridLayoutManager(getActivity(), 2);
    mRecyclerView.setLayoutManager(mLayoutManager);


    mAdapter = new MoviesAdapter(Arrays.asList(
            new CardViewData("hdh", "Direction pp", R.drawable.arya_movie),
            new CardViewData("jdjd", "Description of Item 1", R.drawable.julaie),
            new CardViewData("hdhd", "Description of Item 2", R.drawable.badrinadg),
            new CardViewData("hdhd", "Description of Item 3", R.drawable.happy),
            new CardViewData("hdhd", "Description of Item 4", R.drawable.julai),
            new CardViewData("hdhd", "Direddctor : sahs", R.drawable.vedam_movie)));

    mRecyclerView.setAdapter(mAdapter);
    return rootview;

}

}

Here is my adapter class:
MovieAdapter.class

public class MoviesAdapter extends RecyclerView.Adapter<MoviesAdapter.ViewHolder> {



private List<CardViewData> mDataset;

public MoviesAdapter(List<CardViewData> dataset) {
    mDataset = dataset;
}

@Override
public ViewHolder onCreateViewHolder(final ViewGroup viewGroup, int i) {
    View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.moview_card_layout, viewGroup, false);
    return new ViewHolder(v);
}

@Override
public void onBindViewHolder(final ViewHolder viewHolder, int i) {
    final CardViewData cardViewData = mDataset.get(i);

    viewHolder.mTitle.setText(cardViewData.getTitle());
    viewHolder.mDescription.setText(cardViewData.getDescription());
    viewHolder.mImage.setImageResource(cardViewData.getImage());

    viewHolder.itemView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(v.getContext(), "Title: " + cardViewData.getTitle(), Toast.LENGTH_SHORT).show();
        }
    });
}

@Override
public int getItemCount() {
    return mDataset == null ? 0 : mDataset.size();

}

public static class ViewHolder extends RecyclerView.ViewHolder {

    public TextView mTitle;
    public TextView mDescription;
    public ImageView mImage;

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

        mTitle = (TextView) itemView.findViewById(R.id.row_title);
        mDescription = (TextView) itemView.findViewById(R.id.row_description);
        mImage = (ImageView) itemView.findViewById(R.id.row_image);
    }
}

}

Answer 1

@Override
public int getViewType(int position) {
    if (position == 0) {
        return TYPE_1;
    }else if(position == 1){
        return TYPE_2; 
    }
}

@Override
public RecyclerView.ViewHolder getView(ViewGroup parent, int viewType) {
    if (viewType == TYPE_1) {
        View view = inflater.inflate(R.layout.type_one_layout, parent, false);
        return new Type1Holder(view);
    } else {
        View view = inflater.inflate(R.layout.type_two_layout, parent, false);
        return new Type2Holder(view);
    }
 }

@Override
public void onBindView(RecyclerView.ViewHolder viewHolder, int i) {
    if (viewHolder instanceof Type1Holder) {
        /// Insert the data into the UI of Type1
    }else if(viewHolder instanceof Type1Holder){
        /// Insert the data into the UI of Type2
    }

Answer 2

 static final int TYPE_HEADER = 0;
 static final int TYPE_CELL = 1;

 @Override
public int getViewType(int position) {
if (position == 0) {
    return TYPE_HEADER;
}else if(position == 1){
    return TYPE_CELL; 
}

 @Override
public RecyclerView.ViewHolder getView(ViewGroup parent, int viewType) {
if (viewType == TYPE_HEADER) {
    View view = inflater.inflate(R.layout.header_layout, parent, false);
    return new Type1Holder(view);
} else {
    View view = inflater.inflate(R.layout.cell_layout, parent, false);
    return new Type2Holder(view);
}
@Override
public void onBindView(RecyclerView.ViewHolder viewHolder, int i) {
if (viewHolder instanceof Type1Holder) {
    /// Insert the data into the UI of Type1
}else if(viewHolder instanceof Type1Holder){
    /// Insert the data into the UI of Type2
}

Answer 3

You need to override this method and return the view type depends on the item position, in your case, it should be like this:

@Override
public int getItemViewType(int position) {
    switch (position) {
        case 0:
            return layout_1_with_int_value;
        case 1:
            return layout_2_with_int_value;
        default:
            return default_layout_with_int_value;
    }
}

And you need create different ViewHolder subclass for each type of layout, then in method @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {} you ininflater different layout depends on the viewType. But there is one more step before finish it all, in method public void onBindViewHolder(final RecyclerView.ViewHolder viewHolder, int position) {} you call int viewType = getItemViewType(position); to get the view type for the current position and create the right ViewHolder.

Done!

Hope it will help :)