RecyclerView and CardView (with demo)

Keywords: Android github xml encoding

This time I'm going to talk about a wide range of things. I'll talk about as many details as I can.
Other articles on the topic:
Preface to "Material Design Initial Learning Notes"
Animation (including demo)
Material Design Initial Learning Notes and AppCompat Activity (with demo)
demo download

RecyclerView

Layout file

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <include layout="@layout/toolbar_test"/>
    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:id="@+id/recycler"
        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
</LinearLayout>

As you can see from the layout file above, RecyclerView is something in v7, so it's natural to rely on v7. Secondly, the layout of include is toolbar as mentioned in the previous section.

Adapter

RecyclerView, like ListView, also needs an Adapter, except that the Adapter is somewhat different. The Adapter of RecyclerView has its own performance optimization mechanism, including ViewHolder.

public class CardListAdapter  extends RecyclerView.Adapter<CardListAdapter.MyViewHolder>{
private Context context;
private ArrayList<String> list ;
    private IcardViewChanger icardViewChanger;
public CardListAdapter(Context context,ArrayList<String> list){
    this.context = context;
    this.list = list;
    }
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    MyViewHolder holder = new MyViewHolder(LayoutInflater.from(
    context).inflate(R.layout.item_cardview, parent,
    false));
    return holder;
    }

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
    holder.tv.setText(list.get(position));
    if (icardViewChanger!=null){
        icardViewChanger.changeCardView(holder.cardView);
    }

    }


    @Override
public int getItemCount() {
    return list.size();
    }
class MyViewHolder extends RecyclerView.ViewHolder
{

    TextView tv;
    CardView cardView;
    public MyViewHolder(View view)
    {
        super(view);
        tv = (TextView) view.findViewById(R.id.text);
        cardView = (CardView) view.findViewById(R.id.cardView);
    }
}
}

I won't say much about the construction method. onCreateViewHolder is comparable to View construction in BaseAdapter's getView. The Adapter of ListView needs to manually determine whether the view is empty, and then decide whether to establish it. Now just write the view construction in the onCreateViewHolder method.
onBindViewHolder is used to process interface logic, which is equivalent to the interface processing logic in getView of BaseAdapter. This method is called passively every time the interface is refreshed.
getItemCount is the number of Items returned.
Then there's the construction of ViewHolder. Note that this inherits RecyclerView.ViewHolder
For the layout files used here, CardView will be explained below.
Then you set up RecyclerView.

   recyclerView = (RecyclerView)findViewById(R.id.recycler);
        recyclerView.setAdapter(adapter);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setItemAnimator(new DefaultItemAnimator());

RecyclerView.LayoutManager. This is an abstract class. Fortunately, the system provides three implementation classes:

  • Linear Layout Manager's current manager supports both horizontal and vertical.
  • GridLayout Manager Grid Layout Manager
  • Staggered Grid Layout Manager Falls Placement Manager
    setItemAnimator is a deleted animation.
    We can add the partition line mRecyclerView.addItemDecoration()
    With regard to animation and splitting lines, they can be set to the desired effect by inheritance. I won't go into details here.

    CardView

    CardView supports a variety of effects, and we can make all Item s in RecyclerView use CardView.

    rely on

    If you need to use CardView, you need to rely on:

    compile 'com.android.support:cardview-v7:25.3.1'

    Now go back to CardListAdapter and take a look at the layout file item_cardview.

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:orientation="vertical"
                android:layout_width="match_parent"
    
                android:layout_height="wrap_content">
    <android.support.v7.widget.CardView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="#558b2f"
      android:layout_margin="10dp"
      app:cardBackgroundColor="#558b2f"
      android:id="@+id/cardView">
      <RelativeLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content">
          <ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentLeft="true"
              android:src="@mipmap/ic_launcher_round"
              android:id="@+id/logo"/>
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text=""
              android:layout_alignParentRight="true"
              android:id="@+id/text"/>
      </RelativeLayout>
    </android.support.v7.widget.CardView>
    </LinearLayout>

    CardView has some basic attributes:

app:cardBackgroundColor This is setting the background color
App: card Corner Radius This is to set the rounded corner size
App: card Elevation This is the shadow of setting the z axis
App: cardMax Elevation This is the maximum height of the z axis.
App: cardUse CompatPadding or not
App: card Prevent Corner Overlap whether to use Prevent Corner Overlap
app:contentPadding Sets the content padding
App: content Padding Left sets the left padding of content
app:contentPaddingTop Sets Upper padding of Content
App: ContentPadding Right Sets the Right padding of Content
app:contentPaddingBottom sets the bottom padding of the content

So far, the properties of CardView have been introduced. Then we will set several CardViews according to the attribute values and compare them.

Expand

First, we add an interface.

public interface IcardViewChanger {
    public void changeCardView(CardView cardView);
}

To set up CardView with this interface, first add a method in CardListAdapter:

   public void setIcardViewChanger(IcardViewChanger icardViewChanger) {
        this.icardViewChanger = icardViewChanger;
    }

Modify onBindViewHolder:

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
    holder.tv.setText(list.get(position));
    if (icardViewChanger!=null){
        icardViewChanger.changeCardView(holder.cardView);
    }
    Log.e("xxxxxx" ,"onBindViewHolder");
    }

Then we set up the call in Activeness using RecyclerView:

  @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_card,menu);
        return  true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.btn_changeElevation:
               adapter.setIcardViewChanger(new IcardViewChanger() {
                   @Override
                   public void changeCardView(CardView cardView) {
                       cardView.setCardElevation(80);
                   }
               });
                adapter.notifyDataSetChanged();
                break;
            case R.id.btn_changeRadius:
                adapter.setIcardViewChanger(new IcardViewChanger() {
                    @Override
                    public void changeCardView(CardView cardView) {
                        cardView.setRadius(80);
                    }
                });
                adapter.notifyDataSetChanged();
                break;
            case R.id.btn_changeColor:
                adapter.setIcardViewChanger(new IcardViewChanger() {
                    @Override
                    public void changeCardView(CardView cardView) {
                        cardView.setCardBackgroundColor(getResources().getColor(R.color.cardBackground));
                    }
                });
                adapter.notifyDataSetChanged();
                break;
        }

        return super.onOptionsItemSelected(item);
    }

At last, I will show you a picture.


summary

RecyclerView and CardView don't have to be used together. If you need to, you can use them separately. I'm here to show them together for demo.
For more settings of RecyclerView and CardView, you can modify the experiment on the basis of my demo.
With these two components, Android's many interfaces are much simpler to handle, not only because the interfaces are set up more, but also because the operations are decoupled, such as animation and splitter ViewHolder.
If you have any questions, leave a message for me, or pay attention to my public number.


Posted by cnagra on Fri, 14 Dec 2018 02:09:08 -0800