Android 第十八課強大的滾動控件 RecyclerView

步驟：

一、添加依賴庫

 compile'com.android.support:recyclerview-v7:26.1.0'

二、在activity_mian.xml中，添加RecyclerView控件，并占據整個頁面。

三、把你要在RecyclerView中展示的內容，設置成一個實體類Fruit，接著為RecyclerView的子項（展示的各個內容）制定一個我們自定義的布局fruit_item.xml（用來放在RecyclerView里面）。

四、新建適配器（FruitAdapter）

------------------------------------------------------------------------------------------》

Android 提供了一個更強大的滾動控件--RecyclerView。它是一個增強版的ListView。

新建RecyclerView項目。自動創建好項目，開始。

1、RecyclerView的基本用法

和百分比布局類似，RecyclerView也屬于新增控件，為了讓RecyclerView在所有Android版本上使用，Android團隊使用了同樣

的方式，將RecyclerView定義在了support庫中，因此，要想使用RecyclerView這個控件，首先在項目的build.gradle中添加對應的依賴庫才行，代開app/gradle文件，在dependencies中添加如下內容：

dependencies {?

?implementation fileTree(dir: 'libs', include: ['*.jar'])?

?implementation 'com.android.support:appcompat-v7:26.1.0'

?????.....

? compile'com.android.support:recyclerview-v7:26.1.0'

}

然后修改activity_main.xml中的代碼，如下所示：

<?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"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.example.recyclerviewtestb.MainActivity"> <android.support.v7.widget.RecyclerViewandroid:id="@+id/recycler_view"android:layout_width="match_parent"android:layout_height="match_parent" />
</LinearLayout>

在布局中添加RecyclerView控件也是非常簡單的，先為RecyclerView指定一個id。讓RecyclerView占據整個布局的空間，由于RecyclerVeiw不是內置在系統SDK當中的，所以需要把完整的報名路徑寫出來。

我們先準備好一份同樣的水果圖片。放在drawable目錄下，然后創建一個實體類Fruit，作為RecyclerView的適配類型，代碼如下：

package com.example.recyclerviewtestb;/*** Created by ZHJ on 2018/3/10.*/
public class Fruit {private String name;private int imageId;public Fruit(String name, int imageId) {this.name = name;this.imageId = imageId;}public String getName() {return name;}public int getImageId() {return imageId;}}

Fruit類中只有兩個字段，name表示水果的名稱，imageId表示水果對那個圖片的資源id。

然后我們需要為RecyclerView的子項制定一個我們自定義的布局，在layout目錄下新建fruit_item.xml。

代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:id="@+id/fruit_image"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid:id="@+id/fruit_name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_marginLeft="10dp" /></LinearLayout>

在這里我們可以設置展示的樣式。這里就簡單設置一下。

四、

接下來，為RecyclerView準備一個適配器，新建FruitAdapter類，讓這個適配器繼承自RecyclerView.Adapter，并將泛型指定為FruitAdapter.ViewHolder。其中，ViewHolder是我們在FruitAdapter中定義的一個內部類，代碼如下：

package com.example.recyclerviewtestb;import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;
import android.widget.TextView;import java.util.List;/*** Created by ZHJ on 2018/3/10.*/public class FruitAdpater extends RecyclerView.Adapter<FruitAdpater.ViewHolder> {private List<Fruit> mFruitList;static class ViewHolder extends  RecyclerView.ViewHolder{//內部類ImageView fruitImage;TextView fruitName;public ViewHolder(View view){super(view);fruitImage= (ImageView)view.findViewById(R.id.fruit_image);fruitName = (TextView)view.findViewById(R.id.fruit_name);}}//構造函數public  FruitAdpater(List<Fruit>fruitList){mFruitList = fruitList;}@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item,parent,false);ViewHolder holder = new ViewHolder(view);return holder;}
@Override public void onBindViewHolder(ViewHolder holder, int position) {Fruit fruit = mFruitList.get(position);holder.fruitImage.setImageResource(fruit.getImageId());holder.fruitName.setText(fruit.getName());}@Overridepublic int getItemCount() {return mFruitList.size();}
}

我們先定義了一個內部類ViewHolder，ViewHolder要繼承自RecyclerView.ViewHolder。然后，ViewHolder的構造函數中要傳入一個View參數，這個參數通常就是RecyclerView子項的最外層布局，那么我們就可以通過findViewById()方法來獲取到布局中的ImageView和TextView的實例了。

????接著往下看，FruitApapter中也有一個構造函數，這個方法用于把要展示的數據源傳進來，并賦值給一個全局變量mFruitList，我們后續的操作都將在這個數據源的基礎上進行。

?????繼續往下看，由于FruitAdapter是繼承自RecyclerView.Adapter的，那么就必須重寫onCreateViewHolder(),onBindViewHolder()和getItemCount()這3個方法。

onCreateViewHolder()方法用于創建ViewHolder實例的，我們在這個方法中將fruit_item布局加載進來，然后創建一個ViewHolder實例，并把加載進來，然后創建一個ViewHolder實例，并把加載出來的布局傳入到構造函數中，最后將ViewHolder()方法的實例返回。

onBindViewHolder()方法是用于對RecyclerView子項的數據進行賦值，會在每個子項被滾到屏幕內的時候執行，這里我們通過position參數得到當前項的Fruit實例，然后再將數據設置到ViewHolder的ImageView和TextView當中即可。

getItemCount()方法就簡單了，它用于告訴RecyclerView一共有多少子項，直接返回數據源的長度九課就可以了。

五、

適配器準備好了之后，我們開始修改MainActivity中的代碼，如下：

package com.example.recyclerviewtestb;import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;import java.util.ArrayList;
import java.util.List;public class MainActivity extends AppCompatActivity {private List<Fruit> fruitList = new ArrayList<>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initFruit();//初始化水果數據RecyclerView recyclerView =(RecyclerView)findViewById(R.id.recycler_view);LinearLayoutManager layoutManager = new LinearLayoutManager(this);recyclerView.setLayoutManager(layoutManager);FruitAdpater adpater = new FruitAdpater(fruitList);recyclerView.setAdapter(adpater);}private  void  initFruit(){ for (int i = 0; i < 2; i++) {Fruit apple = new Fruit("Apple", R.drawable.apple_pic);fruitList.add(apple);Fruit banana = new Fruit("Banana", R.drawable.banana_pic);fruitList.add(banana);Fruit orange = new Fruit("Orange", R.drawable.orange_pic);fruitList.add(orange);Fruit watermelon = new Fruit("Watermelon", R.drawable.watermelon_pic);fruitList.add(watermelon);Fruit pear = new Fruit("Pear", R.drawable.pear_pic);fruitList.add(pear);Fruit grape = new Fruit("Grape", R.drawable.grape_pic);fruitList.add(grape);Fruit pineapple = new Fruit("Pineapple", R.drawable.pineapple_pic);fruitList.add(pineapple);Fruit strawberry = new Fruit("Strawberry", R.drawable.strawberry_pic);fruitList.add(strawberry);Fruit cherry = new Fruit("Cherry", R.drawable.cherry_pic);fruitList.add(cherry);Fruit mango = new Fruit("Mango", R.drawable.mango_pic);fruitList.add(mango);}
}
}

這里使用了一個同樣的initFruits()方法，用于初始化所有的水果數據。

接著在onCreate()方法中我們先獲取RecyclerView的實例，然后創建一個LinearLayoutManager對象，并將它設置到RecyclerView中。LayoutManager用于指定RecyclerView的布局方式，這里使用的LinearLayoutManager是線性布局的意思。

接下來，我們創建了FruitAdaptper的實例，并將水果數據傳入FruitAdapter的構造函數中，最后調用RecyclerView的setAdaper()方法來完成適配器設置，這樣RecyclerView和數據之間的關聯就建立完成了。

可以運行一下：

----------------------------------------------------------------》

實現橫向滾動和瀑布流布局：

接下來，我們開始嘗試實現橫向滾動的效果，

首先，要對fruit_item.xml布局進行修改，因為這個布局里面的元素是水平排列的，適用于縱向滾動

如果我們要實現橫向滾動，應該把fruit_item里的元素該成垂直排列。

修改fruit_item.xml中的代碼，如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="100dp"android:layout_height="match_parent"><ImageViewandroid:id="@+id/fruit_image"android:layout_width="wrap_content"android:layout_height="wrap_content"  android:layout_gravity="center_horizontal"/><TextViewandroid:id="@+id/fruit_name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="10dp"/></LinearLayout>

我們將Linearlayout改成垂直排列，并把寬度設為100dp。這里將寬度指定為固定值是因為每種水果的文字長度不一致。

修改MainActivity中的代碼，如下所示：

package com.example.recyclerviewtestb;import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;import java.util.ArrayList;
import java.util.List;public class MainActivity extends AppCompatActivity {private List<Fruit> fruitList = new ArrayList<>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initFruit();//初始化水果數據RecyclerView recyclerView =(RecyclerView)findViewById(R.id.recycler_view);LinearLayoutManager layoutManager = new LinearLayoutManager(this);  layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);recyclerView.setLayoutManager(layoutManager);FruitAdpater adpater = new FruitAdpater(fruitList);recyclerView.setAdapter(adpater);}......
}

我們只是調用了LinearLayoutManager的setOrientation()方法來設置布局的排列方向，默認是縱向排列的，我們傳入LinearLayoutManager.HORIZONTAL表示讓布局橫行排列，這樣RecyclerView就可以橫向滾動了。

運行一下：