DataBinding 學習系列(6)最后的實戰(zhàn)---RecyclerView

前言#

想來想去,已經(jīng)不知道該補充什么了,俗話說的好,不實戰(zhàn)有個卵用,所以使用DataBinding來實現(xiàn)RecyclerView的列表效果,來為這次學習畫上完美的句號。

正文#

廢話不多說,為了實現(xiàn)效果,首先肯定是要把MainActivity的RecyclerView先放好,先看代碼:

package com.lzp.myapplication;

import android.databinding.DataBindingUtil;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import com.lzp.myapplication.databinding.ActivityMainBinding;

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

public class MainActivity extends AppCompatActivity {

    private ActivityMainBinding mBinder;

    private List<String> names;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mBinder = DataBindingUtil.setContentView(this, R.layout.activity_main);
        names = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            names.add("hahahahah" + i);
        }
        mBinder.setData(names);
    }

}

代碼非常的簡單,就是獲取ActivityMainBinding對象來對xml進行管理,然后setData(),把這個字符串列表設置進去。

那么就可以推斷出xml中肯定綁定了一個List<String>,然后RecyclerView應該使用了這個List<String>。

看xml代碼:

<?xml version="1.0" encoding="utf-8"?>
<layout>

    <data >

        <import type="java.util.List" />

        <variable
            name="data"
            type="List&lt;String&gt;" />
       
    </data>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recylerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:data="@{data}"/>

    </LinearLayout>
</layout>

果然和我們剛才推斷你的一樣,xml中綁定了List<String>,并且RecyclerView使用了自定義屬性app:data來使用這個List<String>。

我們都知道RecyclerView是沒有setData()這個方法的,所以這個方法肯定是需要我們來自定義的,所以打開我們的工具類,定義一下這個方法:

/**
 * Created by li.zhipeng on 2017/2/10.]
 *
 *      工具類
 */

public class Utility {

    @BindingAdapter("bind:image")
    public static void loadImage(ImageView image, Drawable resId){
        image.setImageDrawable(resId);
    }

    @BindingAdapter("bind:data")
    public static void setData(RecyclerView recyclerView, List<String> data){
        recyclerView.setLayoutManager(new LinearLayoutManager(recyclerView.getContext(), LinearLayoutManager.VERTICAL, false));
        recyclerView.setAdapter(new TestBindingAdapter(recyclerView.getContext(), data));
    }
}

工具類中有兩個方法:

1、loadImage,綁定image屬性,為imageView設置圖片,這個方法之后再Adapter中會使用。

2、setData,綁定data屬性,為RecyclerView設置adapter。

這個setData()肯定是就是剛才xml中RecyclerView使用的方法了,通過app:data屬性來設置adapter。

那么就剩Adapter的內(nèi)容沒看了,打開TestBindingAdapter:

package com.lzp.myapplication.adapter;

import android.content.Context;
import android.databinding.DataBindingUtil;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.ViewGroup;

import com.lzp.myapplication.R;
import com.lzp.myapplication.databinding.TestItemBinding;

import java.util.List;

/**
 * Created by li.zhipeng on 2017/2/13.
 * <p>
 * 測試用的BindingAdapter
 */

public class TestBindingAdapter extends RecyclerView.Adapter<TestBindingHolder> {

    private List<String> data;

    private Context context;

    public TestBindingAdapter(Context context, List<String> list) {
        this.context = context;
        this.data = list;
    }

    @Override
    public TestBindingHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        TestItemBinding binding = DataBindingUtil.inflate(LayoutInflater.from(context), R.layout.test_item, parent, false);
        return new TestBindingHolder(binding);
    }

    @Override
    public void onBindViewHolder(TestBindingHolder holder, int position) {
        holder.getBinding().setListName(data.get(position));
        // 立刻刷新界面
        holder.getBinding().executePendingBindings();
    }

    @Override
    public int getItemCount() {
        return data == null ? 0 : data.size();
    }
}

TestBindingAdapter中的代碼也不多,跟MainActivity中的代碼大同小異,有一點需要強調(diào)

 holder.getBinding().executePendingBindings();

這句話用來立刻刷新界面,防止列表更新的不及時,導致出現(xiàn)的數(shù)據(jù)錯亂的問題。

貼出TestItemBinding的代碼:

package com.lzp.myapplication.adapter;

import android.support.v7.widget.RecyclerView;

import com.lzp.myapplication.databinding.TestItemBinding;

/**
 * Created by li.zhipeng on 2017/2/13.
 *
 *     測試用的BindingHolder
 */

public class TestBindingHolder extends RecyclerView.ViewHolder{

    private TestItemBinding binding;

    public TestBindingHolder(TestItemBinding binding) {
        super(binding.getRoot());
        this.binding = binding;
    }

    public TestItemBinding getBinding() {
        return binding;
    }

    public void setBinding(TestItemBinding binding) {
        this.binding = binding;
    }
}

沒什么可講的,非常簡單,現(xiàn)在只剩下test_item.xml了,估計大家也都猜得到里面有什么,跟activity_main.xml沒什么不同:

<?xml version="1.0" encoding="utf-8"?>
<layout>

    <data>

        <variable
            name="listName"
            type="String" />
    </data>


    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            app:image="@{@drawable/ic_launcher}"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="15dp"
            android:text="@{list_name, default=111}" />

    </LinearLayout>

</layout>

綁定了一個listName的字符串,然后通過自定義的image屬性來設置圖片,這些之前也都看過了,這樣一個簡單的例子就結束了,放一張運行的結果圖片:


這里寫圖片描述

總結#

通過一個實現(xiàn)RecyclerView和DataBinding結合使用的例子,可以感受到,DataBinding幫助我們在布局和功能的分離上大大的提升了一個檔次,java代碼只關注功能,xml值關注布局顯示,這也是一開始android在設計時最初的目的。

實戰(zhàn)中,經(jīng)常反復使用的功能也就那么多,并沒有一開始看上去那么高冷,越是使用,越是能感受到DataBinding的魅力。

最后感謝在網(wǎng)上樂于奉獻自己寶貴知識的前輩們,為DataBinding的學習提供了眾多的學習資料,感謝Android的設計大師們一直的努力,為我們開發(fā)者不斷的完善開發(fā)的流程,簡化代碼結構。

希望我們一起不斷的提高自己的水平,打造更多更好更棒的產(chǎn)品。

Demo下載鏈接(里面包含了之前學習的被注釋的代碼)

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,619評論 6 539
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,155評論 3 425
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,635評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,539評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,255評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,646評論 1 326
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,655評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,838評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,399評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,146評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,338評論 1 372
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,893評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,565評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,983評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,257評論 1 292
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,059評論 3 397
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,296評論 2 376

推薦閱讀更多精彩內(nèi)容