Android-Recyclerview-GridView&瀑布流等效果

由於Recyclerview是在 android.support.v7.widget.包 RecyclerView，所以需要導Recycler庫：

導Recycler庫：

選擇項目，右鍵--> 

點擊+圖標：

選擇 Library dependency：

 

輸入 com.android.support:recyclerview ，進行搜索，看有什么RecyclerView版本可以用

 

敲回車搜索之后的結果是：com.android.support:recyclerview-v7 ............

 

點擊OK即可：

 

就導入成功了，然后在點擊即可：

 

---

---

 

 

1.Activity -- MyRecyclerActiviy

package com.example.myapplication.recycler2.recycler;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.View;

import com.example.myapplication.R;

import java.util.ArrayList;
import java.util.List;

public class MyRecyclerActiviy extends Activity {

    private RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycler2);

        // 引入布局的RecyclerView，初始化RecyclerView 可以理解為ListView
        recyclerView = findViewById(R.id.recycler_view);

        /**
         * 實例化適配器
         * RecyclerView需要的適配器是RecyclerView.Adapter adapter
         */
        MyRecyclerAdapter myRecyclerAdapter = new MyRecyclerAdapter(this, getDatas());

        /**
         * 設置適配器，可以理解為ListView設置適配器
         * 不同的是 RecyclerView需要的適配器是RecyclerView.Adapter adapter
         */
        recyclerView.setAdapter(myRecyclerAdapter);

        /**
         * 注意：以上步驟 還不能顯示數據，還是一片顯示空白 空白，為何空白 因為都沒有去執行MyRecyclerAdpater的代碼
         * 需要設置以下代碼setLayoutManager，才能顯示
         */
        LinearLayoutManager manager =
                new LinearLayoutManager(MyRecyclerActiviy.this, // 參數一：上下文環境
                        LinearLayoutManager.VERTICAL,  // 參數二：顯示方向 垂直
                        false);          // 參數三：是否倒序
        recyclerView.setLayoutManager(manager);

        /**
         * 默認滑動到一半
         */
        recyclerView.scrollToPosition(getDatas().length / 2);
    }

    /**
     * 此方法模擬數據
     * @return
     */
    private String[] getDatas() {
        String[] result = new String[100];
        for (int i = 0; i < 100; i++) {
           result[i] = i + "張無忌";
        }
        return result;
    }

    /**
     * ListView效果
     * @param view
     */
    public void list(View view) {
        LinearLayoutManager manager =
                new LinearLayoutManager(MyRecyclerActiviy.this, // 參數一：上下文環境
                        LinearLayoutManager.VERTICAL,  // 參數二：顯示方向 垂直
                        true);          // 參數三：是否倒序 >> 倒序
        recyclerView.setLayoutManager(manager);
    }

    /**
     * ListView效果
     * 橫向滑動的ListView，像gallery 橫向滑動
     * @param view
     */
    public void list_h(View view) {
        LinearLayoutManager manager =
                new LinearLayoutManager(MyRecyclerActiviy.this, // 參數一：上下文環境
                        LinearLayoutManager.HORIZONTAL,  // 參數二：顯示方向 垂直
                        false);          // 參數三：是否倒序
        recyclerView.setLayoutManager(manager);
    }

    /**
     * GridView效果
     *      顯示方向 垂直
     *      顯示兩列
     * @param view
     */
    public void grid(View view) {
        GridLayoutManager manager =
                new GridLayoutManager(MyRecyclerActiviy.this, // 參數一：上下文環境
                        2, // 顯示兩列
                        GridLayoutManager.VERTICAL,  // 參數二：GridLayoutManager=GridView效果 顯示方向 垂直
                        true);          // 參數三：是否倒序 >> 倒序
        recyclerView.setLayoutManager(manager);
    }

    /**
     * 瀑布流效果
     *      顯示方向 垂直
     *      顯示三列
     * @param view
     */
    public void flow(View view) {
        StaggeredGridLayoutManager manager = new
                StaggeredGridLayoutManager(3, // 顯示三列
                                            StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(manager);
    }

    /**
     * 滑動到第一條Item
     * @param view
     */
    public void toFirst(View view) {
        recyclerView.scrollToPosition(1);
    }
}

 

2.Activity的布局 activity_recycler

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="list"
            android:layout_weight="1"
            android:onClick="list"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="list_h"
            android:layout_weight="1"
            android:onClick="list_h"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Grid"
            android:layout_weight="1"
            android:onClick="grid"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="瀑布流"
            android:layout_weight="1"
            android:onClick="flow"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="置頂"
            android:layout_weight="1"
            android:onClick="toFirst"
            />

    </LinearLayout>

</FrameLayout>

 

3.Item View 需要的布局文件，recycler_item

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:gravity="center">

        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@mipmap/ic_launcher"
            android:layout_gravity="center_horizontal"
            />

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="20dp"
            android:text="name"
            android:textColor="@android:color/black" />

    </LinearLayout>


</LinearLayout>

 

4.適配器 MyRecyclerAdapter：

package com.example.myapplication.recycler2.recycler;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.example.myapplication.R;

import java.util.List;

/**
 * RecyclerView需要的適配器 >>> RecyclerView.Adapter<VH>
 *     VH就是：RecyclerView.ViewHolder
 *     VH全程：View-Holder
 */
public class MyRecyclerAdapter extends RecyclerView.Adapter<MyRecyclerAdapter.MyViewHolder> {

    private LayoutInflater layoutInflater; // 布局加載器 用於加載 Item Layout
    private String[] datas; // 需要顯示的數據

    /**
     * 定義此構造方法 是為了接收數據 和 Context
     */
    public MyRecyclerAdapter(Context context, String[] datas) {
        layoutInflater = LayoutInflater.from(context);
        this.datas = datas;
    }

    /**
     * 此方法相當於 ListView-MyBaseAdapte中的getView()方法的 創建View 、 創建ViewHolder
     * @param viewGroup
     * @param i
     * @return
     */
    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View itemView = layoutInflater.inflate(R.layout.recycler_item, null);
        return new MyViewHolder(itemView);
    }

    /**
     * 此方法作用是：ItemLayout里面的View 和數據 進行綁定操作
     * 可以理解為：以前ListView-MyBaseAdapter-getView()方法里面的--ItemLayout里面的View 和數據 進行綁定操作
     * @param myViewHolder
     * @param index
     */
    @Override
    public void onBindViewHolder(@NonNull MyViewHolder myViewHolder, int index) {
        /**
         * 第一步：得到數據，數據集合.get(i、position、index ...);
         */
        String data = datas[index];

        /**
         * 第二步：把數據設置到>>>> MyViewHolder 的 Item Layout 控件中去
         */
        myViewHolder.tvName.setText(data);
    }

    /**
     * 此方法是返回Item的總數
     * 可以理解為ListView-MyBaseAdapter 中的 public int getCount() {} 方法
     * @return
     */
    @Override
    public int getItemCount() {
        return datas.length; // 返回數據的總大小
    }


    /**
     * 描述MyViewHolder，可以想象ListView-MyBaseAdapter中也有ViewHolder、
     * 此MyViewHolder，是RecyclerView.ViewHolder的子類
     */
    class MyViewHolder extends RecyclerView.ViewHolder {

        private TextView tvName;

        /**
         * 此構造方法接收一個View，此View是 onCreateViewHolder方法中傳遞過來的View->Item
         * @param itemView
         */
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);

            tvName = itemView.findViewById(R.id.tv_name);
        }
    }
}

 

執行結果：