美文网首页android开发技巧
DataBinding入门(一)基于MVVM+DataBindi

DataBinding入门(一)基于MVVM+DataBindi

作者: littlefogcat | 来源:发表于2020-06-08 19:33 被阅读0次

    观摩了Google官方的DataBinding项目architecture-samples,实践出真知,用一个例子来阐述DataBinding最简单的用法。

    Github地址:https://github.com/LittleFogCat/DataBindingDemo

    功能:输入股票代码,查询当前价格和涨幅。


    demo

    MVVM+DataBinding+OkHttp,使用的腾讯股票接口http://qt.gtimg.cn/q=sh600519

    1. 新建模块simpledatabindingkt

    2. 在module的build.gradle中启用databinding并添加Java8支持

    如果不添加Java8支持,会出现莫名其妙的错误。

    android {
        ...
    
        buildFeatures {
            dataBinding = true
        }
        compileOptions {
            sourceCompatibility JavaVersion.VERSION_1_8
            targetCompatibility JavaVersion.VERSION_1_8
        }
    }
    

    3. 创建StockViewModel类和StockRepository类

    • StockRepository用于调用网络api获取数据。
    class StockRepository {
        companion object {
            const val URL_PREFIX = "http://qt.gtimg.cn/q="
        }
    
        fun getStockInfo(code: String, callback: Callback) {
            val realUrl = URL_PREFIX + code
            HttpUtil.httpGet(realUrl, callback)
        }
    
    }
    
    • StockViewModel处理业务逻辑。这里定义了两个被观察者Observable:用于观察请求到的股票信息的stockInfoObservable和用于观察加载状态的refreshingObservable
    class StockViewModel() {
        companion object {
            const val TAG = "StockViewModel"
        }
    
        private val repository = StockRepository()
    
        val stockInfoObservable = ObservableField<StockInfo>()
        val refreshingObservable = ObservableBoolean(false)
        
        fun queryStock(code: String) {
            // 处理网络请求,略
        }
    
    }
    

    这是一个典型的观察者模式;在第5节中View和ViewModel绑定之后,布局中的内容就会因为Observable的更新而更新了。

    跟MVP架构相比,MVVM更加激进和简洁:它去掉了许多复杂的接口,ViewModel也不像Presenter一样持有View的实例——而是使用观察者模式进行数据的更新。这样的好处是,ViewModel再也不用感知View的存在,只需要关心自己的业务逻辑,而不用关心View的具体实现或者手动去更新状态。从某种意义上来讲,MVVM可以看成MVP的进一步解耦,因为在MVP中,Presenter需要持有View的引用,并且更新它的状态。

    4. 修改主布局activity_main.xml文件

    将原始xml布局用<layout>标签包裹起来,然后在其中加入一个<data>标签,这个xml文件就被识别为DataBinding布局文件。然后build一下,就可以自动生成binding类了。
    <data>中的<variable>标签表示可以在xml中使用的变量,这里定义了一个StockViewModel类型的变量viewmodel,这个xml就可以访问viewmodel的成员了。这个viewmodel变量是在哪里初始化的呢?这在5中会说明。

    简化后布局如下:

    <layout xmlns:tool="http://schemas.android.com/tools">
    
        <data>
    
            <import type="android.view.View" />
    
            <variable
                name="viewmodel"
                type="top.littlefogcat.simpledatabindingkt.StockViewModel" />
    
        </data>
    
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
    
                <EditText
                    android:id="@+id/input"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
    
                <Button
                    android:id="@+id/btnGo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="查询" />
            </LinearLayout>
    
            <TextView
                android:id="@+id/result"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text='@{viewmodel.refreshingObservable?"加载中...":(viewmodel.stockInfoObservable.name+"("+viewmodel.stockInfoObservable.code+")\n当前价:"+viewmodel.stockInfoObservable.price+"\n涨幅:"+viewmodel.stockInfoObservable.increase+"%")}' />
    
        </LinearLayout>
    </layout>
    
    xml

    build完之后,在build目录下面应该就可以看到自动生成的binding文件了。


    menu

    PS:在xml布局中,result这个TextView显示api返回的数据。可以看到其android:text中的表达式特别冗长,作为优化方案,可以使用BinderAdapter来处理。Android Developer - 提供自定义逻辑

    5. 绑定View和ViewModel

    将MainActivity做如下修改:

        private lateinit var mViewModel: StockViewModel
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            val binding = DataBindingUtil.setContentView<ActivityMainBinding>(
                this, R.layout.activity_main
            )
            mViewModel = StockViewModel()
            binding.viewmodel = mViewModel // 正是在这里绑定的
    
            btnGo.setOnClickListener {
                val code = input.text
                mViewModel.queryStock(code.toString())
                if (result.visibility != VISIBLE) {
                    result.visibility = VISIBLE
                }
            }
        }
    

    这里和普通的Activity不同,没有调用setContentView,而是使用DataBindingUtil.setContentView来绑定布局。DataBindingUtil.setContentView会返回一个Binding对象,也就是4中自动build出来的那个。
    4中xml布局的viewmodel变量,正是这句:binding.viewmodel = mViewModel赋值的。

    至此,我们将View和ViewModel进行了绑定。再补充一些细节,这个demo就完成了。

    1
    2

    遇到的问题

    报错:Invalid byte 3 of 3-byte UTF-8 sequence.

    相关文章

      网友评论

        本文标题:DataBinding入门(一)基于MVVM+DataBindi

        本文链接:https://www.haomeiwen.com/subject/kkxrtktx.html