RecyclerView的使用（二）

上篇博客講了如何導入RecyclerView 。

本章將告訴小伙伴們怎么使用RecyclerView ：

第一步：在布局中使用RecyclerView並且綁定控件；

第二步：自定義Adapter；（繼承自RecyclerView.Adapter）

第三步：使用LinerLayoutManager控制顯示樣式；

（二、三順序可調）

 

第一步：

在布局中使用：

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

 </android.support.v7.widget.RecyclerView>

控件的綁定很簡單就不說了。

下面要編寫需要展示的item的樣式，為了簡單我們就顯示一個TextView，別的內容大家可以自己定制：

<?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="70dp"
    android:background="#ff00ff"
    android:layout_margin="2dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/recycle_tv"
        android:textSize="20dp"
        android:gravity="center"
        android:layout_width="72dp"
        android:layout_height="match_parent" />
</LinearLayout>

布局的內容很也簡單，唯一需要注意的是因為是為item布局所以高度千萬不能設置成match_parent，一定要固定一個高度。

創建一些文字內容填充item（模擬從網絡取來的數據）

 private void initdata() {
        mData = new ArrayList<String>();
        for (int i = 0; i < 43; i++) {
            mData.add("item" + i);
            Log.i(TAG, "initdata: item" + i);
        }
    }

mData是數據源（在前面定義過了）。

綁定控件並控制RecyclerView的顯示效果：

private void initview() {

        mRecycleView = (RecyclerView) findViewById(R.id.recycleview);

        myAdapter = new MyAdapter(this, mData);
        mRecycleView.setAdapter(myAdapter);//設置適配器


        //設置布局管理器 , 將布局設置成縱向
        LinearLayoutManager linerLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
        mRecycleView.setLayoutManager(linerLayoutManager);

        //設置分隔線
        //mRecycleView.addItemDecoration(new DividerItemDecoration(this , DividerItemDecoration.VERTICAL_LIST));

        //設置增加或刪除條目動畫
        mRecycleView.setItemAnimator(new DefaultItemAnimator());

    }

細心的你一定發現了

MyAdapter這個方法根本沒定義，沒錯這個就是我們需要自定義的適配器。

mRecycleView.setLayoutManager()

這個方法用來控制RecyclerView顯示的樣式，參數就是可選的樣式：

參數是：　

new GridLayoutManager(this, 3)

顯示成一個擁有三列的GridView（效果還不賴是吧  ;-)  ）

　　

參數是：

new LinearLayoutManager(this)

顯示成一個垂直列表（ListView樣式）

參數是：

new StaggeredGridLayoutManager(5, StaggeredGridLayoutManager.HORIZONTAL)

橫向顯示（(⊙o⊙)… 跟我想的有點不一樣，應該是哪里出問題了。。。）

 

Adapter的編寫：

package com.guwei.a02recycleview;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

/**
 * Created by guwei on 16-7-28.
 */
public class MyAdapter extends RecyclerView.Adapter<MyViewHolder>{
    private LayoutInflater inflater;
    private Context mContext;
    private List<String> mDatas;

    //創建構造參數
    public MyAdapter(Context context , List<String> datas){
        this.mContext = context;
        this.mDatas = datas;
        inflater = LayoutInflater.from(context);
    }

    //創建ViewHolder
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = inflater.inflate(R.layout.recycleview_item , parent , false);
        MyViewHolder viewHolder = new MyViewHolder(view);
        return viewHolder;
    }

    //綁定ViewHolder
    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        //為textview 賦值
        holder.tv.setText(mDatas.get(position));
    }


    @Override
    public int getItemCount() {
        //Log.i("TAG", "mDatas "+mDatas);

        return mDatas.size();

    }

    //新增item
    public void addData(int pos){
        mDatas.add("新增");
        notifyItemInserted(pos);
    }

    //移除item
    public void deleateData(int pos){
        mDatas.remove(pos);
        notifyItemRemoved(pos);
    }
}
class MyViewHolder extends RecyclerView.ViewHolder{

    TextView tv;

    public MyViewHolder(View itemView) {
        super(itemView);

        tv = (TextView) itemView.findViewById(R.id.recycle_tv);
        tv.setTextSize(20);

    }
}

Adapter的編寫主要是要繼承自 RecyclerView.Adapter<holder>

看到啦？原來繼承BaseAdapter的時候還是建議使用ViewHolder的方法的。現在已經直接集成在RecyclerView.Adapter<holder>中了強制使用（這也是為你好！因為這樣更省資源，不需要每次都使用find方法。這個不是本次重點）。

然后重寫三個方法：

　　- onCreateViewHolder() //創建ViewHolder 該方法下指定我們自己定義的item 並綁定

　　- onBindViewHolder()    //綁定ViewHolder 該方法為綁定的自定義的item中的組件進行設置（比如我們例子中的TextView ， 使用set方法設置顯示的內容）

　　- getItemCount()　　　 //返回數據的大小

 //創建ViewHolder
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = inflater.inflate(R.layout.recycleview_item , parent , false);
        MyViewHolder viewHolder = new MyViewHolder(view);
        return viewHolder;
    }

    //綁定ViewHolder
    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        //為textview 賦值
        holder.tv.setText(mDatas.get(position));
    }


    @Override
    public int getItemCount() {
        //Log.i("TAG", "mDatas "+mDatas);

        return mDatas.size();

    }

前面說了ViewHolder是強制使用的，用法跟原來一樣：

class MyViewHolder extends RecyclerView.ViewHolder{

    TextView tv;

    public MyViewHolder(View itemView) {
        super(itemView);

        tv = (TextView) itemView.findViewById(R.id.recycle_tv);
        tv.setTextSize(20);

    }
}

RecyclerView還提供了一個刪除item的動畫，我們可以在adapter中實現該方法供調用：

 //新增item
    public void addData(int pos){
        mDatas.add("新增");
        notifyItemInserted(pos);
    }

    //移除item
    public void deleateData(int pos){
        mDatas.remove(pos);
        notifyItemRemoved(pos);
    }

調用的方法：

移除：

myAdapter.deleateData(1);

新增：

 myAdapter.addData(1);

參數為postion

 

MainActivity.java ：

package com.guwei.a02recycleview;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
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.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

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

public class MainActivity extends AppCompatActivity {

    public String TAG = "RECYCLE";
    private RecyclerView mRecycleView;
    private List<String> mData;
    private MyAdapter myAdapter;

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


        initdata();
        initview();
        toolbar();
    }

    private void initdata() {
        mData = new ArrayList<String>();
        for (int i = 0; i < 43; i++) {
            mData.add("item" + i);
            Log.i(TAG, "initdata: item" + i);
        }
    }

    private void initview() {

        mRecycleView = (RecyclerView) findViewById(R.id.recycleview);

        myAdapter = new MyAdapter(this, mData);
        mRecycleView.setAdapter(myAdapter);//設置適配器


        //設置布局管理器 , 將布局設置成縱向
        LinearLayoutManager linerLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
        mRecycleView.setLayoutManager(linerLayoutManager);

        //設置分隔線
        //mRecycleView.addItemDecoration(new DividerItemDecoration(this , DividerItemDecoration.VERTICAL_LIST));

        //設置增加或刪除條目動畫
        mRecycleView.setItemAnimator(new DefaultItemAnimator());

    }

    private void toolbar() {

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                myAdapter.addData(1);
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        switch (id) {
            case R.id.action_gridview:
                /**
                 * GridLayoutManager(xx1 , xx2);
                 * 參數1： content
                 * 參數2： 列數
                 * **/
                mRecycleView.setLayoutManager(new GridLayoutManager(this, 3));
                break;
            case R.id.action_listview:
                /**
                 * 默認樣式
                 *
                 * 垂直列表
                 * **/
                mRecycleView.setLayoutManager(new LinearLayoutManager(this));
                break;
            /**
             *水平顯示
             *
             * 參數1：列數
             * 參數2：水平顯示
             * **/
            case R.id.action_settings:
                mRecycleView.setLayoutManager(new StaggeredGridLayoutManager(5,
                        StaggeredGridLayoutManager.HORIZONTAL));
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

后面還有監聽事件的編寫