No trivial interface (a): RecyclerView+CardView to know

No trivial interface (two): RecyclerView to show more different views

Interface no trivial (three): RecyclerView + Toolbar to make a file selector

Interface no small matter (4): write a scroll selector!

Interface no small matter (five): custom TextView

Interface no small matter (six): to make a good-looking side pull menu!

directory

  • preface
  • The use of GridLayoutManager
  • Glide loading picture
  • Make RecyclerView support more different layouts
  • Let’s look at horizontal scrolling
  • And waterfall flow
  • The last

preface

I used the simplest LinearLayoutManager to set the layout, and it is a single layout. This time, I will feel the GridLayoutManager and waterfall flow as well as multiple layouts.

The use of GridLayoutManager

GridLayoutManager can be used for many more scenarios than LinearLayoutManager. Take a look at this code:

RecyclerView rvTest = (RecyclerView) findViewById(R.id.rv_test);
//rvTest.setLayoutManager(new LinearLayoutManager(this));

final GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2);
rvTest.setLayoutManager(gridLayoutManager);

final MyRVAdapter myRVAdapter = new MyRVAdapter(this);

if(gridLayoutManager ! = null) { gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {
            if (position == 0
                    || position == 4
                    || position == (myRVAdapter.getItemCount() - 1)) {
                return gridLayoutManager.getSpanCount();
            } else {
                return1; }}}); } rvTest.setAdapter(myRVAdapter);Copy the code

Replace the original LinearLayoutManager with GridLayoutManager, and set 0 and 4, along with the last entry, to fill the parent container. Take a look at the renderings:

Glide loading picture

This is an image loading library recommended by Google. My personal assessment is that it is extremely powerful and can handle all kinds of fancy loading. And here we’re just going to use it briefly without going into detail. Add:

compile 'com. Making. Bumptech. Glide: glide: 3.7.0'
Copy the code

Glide. With (context).load(r.rawable.pic).centercrop ().into(imageView); The first parameter is the context, the second parameter is the image resource, and the third parameter is the ImageView control.

Make RecyclerView support more different layouts

Write a quick layout with diagrams:

<? xml version="1.0" encoding="utf-8"? > <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cv_test"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:foreground="@drawable/card_foreground"
    card_view:cardCornerRadius="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/iv_test"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/tv_test"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="20dp" />
    </LinearLayout>

</android.support.v7.widget.CardView>
Copy the code

GetItemViewType Sets the type of the view. So let’s make the 0, 4, and last one graphic. Same as setting position to fill the parent container in the GridLayoutManager earlier.

public enum ITEM_TYPE {
    ITEM_TYPE_IMAGE,
    ITEM_TYPE_TEXT
}

private int[] mImageId = {R.drawable.test, R.drawable.test2, R.drawable.test3};
Copy the code
@Override
public int getItemViewType(int position) {
    if (position == 0 || position == 4 || position == (getItemCount() - 1)) {
        return ITEM_TYPE.ITEM_TYPE_IMAGE.ordinal();
    } else {
        returnITEM_TYPE.ITEM_TYPE_TEXT.ordinal(); }}Copy the code

Add a new viewHolder:

public static class MyTVHolder extends RecyclerView.ViewHolder { TextView mTextView; public MyTVHolder(View itemView) { super(itemView); mTextView = (TextView) itemView.findViewById(R.id.tv_test); } } public static class MyIVHolder extends RecyclerView.ViewHolder { TextView mTextView; ImageView mImageView; MyIVHolder(View view) { super(view); mTextView = (TextView) view.findViewById(R.id.tv_test); mImageView = (ImageView) view.findViewById(R.id.iv_test); }}Copy the code

OnCreateViewHolder and onBindViewHolder are used to change the recyclerView. Adapter. public class MyRVAdapter extends RecyclerView.Adapter

:

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    if (viewType == ITEM_TYPE.ITEM_TYPE_IMAGE.ordinal()) {
        return new MyIVHolder(mLayoutInflater.inflate(R.layout.rv_image_item, parent, false));
    } else {
        return new MyTVHolder(mLayoutInflater.inflate(R.layout.rv_item, parent, false)); }}Copy the code
@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) {

    if (holder instanceof MyTVHolder) {
        ((MyTVHolder) holder).mTextView.setText(mArray[position]);
    } else if (holder instanceof MyIVHolder) {
        Glide.with(mContext)
                .load(mImageId[position % 3])
                .centerCrop()
                .into(((MyIVHolder) holder).mImageView);
        ((MyIVHolder) holder).mTextView.setText(mArray[position]);
    }

    if(mOnItemClickListener ! = null) { holder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { int pos = holder.getLayoutPosition(); mOnItemClickListener.onItemClick(holder.itemView, pos); }}); holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                int pos = holder.getLayoutPosition();
                mOnItemClickListener.onItemLongClick(holder.itemView, pos);
                return false; }}); }}Copy the code

The idea is to load different layouts based on the getItemViewType Settings. Take a look at the renderings:

Let’s look at horizontal scrolling

One line of code is enough: gridLayoutManager setOrientation (gridLayoutManager. HORIZONTAL);

And waterfall flow

Yeah, and waterfall flow. Remember to comment out the GridLayoutManager setting width part.

StaggeredGridLayoutManager layoutManager
                = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
        rvTest.setLayoutManager(layoutManager);
Copy the code

The last

This is the whole content of the second article. If you are interested in the third article, or you haven’t read the first one, please remember to like it or follow me.