iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Mobile Development

android studio 30天學習筆記系列 第 14

android studio 30天學習筆記-day 14-databinding 單向綁定

  • 分享至 

  • xImage
  •  

之前了解了UI的元件跟data之間是如何進行綁定的,那麼在當data發生改變時,又該如何及時讓data的變化反應在ui上呢?這時可以使用單向綁定的方法執行。

單向綁定更新UI:

1.使用BaseObservable
2.使用ObservableField

BaseObservable

刷新ui有2種方式:
1.notifyChange(); 更新所有的UI
2.notifyPropertyChanged(); 只更新綁定的UI

首先在model裡extends BaseObservable

public class DataItem extends BaseObservable {
    @Bindable //一定要新增@Bindable註解,不然編譯時會出錯
    private String name;
    private String Msg ;
    private boolean colorChange;

    public boolean isColorChange() {
        return colorChange;
    }

    public void setColorChange(boolean colorChange) {
        this.colorChange = colorChange;
        notifyChange();//在setter方法中加入notifyChange();
    }

    public String getMsg() {
        return Msg;
    }

    public void setMsg(String msg) {
        Msg = msg;
        notifyChange();//在setter方法中加入notifyChange();
    }

    @Bindable
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
        notifyChange();//在setter方法中加入notifyChange();
    }
}

在UI跟DATA做綁定

<TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@{dataItem.name}"
           android:textSize="40sp"/>
           
<TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@{dataItem.msg}"
           android:textSize="40sp"/>
           
<Button
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:onClick="onSendMsg"
           android:text="click1"
           android:textSize="40sp" />
           
<Button
           android:layout_width="50sp"
           android:layout_height="50sp"
           android:layout_marginLeft="180dp"
           app:heart="@{dataItem.colorChange}" />

MainActivity2的部分

public class MainActivity2 extends AppCompatActivity{
    ActivityMain2Binding main2Binding;
    DataItem dataItem;
    ClickHandler handler;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        init();

    }
    private void init() {
        main2Binding=DataBindingUtil.setContentView(this,R.layout.activity_main2);
        dataItem=new DataItem();
        main2Binding.setDataItem(dataItem);
        
        handler=new ClickHandler(MainActivity2.this);
        main2Binding.setHandler(handler);
    }

    public void onSendMsg(View view) {
        if (!dataItem.isColorChange()) {
            dataItem.setName("eles123");
            dataItem.setMsg("Welcome eles's note.");
            dataItem.setColorChange(true);
        }else {
            dataItem.setColorChange(false);
            dataItem.setName("eles");
            dataItem.setMsg("hello");
        }
 }

這樣就完成了BaseObservable的使用方法了

那麼接下來換ObservableField

使用ObservableField

ObservableField這個類是接收泛型,可以直接更新UI
先建立一個model

public class DataItem2 {
    public final ObservableField<String> name=new ObservableField<>();
    public final ObservableField<String> Msg=new ObservableField<>();
}

xml都差不多

 <variable
            name="observableData2"
            type="com.example.newtest.databindView.DataItem2" />
            
  <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{observableData2.name}"
            android:textSize="40sp"/>          

activity

 public void click2(View view) {
        count=(int)(Math.random()*10)+1 ;//設亂數
        dataItem2.name.set("eles"+count);
    }

使用ObservableField的set方法就可以看到更新UI的效果了。


上一篇
android studio 30天學習筆記-day 13-介紹databinding BindingAdapter
下一篇
android studio 30天學習筆記-day 15-databinding 雙向綁定
系列文
android studio 30天學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言