淺談Android RecyclerView UI的滾動控件示例

更新時間：2018年02月22日 09:22:46 作者：deniro

本篇文章主要介紹了淺談Android RecyclerView UI的滾動控件示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

ListView 由于其強(qiáng)大的功能，在過去的 Andorid 開發(fā)中使用非常廣泛。不過 ListView 需要優(yōu)化來提升運(yùn)行效率，就像我們之前所優(yōu)化的那樣，否則性能將很差。還有就是只能夠縱向滾動，如果要想實(shí)現(xiàn)橫向移動，用 ListView 是做不到的。

RecyclerView 可以說是一個增強(qiáng)版的 ListView 。它不僅實(shí)現(xiàn)了和 ListView 同樣的效果，而且還優(yōu)化了 ListView 存在的各種不足。 RecyclerView 現(xiàn)在可是官方推薦使用的滾動控件哦O(∩_∩)O~

1 基本用法

RecyclerView 也是新增的控件，所以必須先在項目的 build.gradle 中添加相應(yīng)的依賴庫才能使用：

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

注意不要拼錯哦O(∩_∩)O~

添加后，記得點(diǎn)擊 Sync Now 鏈接哦。

接著，修改布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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>

這里把寬度和高度都定義為 match_parent，這樣 RecyclerView 就能占滿整個屏幕。因為 RecyclerView 也不是系統(tǒng)內(nèi)置的 SDK，所以這里引用的是完整的包路徑。

然后為 RecyclerView 創(chuàng)建一個適配器（繼承自 RecyclerView.Adapter<CatAdapter.ViewHolder> ）：

public class CatAdapter extends RecyclerView.Adapter<CatAdapter.ViewHolder> {

  private List<Cat> cats;

  static class ViewHolder extends RecyclerView.ViewHolder {
    ImageView image;
    TextView name;

    public ViewHolder(View view) {
      super(view);
      image = (ImageView) view.findViewById(R.id.image);
      name = (TextView) view.findViewById(R.id.name);
    }
  }

  public CatAdapter(List<Cat> cats) {
    this.cats = cats;
  }


  @Override
  public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.cat_item, parent, false);
    return new ViewHolder(view);
  }

  @Override
  public void onBindViewHolder(ViewHolder holder, int position) {
    Cat cat = cats.get(position);
    holder.image.setImageResource(cat.getImageId());
    holder.name.setText(cat.getName());
  }

  @Override
  public int getItemCount() {
    return cats.size();
  }
}

在代碼中，我們先定義了一個內(nèi)部類 ViewHolder，它繼承自 RecyclerView.ViewHolder。然后在 ViewHolder 的構(gòu)造函數(shù)中傳入一個 View 參數(shù)，它是 RecyclerView 子項的最外層布局，所以我們可以通過它來取得布局中的 ImageView 和 TextView 的實(shí)例。

CatAdapter 的構(gòu)造函數(shù)用于把要展示的數(shù)據(jù)源傳遞進(jìn)來，并賦值給一個類變量 cats。

因為 CatAdapter 繼承自 RecyclerView.Adapter，所以必須重寫以下三個方法：

onCreateViewHolder - 創(chuàng)建 ViewHolder 實(shí)例，我們把 cat_item 的布局加載進(jìn)來，創(chuàng)建了一個 ViewHolder 實(shí)例。
onBindViewHolder - 對 RecyclerView 的子項數(shù)據(jù)進(jìn)行賦值，這個方法會在每個子項被滾動到屏幕內(nèi)時進(jìn)行。
getItemCount - 返回 RecyclerView 的子項總數(shù)。

最后，我們在活動類中使用 RecyclerView ：

public class MainActivity extends AppCompatActivity {
  private List<Cat> cats = new ArrayList<>();

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    init();
    RecyclerView recyclerView=(RecyclerView)findViewById(R.id.recycler_view);
    LinearLayoutManager layoutManager=new LinearLayoutManager(this);
    recyclerView.setLayoutManager(layoutManager);
    CatAdapter adapter=new CatAdapter(cats);
    recyclerView.setAdapter(adapter);
  }

  /**
   * 初始化數(shù)據(jù)
   */
  private void init() {
    cats.add(new Cat("暹羅貓", R.drawable.cat1));
    cats.add(new Cat("布偶貓", R.drawable.cat2));
    cats.add(new Cat("蘇格蘭折耳貓", R.drawable.cat3));
    cats.add(new Cat("英國短毛貓", R.drawable.cat4));
    cats.add(new Cat("波斯貓", R.drawable.cat5));
    cats.add(new Cat("俄羅斯藍(lán)貓", R.drawable.cat6));
    cats.add(new Cat("美國短毛貓", R.drawable.cat7));
    cats.add(new Cat("異國短毛貓", R.drawable.cat8));
    cats.add(new Cat("挪威森林貓", R.drawable.cat9));
    cats.add(new Cat("孟買貓", R.drawable.cat10));
    cats.add(new Cat("緬因貓", R.drawable.cat11));
    cats.add(new Cat("埃及貓", R.drawable.cat12));
  }
}

這里創(chuàng)建了 LinearLayoutManager 的線性布局對象，傳遞給了 recyclerView.setLayoutManager() 方法。

recyclerView 示例

我們使用了 recyclerView 創(chuàng)建出了 ListView 的效果，而且代碼邏輯更清晰咯。

2 橫向滾動

現(xiàn)在讓我們把這些貓變?yōu)?“橫向滾動” 吧。

把 cat_item 中的元素變?yōu)榇怪迸帕校?/p>

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

  <ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    />

  <TextView
    android:id="@+id/name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="10dp" />

</LinearLayout>

這里還把 LinearLayout 的寬度設(shè)為 110dp，即固定的值。因為每種貓的文字長度不同，如果用 wrap_content 的話，可能造成子項的長短不一致；而如果用 match_parent 的話，又會導(dǎo)致一個子項就占滿了整個屏幕。

我們把 ImageView 與 TextView 都設(shè)置為水平居中，而且用 android:layout_marginTop，讓文字與圖片保持了一段距離，這樣更美觀。

接下來，修改活動類的代碼：

@Override
protected void onCreate(Bundle savedInstanceState) {
  ...
  layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
  ...
}

把 LinearLayoutManager 的布局改為橫向排列（默認(rèn)是縱向排列）。

橫向排列

我們可以在水平方向上滑動來查看屏幕外的 “貓” 啦。

ListView 的布局排列是由自身來管理的，所以存在一定的局限性；而 RecyclerView 把布局的工作交給了 LayoutManager，LayoutManager 制定了一系列可擴(kuò)展的布局排列接口，所以我們只要按照接口的規(guī)范來實(shí)現(xiàn)，就能夠定制出各種不同排列方式的布局啦O(∩_∩)O~

3 瀑布流布局

讓我們使用 StaggeredGridLayoutManager 來實(shí)現(xiàn)酷炫的瀑布流布局吧O(∩_∩)O~

首先修改 cat_item 布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  android:layout_margin="5dp"
  >

  <ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    />

  <TextView
    android:id="@+id/name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="left"
    android:layout_marginTop="10dp" />

</LinearLayout>

這里把 LinearLayout 的寬度改為 wrap_content，這樣寬度會根據(jù)實(shí)際的布局列數(shù)自動適配。還使用 layout_margin 讓子項之間留出一定的間距。最后將 TextView 改為居左對齊，因為下面的說明文件內(nèi)容可能會很長喲O(∩_∩)O~

修改活動類的代碼：

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

  init();

  RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);

  StaggeredGridLayoutManager layoutManager=new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);

  recyclerView.setLayoutManager(layoutManager);
  CatAdapter adapter = new CatAdapter(cats);
  recyclerView.setAdapter(adapter);
}

在此，我們創(chuàng)建了 StaggeredGridLayoutManager 的實(shí)例，它的構(gòu)造函數(shù)接受兩個參數(shù)，第一個參數(shù)用于指定布局的列數(shù)，第二個參數(shù)用于指定布局的排列方向。

瀑布流示例

4 點(diǎn)擊事件

RecyclerView 沒有像 ListView 一樣的 setOnItemClickListener() 事件，所以需要我們自己給子項具體的 View 注冊點(diǎn)擊事件。

ListView 的 setOnItemClickListener() 注冊的是子項的點(diǎn)擊事件，但如果想要注冊點(diǎn)擊的是子項里具體的某個按鈕時，使用 ListView 實(shí)現(xiàn)起來就比較麻煩。所以 RecyclerView 直接擯棄了子項點(diǎn)擊事件的監(jiān)聽器，把所有的點(diǎn)擊事件都交給具體的 View 去注冊實(shí)現(xiàn)咯O(∩_∩)O

修改適配器：

static class ViewHolder extends RecyclerView.ViewHolder {
  View catView;
  ImageView image;
  TextView name;

  public ViewHolder(View view) {
    super(view);
    catView = view;
    image = (ImageView) view.findViewById(R.id.image);
    name = (TextView) view.findViewById(R.id.name);
    Log.d(TAG, "ViewHolder: image:" + image);
    Log.d(TAG, "ViewHolder: name:" + name);
  }
}

public CatAdapter(List<Cat> cats) {
  this.cats = cats;
}


@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.cat_item, parent, false);

  final ViewHolder holder = new ViewHolder(view);
  holder.catView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
      int position = holder.getAdapterPosition();
      Cat cat = cats.get(position);
      Toast.makeText(v.getContext(), "你點(diǎn)擊了 View " + cat.getName(), Toast.LENGTH_SHORT).show();
    }
  });

  holder.image.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
      int position = holder.getAdapterPosition();
      Log.d(TAG, "onClick: position:" + position);
      Cat cat = cats.get(position);
      Toast.makeText(v.getContext(), "你點(diǎn)擊了圖片 " + cat.getName(), Toast.LENGTH_SHORT).show();
    }
  });
  return holder;
}

我們?yōu)樽钔鈱拥牟季峙c ImageView 都注冊了點(diǎn)擊事件，這就是 RecyclerView 的靈活之處。