移动架构-MVVM框架
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开
MVVM的优点
可重用性:你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。 在Android中,布局里可以进行一个视图逻辑,并且Model发生变化,View也随着发生变化
低耦合:以前Activity、Fragment中需要把数据填充到View,还要进行一些视图逻辑。现在这些都可在布局中完成,甚至都不需要再Activity、Fragment去findViewById。这时候Activity、Fragment只需要做好的逻辑处理就可以了
MVVM
角色
View: 对应于Activity和XML,负责View的绘制以及与用户交互
Model: 实体模型
ViewModel: 负责完成View与Model间的交互,负责业务逻辑
数据驱动
在常规的开发模式中,数据变化需要更新UI的时候,需要先获取UI控件的引用,然后再更新UI。获取用户的输入和操作也需要通过UI控件的引用。在MVVM中,这些都是通过数据驱动来自动完成的,数据变化后会自动更新UI,UI的改变也能自动反馈到数据层,数据成为主导因素。这样MVVM层在业务逻辑处理中只要关心数据,不需要直接和UI打交道,在业务处理过程中简单方便很多
MVVM是一种架构模式,而DataBinding是一个实现数据和UI绑定的框架,是构建MVVM模式的一个工具
DataBinding支持的表达式
- 数学表达式:
+ - / * %
- 字符串拼接:
+
- 逻辑表达式:
&& ||
- 位操作符:
& | ^
- 一元操作符:
+ - ! ~
- 位移操作符:
>> >>> <<
- 比较操作符:
== > < >= <=
instanceof
- 分组操作符:
()
- 字面量:
character, String, numeric, null
- 强转、方法调用
- 数组访问:
[]
- 三元操作符:
?:
android:padding="@{large? @dimen/largePadding : @dimen/smallPadding}"
支持dimen
,还支持color
、string
、drawable
、anim
等 - 聚合判断(
Null Coalescing Operator
)语法??
android:text="@{user.userName ?? user.realName}"
意思是如果userName为null
,则显示realName
- 字符拼接
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{`username is :`+user.username}"/>
这里的字符拼接不是用单引号哦,用的是ESC按键下面那个按键按出来的。目前DataBinding中的字符拼接还不支持中文
官方手册:https://developer.android.com/tools/data-binding/guide.html
MVVM用法
模板写法
<layout xmlns:android="http://schemas.android.com/apk/res/android" >
<data>
<!--此处定义该布局要用到的数据的名称及类型-->
</data>
<!--此处按照常规方式定义要使用的布局,其中可以使用binding表达式代表属性值,所谓binding表达式,指形如"@{user.firstName}"的表达式-->
</layout>
自定义Binding类名(Custom Binding Class Names)
- 以为根节点布局,
android studio
默认会自动产生一个Binding类。类名为根据布局名产生,如一个名为activity_simple
的布局,它的Binding类为ActivitySimpleBinding
,所在包为app_package/databinding
- 也可以自定义Binding类的名称和包名
<data class="CustomBinding"></data> 在app_package/databinding下生成CustomBinding
<data class=".CustomBinding"></data> 在app_package下生成CustomBinding
<data class="com.example.CustomBinding"></data> 明确指定包名和类名
Layout布局中Includes 标签使用
<include layout="@layout/name"
bind:user="@{user}"/>
BaseObservable的方式
使User继承BaseObservable
,在get方法上加上注解@Bindable
,会在BR(BR类自动生成的)生成该字段标识(int)
set方法里notifyPropertyChanged(BR.field);
@Bindable
public String getUserName() {
return userName;
}
理解实例
在项目gradle的android标签下中添加
dataBinding{
enabled true
}
编写测试类
public class User {
private String name;
private String password;
public User(String name, String password) {
this.name = name;
this.password = password;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
编写布局
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<data>
<!--第一种引入方式-->
<variable
name="user"
type="com.cj5785.mvvmdesign.User" />
<!--第二种引入方式-->
<!--<import type="com.cj5785.mvvmdesign.User" />-->
<!--<variable-->
<!--name="user"-->
<!--type="User" />-->
<!--如果有多个相同model,可以取别名-->
<!--<import alias="typeUser" type="com.cj5785.mvvmdesign.User" />-->
<!--<variable name="user" type="typeUser" />-->
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
android:text="@{user.name}" /><!--显示字段-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
android:text="@{user.password}" /><!--显示字段-->
</LinearLayout>
</layout>
在Activity中调用测试
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 使用MVVM时候,这里不能使用setContentView
// setContentView(R.layout.activity_main);
//ActivityMainBinding在编译时自动生成
ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
User user = new User("jack","123456");
binding.setUser(user);
}
}
这样就完成了MVVM模型最简单的运用
此时就显示出了设置的name和password
接下来测试数据变化更新UI
修改测试类
public class User extends BaseObservable{
private String name;
private String password;
public User(String name, String password) {
this.name = name;
this.password = password;
}
@Bindable
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
notifyPropertyChanged(BR.name);
}
@Bindable
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
notifyPropertyChanged(BR.password);
}
}
在Activity中使用延迟设置
public class MainActivity extends AppCompatActivity {
User user;
Handler handler = new Handler();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 使用MVVM时候,这里不能使用setContentView
// setContentView(R.layout.activity_main);
ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
user = new User("jack", "123456");
binding.setUser(user);
handler.postDelayed(new Runnable() {
@Override
public void run() {
user.setName("Bob");
user.setPassword("654321");
}
}, 5000);
}
}
然后可以看到在经历5秒以后,文字被改变了
使用MVVM框架加载网络图片又怎么做呢
首先导入com.squareup.picasso:picasso
依赖
在User中添加相应的图片获取方法
public class User extends BaseObservable{
private String name;
private String password;
private String header;
public User(String name, String password,String header) {
this.name = name;
this.password = password;
this.header = header;
}
@BindingAdapter("bind:header")
public static void getImage(ImageView imageView,String url){
Picasso.with(imageView.getContext()).load(url).into(imageView);
}
@Bindable
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
notifyPropertyChanged(BR.name);
}
@Bindable
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
notifyPropertyChanged(BR.password);
}
public String getHeader() {
return header;
}
public void setHeader(String header) {
this.header = header;
}
}
修改布局文件
<?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">
<data>
<!--第一种引入方式-->
<variable
name="user"
type="com.cj5785.mvvmdesign.User" />
<!--第二种引入方式-->
<!--<import type="com.cj5785.mvvmdesign.User" />-->
<!--<variable-->
<!--name="user"-->
<!--type="User" />-->
<!--如果有多个相同model,可以取别名-->
<!--<import alias="typeUser" type="com.cj5785.mvvmdesign.User" />-->
<!--<variable name="user" type="typeUser" />-->
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:header="@{user.header}"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
android:text="@{user.name}" /><!--显示字段-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
android:text="@{user.password}" /><!--显示字段-->
</LinearLayout>
</layout>
在Activity中直接调用
public class MainActivity extends AppCompatActivity {
User user;
Handler handler = new Handler();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 使用MVVM时候,这里不能使用setContentView
// setContentView(R.layout.activity_main);
ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
user = new User("jack", "123456","http://i0.hdslb.com/bfs/archive/42172b20c899bcbbad0d46868af81b8081e999f1.jpg");
binding.setUser(user);
handler.postDelayed(new Runnable() {
@Override
public void run() {
user.setName("Bob");
user.setPassword("654321");
}
}, 5000);
}
}
接下来看看除了使用BaseObservable的另一种方式
public class UserField {
public ObservableField<String> name = new ObservableField<>();
public ObservableField<String> password = new ObservableField<>();
}
布局
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<data>
<variable
name="field"
type="com.cj5785.mvvmdesign.UserField"/>
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
android:text="@{field.name}" /><!--显示字段-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
android:text="@{field.password}" /><!--显示字段-->
</LinearLayout>
</layout>
调用
public class FieldTestActivity extends Activity {
UserField userField = new UserField();
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
binding.setField(userField);
userField.name.set("Alen");
userField.password.set("121212");
}
}
移动架构-MVVM框架的更多相关文章
- iOS应用千万级架构:MVVM框架
业务模块内的MVC和MVVM架构 目前,唯品会中MVC和MVVM架构并存,后期会偏重于MVVM架构的使用. MVC架构 Model:程序中要操纵的实际对象的抽象,为Controller提供经过抽象的业 ...
- js架构设计模式——前端MVVM框架设计及实现(二)
前端MVVM框架设计及实现(二) 在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HT ...
- js架构设计模式——前端MVVM框架设计及实现(一)
前端MVVM框架设计及实现(一) 最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了 借鉴的自然还是从正美的avalon开始了,我 ...
- “老坛泡新菜”:SOD MVVM框架,让WinForms焕发新春
火热的MVVM框架 最近几年最热门的技术之一就是前端技术了,各种前端框架,前端标准和前端设计风格层出不穷,而在众多前端框架中具有MVC,MVVM功能的框架成为耀眼新星,比如GitHub关注度很高的Vu ...
- 迷你MVVM框架 avalonjs 入门教程
新官网 请不要无视这里,这里都是链接,可以点的 OniUI组件库 学习教程 视频教程: 地址1 地址2 关于AvalonJs 开始的例子 扫描 视图模型 数据模型 绑定 作用域绑定(ms-contro ...
- 迷你MVVM框架 avalonjs1.5 入门教程
avalon经过几年以后,已成为国内一个举足轻重的框架.它提供了多种不同的版本,满足不同人群的需要.比如avalon.js支持IE6等老旧浏览器,让许多靠政府项目或对兼容性要求够高的公司也能享受MVV ...
- JavaScript富应用MVC MVVM框架
对框架的挑选 Ember.js.Backbone.js.Knockout.js.Spine.js.Batman.js , Angular.js 1. 轻量级的应用选择哪一个会比较好?2. 那一个比较简 ...
- vue.js学习笔记(一):什么是mvvm框架,vue.js的核心思想
一:MVVM框架 MVVM框架的应用场景: 1.针对具有复杂交互逻辑的前端应用 2.提供基础的架构抽象 3.提供ajax数据持久化,保证前端用户体验 二:vue.js的核心思想 (一):数据驱动 ( ...
- MVVM框架avalon在兼容旧式IE
迷你MVVM框架avalon在兼容旧式IE做的努力 当前标签: avalon 共3页: 1 2 3 下一页 迷你MVVM框架avalon在兼容旧式IE做的努力 司徒正美 2014-03-13 11: ...
随机推荐
- jquery验证时间
http://blog.csdn.net/guguojin/article/details/7045908 验证时间的正则表达式集合 //日期格式yyyy PatternsDict.date_y= ...
- 初识QuartusII 9.0(破解,半加器的仿真,综合:上)
由于在意大利期间,用的xilinx公司的ZYBO板子,相应的软件用ISE,SDK.回国买了altera公司的板子,自然也要学习国内较流行的软件(TB大西瓜家,因此相关例程也是大部分引用他家).Quar ...
- CSP 2019 退役记
声明:博主不会时空穿越,也没有造成恐慌,不应禁赛三年 Day0 上午:打板子 Polya定理; exkmp; exbsgs; 乘法逆元; 矩阵快速幂; 扫描线; ST表; excrt; Dirichl ...
- 爬虫(十一):scrapy中的选择器
Scrapy提取数据有自己的一套机制,被称作选择器(selectors),通过特定的Xpath或者CSS表达式来选择HTML文件的某个部分Xpath是专门在XML文件中选择节点的语言,也可以用在HTM ...
- 小程序if和style,image中src的渲染用法,基本写法
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html
- [转]解决Git报错:error: You have not concluded your merge (MERGE_HEAD exists).
Git fetch和git pull的区别: 都可以从远程获取最新版本到本地 1.Git fetch:只是从远程获取最新版本到本地,不会merge(合并) $:git fetch origin mas ...
- ROC与AUC的定义与使用详解
分类模型评估: 指标 描述 Scikit-learn函数 Precision 精准度 from sklearn.metrics import precision_score Recall 召回率 fr ...
- es6语法中的arrow function=>
(x) => x + 相当于 function(x){ ; }; var ids = this.sels.map(item => item.id).join() var ids = thi ...
- Android Studio创建Module-库模块
Android Studio创建Module-库模块 本文链接:https://blog.csdn.net/niuba123456/article/details/81049676 模块是源文件和 ...
- golang 循环创建闭包 问题排查
][]string{ { { "邀请码是什么", "我没有邀请码", "这个邀请码我可以随便填吗", "邀请码可以填他的手机号吗& ...