[译]深入研究ViewBinding 在 < include>, < merge>, adapter, fragment, 和 activity 中使用View Binding

原文：Exploring View Binding in Depth — Using ViewBinding with < include>, < merge>, adapters, fragments, and activities

作者：Somesh Kumar

译者：fly_with24

Image Source: Google I/O 2019

谷歌在2019 I/O 大会中的 What’s New in Architecture Components 介绍了 view binding

在 What’s New in Architecture Components 中，有一个简短的关于view binding 的演讲，演讲中将 view binding 与现有解决方案进行了比较，并进一步讨论了为什么view binding 比 data binding 或 Kotlin synthetics 等现有解决方案更好。

对我而言，Kotlin synthetics 运行良好，但是没有编译时的安全性，这意味着所有 ID 都位于全局命名空间中。因此，如果您使用的 ID 具有相同的名称，并且从错误的布局导入 ID，由于ID不是当前布局的一部分，导致崩溃，除非您将应用程序运行到该布局，否则无法提前知道这一点。

这篇文章很好地概述了 Kotlin synthetics 的问题

The Argument Over Kotlin Synthetics

View Binding 将在 Android Studio 3.6 稳定版中提供（译者注：当前Android Studio稳定版版本为3.5.3），如果您想要使用它，您可以下载 Android Studio 3.6 RC3 或者 Android Studio 4.0 Canary 9

view binding 的主要优点是所有绑定类都是由Gradle插件生成的，因此它对构建时间没有影响，并且具有编译时安全性（我们将在示例中看到）。

首先，启用 view binding, 我们需要在 module 的build.gradle文件中添加以下内容：

// Android Studio 3.6
android {
    viewBinding {
        enabled = true
    }
}

// Android Studio 4.0
android {
    buildFeatures {
        viewBinding = true
    }
}

注意：视图绑定是逐模块启用的，因此，如果您具有多模块项目设置，则需要在每个 build.gradle 文件中添加以上代码。

如果要在特定的布局禁用 view binding，则需要在布局文件的根视图中添加 tools：viewBindingIgnore = “true”。

启用后，我们可以立即开始使用它，并且当您完成同步 build.gradle 文件时，默认情况下会生成所有绑定类。

它通过将XML布局文件名转换为驼峰式大小写并在其末尾添加 Binding 来生成绑定类。例如，如果您的布局文件名为 activity_splash，则它将生成绑定类为 ActivitySplashBinding。

如何使用它？

activity 中使用

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding: ActivitySplashBinding = ActivitySplashBinding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.tvVersionName.text = getString(R.string.version)
    }

我们有一个名为 activity_splash 的布局文件，里面有一个ID为 tvVersionName 的 TextView ，因此在使用view binding 时，我们要做的就是获取绑定类的引用，例如：

val binding: ActivitySplashBinding = ActivitySplashBinding.inflate(layoutInflater)

在 setContentView() 方法中使用 getRoot() ，该方法将返回布局的根布局。可以从我们创建的绑定类对象访问视图，并且可以在创建对象后立即使用它，如下所示：

binding.tvVersionName.text = getString(R.string.version)

在这里，绑定类知道 tvVersionName 是TextView，因此我们不必担心类型转换。

fragment 中使用

class HomeFragment : Fragment() {
    private var _binding: FragmentHomeBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        _binding = FragmentHomeBinding.inflate(inflater, container, false)
        return binding.root
    }
    override fun onDestroyView() {
        _binding = null
    }
}

在 fragment 中，使用 view binding 有些不同。我们需要传递 LayoutInflator，ViewGroup和一个 attachToRoot 布尔变量，这些变量是通过覆盖 onCreateView 获得的。

我们可以通过调用 binding.root 返回 view。您还注意到，我们使用了两个不同的变量 binding 和 _binding，并且 _binding 变量在 onDestroyView() 中设置为null。

这是因为该 fragment 的生命周期与 activity 的生命周期不同，并且该fragment 可以超出其视图的生命周期，因此如果不将其设置为null，则可能会发生内存泄漏。

另一个变量通过 !! 使一个变量为可空值而使另一个变量为非空值避免了空检查。。

在 RecyclerView adapter 中使用


class PaymentAdapter(private val paymentList: List<PaymentBean>) : RecyclerView.Adapter<PaymentAdapter.PaymentHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PaymentHolder {
        val itemBinding = RowPaymentBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return PaymentHolder(itemBinding)
    }

    override fun onBindViewHolder(holder: PaymentHolder, position: Int) {
        val paymentBean: PaymentBean = paymentList[position]
        holder.bind(paymentBean)
    }

    override fun getItemCount(): Int = paymentList.size

    class PaymentHolder(private val itemBinding: RowPaymentBinding) : RecyclerView.ViewHolder(itemBinding.root) {
        fun bind(paymentBean: PaymentBean) {
            itemBinding.tvPaymentInvoiceNumber.text = paymentBean.invoiceNumber
            itemBinding.tvPaymentAmount.text = paymentBean.totalAmount
        }
    }
}

row_payment.xml 是我们用于 RecyclerView item 的布局文件，对应生成的绑定类 RowPaymentBinding。

现在，我们所需要做的就是在onCreateViewHolder() 中调用 inflate() 方法生成 RowPaymentBinding 对象并传递到 PaymentHolder 主构造器中，并将 itemBinding.root 传递给 RecyclerView .ViewHolder() 构造函数。

处理`<include>`标签

view binding 可以与 <include> 标签一起使用。布局中通常包含两种 <include> 标签，带或不带<merge> 标签。

<inlude> 不带 <merge>标签

我们需要为<include> 分配一个 ID，然后使用该 ID 来访问包含布局中的视图。让我们来看一个例子。

app_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="?actionBarSize"
        android:background="?colorPrimary"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

main_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <include
        android:id="@+id/appbar"
        layout="@layout/app_bar"
        app:layout_constraintTop_toTopOf="parent" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

在上面的代码中，我们在布局文件中包括了一个通用工具栏，<include> 有一个 android:id=“@+id/appbar” ID，我们将使用它从 app_bar.xml 中访问工具栏并将其设置为我们的 action bar。

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding: MainLayoutBinding = MainLayoutBinding.inflate(layoutInflater)
        setContentView(binding.root)
        setSupportActionBar(binding.appbar.toolbar)
    }

<inlude> 带 <merge>标签

当在一个布局中包含另一个布局时，我们通常使用一个带有 <merge> 标记的布局，这有助于消除布局嵌套。

placeholder.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
    
    <TextView
        android:id="@+id/tvPlaceholder"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    
</merge>

fragment_order.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include layout="@layout/placeholder" />

</androidx.constraintlayout.widget.ConstraintLayout>

如果我们尝试为该 <include> 提供ID，view binding 不会在绑定类中生成ID，因此我们无法像使用普通 include 那样访问视图。

在这种情况下，我们有 PlaceholderBinding，它是 placeholder.xml（<merge> 布局文件）的自动生成的类。我们可以调用其bind()方法并传递包含它的布局的根视图。

  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
        binding = FragmentOrderBinding.inflate(layoutInflater, container, false)
        placeholderBinding = PlaceholderBinding.bind(binding.root)
        placeholderBinding.tvPlaceholder.text = getString(R.string.please_wait)
        return binding.root
  }

然后，我们可以从我们的类（如 placeholderBinding.tvPlaceholder.text）访问 placeholder.xml 内部的视图。

感谢阅读。希望收到您的评论。

Android Developer docs — view binding

译者补充

在 fragment 中使用 view binding 比较麻烦，译者提供一个 BaseFragment 的封装供大家参考

abstract class BaseFragment<T : ViewBinding>(layoutId: Int) : Fragment(layoutId) {
    private var _binding: T? = null

    val binding get() = _binding!!

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        _binding = initBinding(view)
        init()
    }

    /**
     * 初始化 [_binding]
     */
    abstract fun initBinding(view: View): T

    abstract fun init()
    
    override fun onDestroyView() {
        _binding = null
        super.onDestroyView()
    }
}

class HomeFragment : BaseFragment<FragmentHomeBinding>(R.layout.fragment_home) {

    override fun initBinding(view: View): FragmentHomeBinding = FragmentHomeBinding.bind(view)

    override fun init() {
        binding.viewPager.adapter = SectionsPagerAdapter(this)
        TabLayoutMediator(binding.tabs, binding.viewPager) { tab, position ->
            tab.text = TAB_TITLES[position]
        }.attach()
    }
}

关于我

我是 fly_with24