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

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
• RecyclerView use
• Use CardView
• RecyclerView. Adapter implementation
• Add click events to recyclerView. Adapter
• Add click effects to CardView
• Add more content to CardView
• The last

---

preface

Official document portal

RecyclerView is Google’s recommendation to replace ListView. The overall use of the feeling and ListView is similar, but more than ListView is many advantages. To use them, you need to add dependencies. The version should be filled in according to appCompat-v7.

compile 'com. Android. Support: cardview - v7:25.3.1'
compile 'com. Android. Support: recyclerview - v7:25.3.1'
Copy the code

---

RecyclerView use

Add RecyclerView to the layout.

<android.support.v7.widget.RecyclerView
    android:id="@+id/rv_test"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbars="vertical" />
Copy the code

Go to RecyclerView in your code and add the layout manager. And then you have to set up the adapter, which we’ll talk about in the adapter section. So let’s start with the simplest linearLayer outManager.

RecyclerView rvTest = (RecyclerView) findViewById(R.id.rv_test);
rvTest.setLayoutManager(new LinearLayoutManager(this));
Copy the code

RecyclerView provides these built-in layout managers: In vertical or horizontal scrolling list LinearLayoutManager GridLayoutManager display project in the grid display project StaggeredGridLayoutManager shown in dispersing align grid project

---

Use CardView

We treat every CardView as an item of RecyclerView, so we don’t add layout, we go directly to CardView. Just like the item on the ListView. Android :foreground=”@drawable/card_foreground”

<? 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">

    <TextView
        android:id="@+id/tv_test"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp" />
</android.support.v7.widget.CardView>
Copy the code

---

RecyclerView. Adapter implementation

Recyclerview. Adapter is not difficult to write. If your IDE is AS, you can almost rely on AS prompts to complete the code. I don’t have to analyze the code, almost as I did when I wrote the ListView. Note, however, that the recyclerView. Adapter part is not finished yet. Adding click events to the RecyclerView.Adapter part will add callback code. Then notice that the second argument to onCreateViewHolder, viewType, is not used here.

public class MyRVAdapter extends RecyclerView.Adapter<MyRVAdapter.MyTVHolder> {

    private final String[] mArray;
    private final LayoutInflater mLayoutInflater;
    private final Context mContext;

    public MyRVAdapter(Context context) {
        mArray = context.getResources().getStringArray(R.array.testArray);
        mLayoutInflater = LayoutInflater.from(context);
        mContext = context;
    }

    @Override
    public MyRVAdapter.MyTVHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new MyTVHolder(mLayoutInflater.inflate(R.layout.rv_item, parent, false));
    }

    @Override
    public void onBindViewHolder(MyRVAdapter.MyTVHolder holder, int position) {
        holder.mTextView.setText(mArray[position]);
    }

    @Override
    public int getItemCount() {
        returnmArray == null ? 0 : mArray.length; } public class MyTVHolder extends RecyclerView.ViewHolder { TextView mTextView; public MyTVHolder(View itemView) { super(itemView); mTextView = (TextView) itemView.findViewById(R.id.tv_test); }}}Copy the code

At this point, it’s ready to run and see what happens. Let’s have an effect picture!

<? xml version="1.0" encoding="utf-8"? > <resources> <string-array name="testArray">
        <item>hello java</item>
        <item>hello android</item>
        <item>hello recycler view</item>
        <item>hello card view</item>
        <item>hello java</item>
        <item>hello android</item>
        <item>hello recycler view</item>
        <item>hello card view</item>
        <item>hello java</item>
        <item>hello android</item>
        <item>hello recycler view</item>
        <item>hello card view</item>
    </string-array>
</resources>
Copy the code

---

Add click events to recyclerView. Adapter

But unlike a ListView, the click event on an item has to be written ourselves, which is, of course, not too much trouble. Divided into two parts, add interface, and set up listener.

public interface OnItemClickListener {
    void onItemClick(View view, int position);

    void onItemLongClick(View view, int position);
}

private OnItemClickListener mOnItemClickListener;

public void setOnItemClickListener(OnItemClickListener mOnItemClickListener) {
    this.mOnItemClickListener = mOnItemClickListener;
}
Copy the code

@Override
public void onBindViewHolder(final MyRVAdapter.MyTVHolder holder, int position) {
    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

You can then add a listener to the item just as you did with the ListView. When you add the click effects to the CardView, you’ll get a full rendering.

MyRVAdapter myRVAdapter = new MyRVAdapter(this);
myRVAdapter.setOnItemClickListener(new MyRVAdapter.OnItemClickListener() {
    @Override
    public void onItemClick(View view, int position) {
        Toast.makeText(getApplicationContext(),
                "click: " + position, Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onItemLongClick(View view, int position) {
        Toast.makeText(getApplicationContext(),
                "long click: "+ position, Toast.LENGTH_SHORT).show(); }}); rvTest.setAdapter(myRVAdapter);Copy the code

---

Add click effects to CardView

Unlike ListView, which has a default click effect, RecyclerView needs to create its own. However, since the water ripple effect to be used was only introduced in 5.0, we needed to do it separately. First after 5.0.

• After 5.0, just set the ripple color.

<? xml version="1.0" encoding="utf-8"? > <ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimary" />
Copy the code

• Selectors are available before 5.0, they are not meant to be pretty. Or is there some other way to save it?

<? xml version="1.0" encoding="utf-8"? > <inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/card_foreground_selector"
    android:insetBottom="4dp"
    android:insetLeft="3dp"
    android:insetRight="3dp"
    android:insetTop="4dp" />
Copy the code

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryTrans" />
            <corners android:radius="@dimen/card_radius" />
        </shape>
    </item>
    <item android:state_enabled="true" android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="#0f000000" />
            <corners android:radius="@dimen/card_radius" />
        </shape>
    </item>
</selector>
Copy the code

I would also like to add that if you want different versions of the click effects, you need to create folders in the resource files directory. For example, drawable v21 means 21 and above, and drawable below 21.

---

Add more content to CardView

CardView can’t say only text, so how do you add an icon or an image? I can only say it’s incredibly simple. Look at the code:

<? 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:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="4dp"
            android:src="@mipmap/ic_launcher" />

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

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

Here’s another illustration:

---

The last

Basic is the introduction of RecyclerView, like to remember to like or pay attention to me, if interested in the second oh ~~

---