Android 安卓DataBinding（五）·单向绑定 ObservableCollection（集合使用）

文章目录

前景回顾
单向绑定

ObservableMap

ObservableMap 运行效果

ObservableList

ObservableList 运行效果

更新UI
更新UI运行效果

前景回顾

Android 安卓DataBinding（一）·基础
 Android 安卓DataBinding（二）·入门
 Android 安卓DataBinding（三）·单向绑定 BaseObservable
Android 安卓DataBinding（四）·单向绑定 ObservableField

上一期讲到 ObservableField 单向绑定，和 BaseObservable 相比之下，ObservableField 简单了许多，只需要用它的方法即可，提供了自动刷新UI的方法。
如果用到 Map 或者是 List，同样 DataBinding 还提供了 ObservableMap 和 ObservableList，下面来基本使用一下吧！

单向绑定

使用单向绑定刷新UI有三种

使用 BaseObservable
使用 ObservableField
使用 ObservableCollection

ObservableMap

写出布局文件，布局文件添加 android.databinding.ObservableMap 包，然后再使用variable标签引用：
还是一样，如果是int类型，要转成String类型，否则会报错！

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <import type="android.databinding.ObservableMap" />

        <!--注意这个地方，一定要用 "&lt;"和 "&gt;"，这里不支持尖括号-->
        <variable
            name="people"
            type="ObservableMap&lt;String,Object&gt;" />

    </data>

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF"
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/name1"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:background="#03A9F4"
            android:gravity="center"
            android:text='@{String.valueOf(people["NorthernBrain1"])}'
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:ignore="MissingConstraints" />

        <TextView
            android:id="@+id/name2"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:background="#03A9F4"
            android:gravity="center"
            android:text='@{people["NorthernBrain2"]}'
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/name1"
            tools:ignore="MissingConstraints" />

        <TextView
            android:id="@+id/name3"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:background="#03A9F4"
            android:gravity="center"
            android:text='@{people["NorthernBrain3"]}'
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/name2"
            tools:ignore="MissingConstraints" />

        <TextView
            android:id="@+id/name4"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:background="#03A9F4"
            android:gravity="center"
            android:text='@{String.valueOf(people["NorthernBrain4"])}'
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/name3"
            tools:ignore="MissingConstraints" />


    </android.support.constraint.ConstraintLayout>
</layout>

写一段demo，用到 ObservableMap<String,Object> ，如下放进去四条信息：

package com.lkdot.data;

import android.annotation.SuppressLint;
import android.databinding.DataBindingUtil;
import android.databinding.ObservableArrayMap;
import android.databinding.ObservableMap;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

import com.lkdot.data.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

    private ActivityMainBinding activityMainBinding;
    private ObservableMap<String, Object> people;

    @SuppressLint({"SetTextI18n", "InlinedApi"})
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        activityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);

        //这句不用管，是关于安卓状态栏的
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);

        people = new ObservableArrayMap<>();
        people.put("NorthernBrain1", 25);
        people.put("NorthernBrain2", "NorthernBrain2 = 26");
        people.put("NorthernBrain3", "NorthernBrain3 = 27");
        people.put("NorthernBrain4", 28);

        activityMainBinding.setPeople(people);

    }
}

ObservableMap 运行效果

在这里插入图片描述

ObservableList

布局文件稍微改动以下，导入 ObservableList ，老规矩，如果你用的是int类型的值，就转成String，这里是String类型的值：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <import type="android.databinding.ObservableList" />

        <!--注意这个地方，一定要用 "&lt;"和 "&gt;"，这里不支持尖括号-->
        <variable
            name="people"
            type="ObservableList&lt;String&gt;" />

    </data>

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF"
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/name1"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:background="#03A9F4"
            android:gravity="center"
            android:text='@{people[0]}'
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:ignore="MissingConstraints" />

        <TextView
            android:id="@+id/name2"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:background="#03A9F4"
            android:gravity="center"
            android:text='@{people[1]}'
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/name1"
            tools:ignore="MissingConstraints" />

        <TextView
            android:id="@+id/name3"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:background="#03A9F4"
            android:gravity="center"
            android:text='@{people[2]}'
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/name2"
            tools:ignore="MissingConstraints" />

        <TextView
            android:id="@+id/name4"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:background="#03A9F4"
            android:gravity="center"
            android:text='@{people[3]}'
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/name3"
            tools:ignore="MissingConstraints" />


    </android.support.constraint.ConstraintLayout>
</layout>

修改 MainActivity.java，稍微变动一下即可：

package com.lkdot.data;

import android.annotation.SuppressLint;
import android.databinding.DataBindingUtil;
import android.databinding.ObservableArrayList;
import android.databinding.ObservableList;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

import com.lkdot.data.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

    private ActivityMainBinding activityMainBinding;
    private ObservableList<String> people;

    @SuppressLint({"SetTextI18n", "InlinedApi"})
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        activityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);

        //这句不用管，是关于安卓状态栏的
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);

        people = new ObservableArrayList<>();
        people.add("NorthernBrain1");
        people.add("NorthernBrain2");
        people.add("NorthernBrain3");
        people.add("NorthernBrain4");

        activityMainBinding.setPeople(people);
    }
}

ObservableList 运行效果

在这里插入图片描述

更新UI

下面呢，我写出一个更新UI的操作，这里以 ObservableList 为例，Map也一样。
加上点击事件：

package com.lkdot.data;

import android.annotation.SuppressLint;
import android.databinding.DataBindingUtil;
import android.databinding.ObservableArrayList;
import android.databinding.ObservableList;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

import com.lkdot.data.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

    private ActivityMainBinding activityMainBinding;
    private ObservableList<String> people;

    @SuppressLint({"SetTextI18n", "InlinedApi"})
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        activityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);

        //这句不用管，是关于安卓状态栏的
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);

        people = new ObservableArrayList<>();
        people.add("NorthernBrain1");
        people.add("NorthernBrain2");
        people.add("NorthernBrain3");
        people.add("NorthernBrain4");

        activityMainBinding.setPeople(people);
        
        //注意加上这一句，否则你的事件没反应
        activityMainBinding.setChangeui(new ChangeUI());
    }

    public class ChangeUI {
        public void changeName() {
            for (int i = 0, size = people.size(); i < size; i++) {
                people.set(i, "改变UI：" + i);
            }
        }
    }
}

布局文件增加按钮和事件：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <import type="android.databinding.ObservableList" />

        <import type="com.lkdot.data.MainActivity.ChangeUI" />

        <!--注意这个地方，一定要用 "&lt;"和 "&gt;"，这里不支持尖括号-->
        <variable
            name="people"
            type="ObservableList&lt;String&gt;" />

        <variable
            name="changeui"
            type="ChangeUI" />

    </data>

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF"
        tools:context=".MainActivity">
		
		<!--此处省略，参照上面的布局文件-->
        ......

		<!--这里是增加的按钮和事件（我没有用Button的习惯）-->
        <TextView
            android:id="@+id/cahngeUI"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:background="#FFB51A"
            android:gravity="center"
            android:onClick="@{()->changeui.changeName()}"
            android:text="更新UI"
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/name4" />

    </android.support.constraint.ConstraintLayout>
</layout>