RecyclerView相比於ListView, 在回收重用時更具有靈活性, 也就是低耦合, 並且提供了擴充套件. 載入多個檢視時, 應該多用RecyclerView代替ListView.

那麼我們來看看這東西應該怎麼用? 比如生成一個瀑布流的檢視.

首先我們從一個HelloWorld寫起, 看看如何構建一個RecyclerView.

依賴

Gradle配置, 新增RecyclerView庫的依賴.

Java

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

1	compile'com.android.support:recyclerview-v7:+'

佈局

佈局檔案

Java

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

1234	<android.support.v7.widget.RecyclerViewandroid:id="@+id/test_recycler_view"android:layout_width="match_parent"android:layout_height="match_parent"/>

程式碼

LayoutManager: 管理RecyclerView的結構.
Adapter: 處理每個Item的顯示.
ItemDecoration: 新增每個Item的裝飾.
ItemAnimator: 負責新增\移除\重排序時的動畫效果.

LayoutManager\Adapter是必須, ItemDecoration\ItemAnimator是可選.

Java

/**
 * 初始化RecyclerView
 *
 * @param recyclerView 主控制元件
 */
private void initRecyclerView(RecyclerView recyclerView) {
    recyclerView.setHasFixedSize(true); // 設定固定大小
    initRecyclerLayoutManager(recyclerView); // 初始化佈局
    initRecyclerAdapter(recyclerView); // 初始化介面卡
    initItemDecoration(recyclerView); // 初始化裝飾
    initItemAnimator(recyclerView); // 初始化動畫效果
}

123456789101112

/** * 初始化RecyclerView * * @param recyclerView 主控制元件 */privatevoidinitRecyclerView(RecyclerView recyclerView){recyclerView.setHasFixedSize(true);// 設定固定大小initRecyclerLayoutManager(recyclerView);// 初始化佈局initRecyclerAdapter(recyclerView);// 初始化介面卡initItemDecoration(recyclerView);// 初始化裝飾initItemAnimator(recyclerView);// 初始化動畫效果}

LayoutManager

管理RecyclerView的佈局結構.

Java

private void initRecyclerLayoutManager(RecyclerView recyclerView) {
    // 錯列網格佈局
    recyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,
            StaggeredGridLayoutManager.VERTICAL));
}

12345

privatevoidinitRecyclerLayoutManager(RecyclerView recyclerView){// 錯列網格佈局recyclerView.setLayoutManager(newStaggeredGridLayoutManager(4,StaggeredGridLayoutManager.VERTICAL));}

提供了多種LayoutManager, 瀑布流使用錯列網格佈局.

Adapter

介面卡, 處理RecyclerView的Item事務.

Java

private void initRecyclerAdapter(RecyclerView recyclerView) {
    mAdapter = new MyAdapter(getData());
    recyclerView.setAdapter(mAdapter);
}

1234	privatevoidinitRecyclerAdapter(RecyclerView recyclerView){mAdapter=newMyAdapter(getData());recyclerView.setAdapter(mAdapter);}

對於Adapter, 我們需要展開來說, 先看看類.

Java

public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {

    private List<DataModel> mDataModels;
    private List<Integer> mHeights;

    MyAdapter(List<DataModel> dataModels) {
        if (dataModels == null) {
            throw new IllegalArgumentException("DataModel must not be null");
        }
        mDataModels = dataModels;
        mHeights = new ArrayList<>();
    }

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

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        DataModel dataModel = mDataModels.get(position);

        // 隨機高度, 模擬瀑布效果.
        if (mHeights.size() <= position) {
            mHeights.add((int) (100 + Math.random() * 300));
        }

        ViewGroup.LayoutParams lp = holder.getTvLabel().getLayoutParams();
        lp.height = mHeights.get(position);

        holder.getTvLabel().setLayoutParams(lp);

        holder.getTvLabel().setText(dataModel.getLabel());
        holder.getTvDateTime().setText(new SimpleDateFormat("yyyy-MM-dd", Locale.ENGLISH)
                .format(dataModel.getDateTime()));
    }

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

    public void addData(int position) {
        DataModel model = new DataModel();
        model.setDateTime(getBeforeDay(new Date(), position));
        model.setLabel("No. " + (int) (new Random().nextDouble() * 20.0f));

        mDataModels.add(position, model);
        notifyItemInserted(position);
    }

    public void removeData(int position) {
        mDataModels.remove(position);
        notifyItemRemoved(position);
    }

    /**
     * 獲取日期的前一天
     *
     * @param date 日期
     * @param i    偏離
     * @return 新的日期
     */
    private static Date getBeforeDay(Date date, int i) {
        Calendar calendar = Calendar.getInstance();
        calendar.setTime(date);
        calendar.add(Calendar.DAY_OF_YEAR, i * (-1));
        return calendar.getTime();
    }
}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172

publicclassMyAdapter extendsRecyclerView.Adapter<MyViewHolder>{privateList<DataModel>mDataModels;privateList<Integer>mHeights;MyAdapter(List<DataModel>dataModels){if(dataModels==null){thrownewIllegalArgumentException("DataModel must not be null");}mDataModels=dataModels;mHeights=newArrayList<>();}@OverridepublicMyViewHolder onCreateViewHolder(ViewGroup parent,intviewType){View itemView=LayoutInflater.from(parent.getContext()).inflate(R.layout.item_recycler_view,parent,false);returnnewMyViewHolder(itemView);}@OverridepublicvoidonBindViewHolder(MyViewHolder holder,intposition){DataModel dataModel=mDataModels.get(position);// 隨機高度, 模擬瀑布效果.if(mHeights.size()<=position){mHeights.add((int)(100+Math.random()*300));}ViewGroup.LayoutParams lp=holder.getTvLabel().getLayoutParams();lp.height=mHeights.get(position);holder.getTvLabel().setLayoutParams(lp);holder.getTvLabel().setText(dataModel.getLabel());holder.getTvDateTime().setText(newSimpleDateFormat("yyyy-MM-dd",Locale.ENGLISH).format(dataModel.getDateTime()));}@OverridepublicintgetItemCount(){returnmDataModels.size();}publicvoidaddData(intposition){DataModel model=newDataModel();model.setDateTime(getBeforeDay(newDate(),position));model.setLabel("No. "+(int)(newRandom().nextDouble()*20.0f));mDataModels.add(position,model);notifyItemInserted(position);}publicvoidremoveData(intposition){mDataModels.remove(position);notifyItemRemoved(position);}/** * 獲取日期的前一天 * * @param date 日期 * @param i 偏離 * @return 新的日期 */privatestaticDate getBeforeDay(Date date,inti){Calendar calendar=Calendar.getInstance();calendar.setTime(date);calendar.add(Calendar.DAY_OF_YEAR,i*(-1));returncalendar.getTime();}}

onCreateViewHolder建立ViewHolder.
onBindViewHolder繫結每一項資料.
getItemCount返回列表長度.

RecyclerView強制使用ViewHolder.

Java

public class MyViewHolder extends RecyclerView.ViewHolder {

    private TextView mTvLabel; // 標籤
    private TextView mTvDateTime; // 日期

    public MyViewHolder(View itemView) {
        super(itemView);
        mTvLabel = (TextView) itemView.findViewById(R.id.item_text);
        mTvDateTime = (TextView) itemView.findViewById(R.id.item_date);
    }

    public TextView getTvLabel() {
        return mTvLabel;
    }

    public TextView getTvDateTime() {
        return mTvDateTime;
    }

}

1234567891011121314151617181920

publicclassMyViewHolder extendsRecyclerView.ViewHolder{privateTextView mTvLabel;// 標籤privateTextView mTvDateTime;// 日期publicMyViewHolder(View itemView){super(itemView);mTvLabel=(TextView)itemView.findViewById(R.id.item_text);mTvDateTime=(TextView)itemView.findViewById(R.id.item_date);}publicTextView getTvLabel(){returnmTvLabel;}publicTextView getTvDateTime(){returnmTvDateTime;}}

在onCreateViewHolder方法, 建立類; 在onBindViewHolder方法, 繫結資料.

DataModel

Java

public class DataModel {

    private String mLabel;
    private Date mDateTime;

    public String getLabel() {
        return mLabel;
    }

    public void setLabel(String label) {
        mLabel = label;
    }

    public Date getDateTime() {
        return mDateTime;
    }

    public void setDateTime(Date dateTime) {
        mDateTime = dateTime;
    }
}

123456789101112131415161718192021

publicclassDataModel{privateStringmLabel;privateDate mDateTime;publicStringgetLabel(){returnmLabel;}publicvoidsetLabel(Stringlabel){mLabel=label;}publicDate getDateTime(){returnmDateTime;}publicvoidsetDateTime(Date dateTime){mDateTime=dateTime;}}

ItemDecoration

項的裝飾, 比如ListView中的分割線, 在本例中, 左右兩條粉線.

Java

private void initItemDecoration(RecyclerView recyclerView) {
    recyclerView.addItemDecoration(new MyItemDecoration(this));
}

123	privatevoidinitItemDecoration(RecyclerView recyclerView){recyclerView.addItemDecoration(newMyItemDecoration(this));}

ItemDecoration, 注意parent和child的使用方式.

使用 RecyclerView 控制元件實現瀑布流

依賴

佈局

程式碼

LayoutManager

Adapter

ItemDecoration

相關推薦