天天看点

XCoreRedux框架:Android UI组件化与Redux实践

使用android studio打开该项目。

demo

基于xcore框架写的一个小demo

xcore

xcoreredux核心代码库

pics

文档的pic资源

android开发当中的code architecture思考

最近看了很多前端的框架,react、flux、redux等,react和redux都是前端比较流行的框架。而android方面,google官方貌似不太care此事,业内也没有公认的优秀architecture。与前端类似,在android开发中,同样也面临着复杂的数据state管理的问题。在理解store、reducer和action的基础上,最终,基于redux+react的思想,提出了一个基于android平台redux框架,我给它起名叫作:xcoreredux。本仓库就是xcoreredux+uicomponent框架的实现。它表达的是一种思想,希望大家能够提出更好的意见。

与前端的redux框架类似,xcoreredux框架的图示如下:

XCoreRedux框架:Android UI组件化与Redux实践

action 是把数据传到 store 的有效载体。它是store的唯一数据来源。我们一般是通过 store.dispatch()将action传到store中。action一般需要两个参数:type类型和data数据。在xcoreredux框架下,我们定义action如下:

为了统一的管理action,你可以实现一个actioncreator,比如,demo中创建了一个联系人业务的creator:

action的概念比较好理解,下面我们看一下reducer

reducer的字面意思就是“减速器”。action描述了事件,reducer是决定如何根据action更新状态(state),而这正是reducer要做的事情。reducer的接口定义如下:

就是根据输入的action和当前的state,处理得到新的state。

说的更直白一点,reducer就是一些列 纯函数 的集合。如demo中的项目所示:

通过上面的reducer实现,我们可以看出,reducer就是一些列函数的集合,其中一个关键函数reduce,它按照action的不同type执行不同的方法处理。

store字面意思是存储。在redux框架下,store和database,file没有关系,它可不是持久化存储的意思。store是负责管理数据源的状态,负责把action和reducer联系到一起。store的职责为:

1.保存数据源的当前状态state

2.对外提供dispatch方法,更新state

3.通过subscribe注册监听器,当state变化时,通知观察者

4.提供getstate方法,获取当前的state

store的java实现:

在android中,一个redux页面(fragment或者activity) 只有一个单一的 store。当需要拆分数据处理逻辑时,应该使用 reducer组合,而不是创建多个store。

与前端的redux搭配react类似,xcoreredux搭配uicomponent。

在前段的react框架下,我们常常听说组件的概念:‘ui组件’。那么什么是ui组件呢?以下图为例:

XCoreRedux框架:Android UI组件化与Redux实践

红色的区域为“普通组件”,绿色的区域为两种不同类型的“item组件”。因此,在uicomponent里,组件分两种:普通组件和item组件(或称为cell组件)。

单组件,比如一个自定义的widget,就是一样view。比如自定义的circleimageview等。

容器组件,由viewgroup派生出的组件。有framelayout、linearlayout、relativelayout等。还有些常见的列表组件,比如listview或者recyclerview的组件等。

普通组件在xcore中是以framelayout的形式封装的,编写一个普通组件只需要实现如下方法:

1.public int getlayoutresid()

2.public void onviewcreated(view view)

3.实现xcorestore中的istatechangelistener接口,在onstatechanged中做数据绑定

对于前端来说,item组件和普通组件并没有什么不同。但是对于android或者ios而言,item组件和普通组件是有本质区别的。以reyclerview为例,item组件在同一种类型下是会复用的。在xcoreredux框架中,定义item组件,需要继承自xcoreitemuicomponent,它本身并不是一个view。它只需要实现的方法有:

view oncreateview(layoutinflater inflater,viewgroup container);

与fragment的oncreateview类似,它负责创建item的布局view

void onviewcreated(view view);

与fragment的onviewcreated类似,在此写view的初始化

public string getviewtype();

item组件对于数据源的类型

public void bindview(ixcorecomponent corecomponent,

xcorerecycleradapter corerecycleradapter,

xcorerecycleradapter.idatawrapper data,

int pos);

数据绑定,当adapter调用bindviewholder时,会回调bindview方法。

item组件需要通过adapter,与对应的列表组件联系起来。针对android常用的recyclerview,xcoreredux提供了插件式的通用xcorerecycleradapter。

XCoreRedux框架:Android UI组件化与Redux实践

与之前的不同之处在于,这里把整个列表封装成一个列表组件,对外提供注册item,比如xcorerecyclerviewcomponent组件源码。

我们在使用该组件时,只需要:

1.在xml中添加组件

2.初始化

对于数据绑定方面,做了两个优化:

1.把数据通过wrapper包装

2.使用uibinderhelper做流式绑定,比如:

1.异步

2.middleware中间件

3.与rx结合

<a href="http://cn.redux.js.org/docs/basics/reducers.html">redux中文文档</a>

<a href="http://armueller.github.io/android/2015/03/29/flux-and-android.html">flux and android</a>

<a href="http://androidflux.github.io/docs/overview.html#content">androidflux一览</a>