Android基礎入門之dataBinding的簡單使用教程

Posted on by

前言

dataBinding是實現 view 和 data 綁定的工具，把數據映射到 view 的 xml中，可以在 xml 佈局文件中實現 view 的賦值，方法調用。使用 DataBinding 後，我們不用再寫 findViewById，不用再獲取控件對象，不用再設置監聽，可以節省我們 activity 中的很多獲取控件，賦值，添加監聽所需要的代碼。

可以說MVP + DataBinding就是MVVC（關於MVC，MVP，MVVC的區別可看往期文章）

1.前期準備

1.1打開dataBinding

image-20220602080856696

1.2修改佈局文件

選中佈局文件的第一行，按alter+enter就會彈出提示，默認選中data binding layout

AndroiddataBinding

image-20220602140306689

改造好的的新的佈局文件裡最大的變化就是多瞭一對<data></data>標簽；很容易想到這是為瞭實現佈局文件裡數據和佈局的分離，以及更好的實現數據與視圖的雙向綁定（這裡文章後面會慢慢介紹）

image-20220602142624501

1.3修改Activity方法

修改好佈局文件之後，還需要對Activity文件做修改

使用瞭dataBinding之後，編譯器會自動幫我們生成一個類名+Binding的新類，這其實是編譯器幫我們把佈局文件轉換成瞭一個java文件，可以看到我們通過ctrl+鼠標左鍵點擊這個類可以直接訪問到佈局文件

image-20220602140519092

AndroiddataBinding2

除此之外還需要為mainBinding這個對象賦初值，同樣是通過setContentView方法，不過要傳入兩個參數，前者是Activity類，後者是佈局文件的id

mainBinding=DataBindingUtil.setContentView(this,R.layout.activity_main);

image-20220602141039360

image-20220602081156094

2.DataBinding的使用

2.1屬性更新

那麼如何使用dataBingding呢？

我們先在佈局文件中新建幾個控件，這裡我的兩個控件：文本控件的id是textview，按鈕控件的id是button

image-20220602141418203

回到Activity中，我們通過mainBInding對象可以看到，其下有兩個值，textView和button，這正是我們剛剛兩個組件的id，所以通過mainBinding對象我們可以輕松的取到我們佈局文件裡的組件，不再需要findViewById瞭

通過mainBinding獲取到組件同樣的可以設置這些控件的各種屬性

image-20220602142247143

2.2<data>標簽

之前有提到在<data></data>標簽中定義數據

在<androidx.constraintlayout.widget.ConstraintLayout>中定義佈局並且綁定數據，這類似於前端vue框架中的數據視圖雙向綁定

2.2.1簡單數據的定義與綁定

那麼如何在data標簽中定義數據呢？

通過標簽，定義數據的名字name和類型type，這個類型可以是java中的所有基本類型

image-20220602144940501

然後到佈局中，用插值表達式將數據替代掉

image-20220602145243458

不過現在什麼也不會顯示，因為這兩個變量隻定義瞭，沒有賦值

image-20220602145419501

看到這，我們也明白data標簽的好處之一瞭，數據的定義都在data標簽中，而constraint中就隻管佈局，通過插值表達式來綁定數據，不會出現數據。

那麼data標簽裡的數據又如何初始化賦值呢？

這部分邏輯操作就交給Activity瞭。每定義一個varible，在佈局的Binding類中都會生成此變量的get和set方法，通過這兩個方法我們對數據進行初始化和更新。

image-20220602145847676

image-20220602150141004

所以有瞭dataBinding我們極大的減輕瞭Activity所要做的操作，Activity可以更專註於對數據與邏輯的處理，而UI的獲取與數據和UI的綁定都交給瞭佈局文件。

2.2.2復雜數據的定義與綁定

我們嘗試一下類類型的數據的定義與綁定

先定義一個簡單的實體類，簡單的寫兩個屬性

image-20220602150900388

在data中定義一個類變量，name屬性的同樣是這個變量的名字，type屬性就是這個包名.類名

image-20220602151129993

數據的綁定也是一樣的，通過類變量的名字.屬性，所以我們可以把類變量person看成Person類new 出來的一個對象

image-20220602151424656

回到Activity中對類變量進行初始化，運行可以看到UI上的數據已經更新瞭

image-20220602152029525

2.3事件綁定

dataBinding可以把事件以數據的形式綁定到佈局文件中

2.3.1點擊事件綁定

首先我們在Activity中定義一個內部類

image-20220602152649237

然後在data標簽中定義這個內部類的變量

image-20220602152748209

通過onClick屬性實現事件的綁定，值得註意的是myclick.onClick方法後沒有括號；這樣簡單的幾行代碼就實現瞭事件的綁定。用戶每點擊一次按鈕都會調用MyClick類中的onClick()方法

 android:onClick="@{myclick.onClick}"

image-20220602152950737

而Activity隻需要做的事情就是初始化這個點擊事件。因為此時事件已經被當成數據在使用瞭，通過set方法設置Myclick的值即可。然後打印日志查看運行效果

mainBinding.setMyclick(new MyClick());

image-20220602153418460

可以看到每點擊一次按鈕都會打印一次日志，說明調用成功

image-20220602153650965

2.3.2點擊事件回傳數據

我們看到onClick()方法中，我們傳入的是view參數，那可以傳其他參數嗎？

public class MyClick{
        public void onClick(View view){
            Log.i("myclick", "onClick: 點贊成功！");
        }
    }

當然是可以的而且我們是通過這一種方法事件點擊回傳數據。如我們把Person作為參數傳入，並綁定點擊事件，那麼用戶點擊按鈕，又可以將數據傳回到Activity中。

改造一下onClick()方法，傳入參數改為Person

image-20220602155027810

並在佈局文件中重新綁定，這裡綁定事件也有點不同瞭，需要用到lambda表達式

android:onClick="@{()->myclick.onClick(person)}"

image-20220602155110852

點擊按鈕，可以看到把person中的數據傳瞭回來；

image-20220602154925534

2.3.3動態改變對象數據在控件上顯示

默認情況下，在點擊事件監聽方法中修改person對象的值並不會修改數據在控件上的顯示

image-20220604205309233

如果我們要實現事件監聽動態去改變控件上的數據的話，我們需要對Person類動一動手腳

讓Person類繼承BaseObservable類，並為每個屬性生成get和set方法

image-20220604205729905

在點擊事件監聽方法中通過調用set方法設置新的值，來修改person對象的值並在控件上的顯示

AndroiddataBinding3

2.3.4動態改變基本數據在控件上顯示

首先在Activity中定義一個name變量，不過需要使用ObservableField類包裝

image-20220604212240287

其後在data標簽中定義一個name變量，並將其綁定在一個新的文本控件上。

這裡值得註意的是在<>符號裡不能再出現<>，所以我們使用轉義符&lt;和&gt;

image-20220604212453661

最後在單擊事件方法中更新name的值，這個值就會動態的更新在界面上

image-20220604212559085

AndroiddataBinding4

2.4與輸入控件結合

首先在界面中添加一個新的輸入控件，並為其綁定一個變量，這裡我就綁定name變量。那麼我們剛剛把name變量綁定在一個文本控件上，現在又把name綁定在一個輸入控件上。那麼我們在輸入控件中對name變量的改變會及時更新顯示在文本控件上嗎？

image-20220604213107804

image-20220604213200235

當然是可以的不夠我們的數據綁定要做一個小小的修改，僅僅添加瞭一個等於符號，那這個實時輸入顯示的功能就實現啦！！！

 android:text="@={name}"

image-20220604213625115

動圖看一下效果

AndroiddataBinding5

2.5與圖片控件結合

通過dataBinding和imageView和Glide的結合使用，可以很方便的加載一張網絡圖片

第一步我們還是先在佈局文件中添加一個圖片控件

image-20220604214416733

然後添加Glide依賴和網絡請求權限

  //引入第三方庫glide
    implementation 'com.github.bumptech.glide:glide:4.13.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.13.0'

image-20220604214727257

然後再Activity中創建一個靜態的公共的方法，傳入imageView和網絡圖片的url兩個參數；並為其添加一個註解BindingAdapter()

@BindingAdapter("imageUrl")
    public static void bindImageUrl(ImageView view,String url){
        Glide.with(view)
                .load(url)
                .into(view);
    }

image-20220604215109425

然後在佈局文件中就出現瞭一個imageUrl的屬性，通過這個屬性我們為我們的圖片組件動態的添加網絡圖片。這裡為瞭方便我還是綁定@{name}，在Activity中將name初始化為一個圖片的url

image-20220604215312934

image-20220604215823875

image-20220604215844620

這其實是我們為控件自定義瞭一個屬性，名字叫imageUrl，（其實就是註解裡的那個參數，你取這個自定義的屬性叫什麼它就叫什麼）

總結

到此這篇關於Android基礎入門之dataBinding的簡單使用的文章就介紹到這瞭,更多相關Android dataBinding使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：