关于DataBinding 与 include visiable

最近使用databinding发现, 在布局文件中使用了<include>标签, 想要去控制标签布局文件的显示与隐藏时会出现问题.

首先进行下问题重现:
布局文件:

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

    <data>

        <variable
            name="activity"
            type="com.example.databinding.MainActivity" />

        <variable
            name="testBean"
            type="com.example.databinding.TestBean" />

        <import type="android.view.View" />
    </data>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/ll_root"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.example.databinding.MainActivity">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="Hello World!" />

        <TextView
            android:background="@color/colorAccent"
            android:id="@+id/tv_dis"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:onClick="@{v -> activity.onClick(v)}"
            android:text="点击隐藏/显示include" />

        <include
            android:id="@+id/include"
            layout="@layout/include_layout"/>

    </LinearLayout>
</layout>

include 的布局:

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

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/colorPrimary"
    android:gravity="center"
    android:text="我是include后的textview" />

activity中的代码:

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    TestBean testBean;
    ActivityMainBinding viewDataBinding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        viewDataBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        testBean = new TestBean();
        viewDataBinding.setVariable(BR.testBean, testBean);
        viewDataBinding.setVariable(BR.activity, this);
    }

    @Override
    public void onClick(View v) {
        if (v.getId() == R.id.tv_dis) {
            testBean.setShowFlag(!testBean.getShowFlag());
            viewDataBinding.include.setVisibility(testBean.getShowFlag()? View.VISIBLE : View.GONE);
        }
    }

}

为了更好的 debug, 我这将visiablity 属性的设置通过代码实现
显示效果:

1.png
正常情况来说, 点击隐藏按钮, 应该只有最后一条 include 之后的被隐藏, 但是目前的代码点击值, 真个 linearlayout 的布局都隐藏了, 我们通过 debug 进行查看:
2.png
我们发现了一个很奇怪的事情, include 的布局 id databinding 在寻找时找到的对应的根布局文件, ll_root, 导致整个根布局都被隐藏掉了!!!!!
所以想使用 databinding 对 include 文件进行显示控制时,我们需要采取别的策略.

解决方法

对 include 的布局文件也使用 databinding

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

    <data>

        <variable
            name="testBean"
            type="com.example.databinding.TestBean" />

        <import type="android.view.View" />
    </data>

    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="我是include后的textview"
        android:visibility="@{testBean.showFlag? View.VISIBLE : View.GONE}" />
</layout>

在引入的布局中, 通过 databinding 进行数据赋值

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

    <data>

        <variable
            name="activity"
            type="com.example.databinding.MainActivity" />

        <variable
            name="testBean"
            type="com.example.databinding.TestBean" />
    </data>

    <LinearLayout 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"
        android:id="@+id/ll_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.example.databinding.MainActivity">
      .......
        <include
            android:id="@+id/include"
            layout="@layout/include_layout"
            app:testBean="@{testBean}" />
    // 这里的 app:后面的内容就是在 include 布局中需要的 data 名,需要保持一致
    </LinearLayout>
</layout>

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        viewDataBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        testBean = new TestBean();
        viewDataBinding.setVariable(BR.testBean, testBean);
        viewDataBinding.setVariable(BR.activity, this);
    }

    @Override
    public void onClick(View v) {
        if (v.getId() == R.id.tv_dis) {
            testBean.setShowFlag(!testBean.getShowFlag());
        }
    }

这时候我们点击隐藏, 终于可以实现理想的效果啦~~~

AEC1FEE6-BFB9-4D5F-979D-10CB97DC216A.png