“size”: “16”
}
]
}
}
二、 View的响应
第一步已经能自动填充控件了,但是如果真想点击第二个TextView去弹出一个Toast,怎么处理呢?可以尝试在View的数据里面指定一个动作:
{
“name”: “TV”,
“content”: “弹出Toast”,
“color”: “#333333”,
“size”: “16”,
“action”: {
“name”: “toast”,
“msg”: “弹出一下”
}
}
这样点击的时候就可以解析出一个Toast的动作。当然Action是需要提前穷举的,还是前面说的,一个App的动作肯定不是无限的。比如跳转一个页面:
{
“name”: “TV”,
“content”: “打开页面”,
“color”: “#333333”,
“size”: “16”,
“action”: {
“name”: “open”,
“nextPage”: {
“contextName”: “detail”,
“layout”: {}
}
}
}
"nextPage"已经能自动生成第二个页面了。甚至于,请求也是一个Action:
{
“name”: “TV”,
“content”: “请求网络”,
“color”: “#333333”,
“size”: “16”,
“action”: {
“name”: “request”,
“url”: “https://xxx.com”,
“params”: {
“name”: “rjp”,
“age”: “18”
}
}
}
如果你已经封装了请求,上面的数据已经够去请求一下了,但是请求回来的数据呢?这就是说,有时候Action的动作是有后续动作的,有一种嵌套关系:
{
“name”: “TV”,
“content”: “请求网络”,
“color”: “#333333”,
“size”: “16”,
“action”: {
“name”: “request”,
“url”: “https://xxx.com”,
“params”: {
“name”: “rjp”,
“age”: “18”
},
“action”: “setData”
}
}
"request"的后续有一个"setData"的动作。这就不好处理了,因为每个页面的业务数据都是独特的,数据模型无法统一。所以需要一个中间层,能对后台下发的数据进行标准化输出:
public class DataBean {
private String a;
private String b;
private String c;
private String d;
private String e;
private String f;
private String g;
}
也就是说,不管我请求哪个接口,返回的数据永远是abcdefg,我也不关心字段究竟代表什么。
那怎么知道下发的数据应该填充到哪个控件呢?可以通过给控件设置一个value,来指定需要的数据:
{
“name”: “TV”,
“content”: “请求网络”,
“color”: “#333333”,
“size”: “16”,
“value”: “a”,
“action”: {
“name”: “request”,
“url”: “https://xxx.com”,
“params”: {
“name”: “rjp”,
“age”: “18”
},
“action”: “setData”
}
}
这样点击完请求数据,如果数据里面带上了"a": “后台数据”,就将数据填到这个TextView上。填充首先想到的就是遍历页面的根View,但是随着页面复杂化,非常耗时,可以参考局部刷新的做法,对有value属性的View进行缓存,只要遍历缓存集合就行了,非常高效。
三、 拼多多
说了这么多还没有一个完整的例子,下面一步步来实现。
public class PageActivity extends AppCompatActivity implements IPage {
private List viewCache;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_page);
FrameLayout pageContainer = findViewById(R.id.page_container);
Intent intent = getIntent();
if (intent != null && intent.hasExtra(“nextPage”)) {
String nextPage = intent.getStringExtra(“nextPage”);
PageBean pageBean = JSONObject.parseObject(nextPage, PageBean.class);
if (pageBean != null) {
viewCache = new ArrayList<>();
pageContainer.addView(LayoutFactory.createView(this, pageBean.getLayout()));
}
}
}
@Override
public Context getContext() {
return this;
}
@Override
public List getViewCache() {
return viewCache;
}
}
创建一个简单的页面容器Activity,布局只有一个FrameLayout,从上一个页面接收json,这个json描述整个Page,当然也可以通过接口请求获取,测试阶段直接从Assets读取。
上面的关键是获取到json转成PageBean结构:
public class PageBean {
private String contextName;
private ViewBean layout;
public ViewBean getLayout() {
return layout;
}
public void setLayout(ViewBean layout) {
this.layout = layout;
}
public String getContextName() {
return contextName;
}
public void setContextName(String contextName) {
this.contextName = contextName;
}
}
ViewBean:
public class ViewBean {
private String id;
private String name;
private String content;
private String color;
private String value;
private float size = 14.0f;
private int width;
private int height;
private List children;
private String action;
private String url;
private String itemType;
}
ViewBean存在一个问题就是所有的属性都糅合在一个数据结构里,会造成浪费,解决办法是一个类型的View给一个Bean,然后设置ViewType,但是那是优化时考虑的问题,目前只使用一个。
拿到了Layout就可以通过简单工厂模式开始渲染布局了:
public class LayoutFactory {
public static View createView(IPage page, ViewBean viewBean) {
String name = viewBean.getName();
switch (name) {
case ViewType.VLL:
return createLinearLayout(page, viewBean, true);
case ViewType.HLL:
return createLinearLayout(page, viewBean, false);
case ViewType.TV:
return createTextView(page, viewBean);
case ViewType.IV:
return createImageView(page, viewBean);
default:
return new View(page.getContext());
}
}
private static View createLinearLayout(IPage page, ViewBean viewBean, boolean isVertical) {
LinearLayout vll = new LinearLayout(page.getContext());
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
vll.setLayoutParams(layoutParams);
vll.setOrientation(isVertical ? LinearLayout.VERTICAL : LinearLayout.HORIZONTAL);
List children = viewBean.getChildren();
if (children != null && children.size() > 0) {
int size = children.size();
for (int i = 0; i < size; i++) {
vll.addView(createView(page, children.get(i)));
}
}
return vll;
}
private static View createImageView(IPage page, ViewBean viewBean) {
ImageView imageView = new ImageView(page.getContext());
imageView.setTag(R.id.image_tag_id, viewBean);
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(viewBean.getWidth(), viewBean.getHeight());
imageView.setLayoutParams(layoutParams);
String url = viewBean.getUrl();
if (!TextUtils.isEmpty(url)) {
Glide.with(page.getContext()).load(url).into(imageView);
}
if (!TextUtils.isEmpty(viewBean.getValue())) {
List viewCache = page.getViewCache();
if (viewCache != null) {
viewCache.add(imageView);
}
}
return imageView;
}
/**
- 创建一个TextView
- @param page
- @param viewBean
- @return
*/
private static View createTextView(IPage page, ViewBean viewBean) {
TextView tv = new TextView(page.getContext());
try {//多个try保证某一个脏数据不会导致v
iew整体加载失败
tv.setTextColor(Color.parseColor(viewBean.getColor()));
} catch (Exception e) {
e.printStackTrace();
tv.setTextColor(Color.parseColor("#333333"));
}
try {
tv.setTextSize(TypedValue.COMPLEX_UNIT_DIP, viewBean.getSize());
} catch (Exception e) {
e.printStackTrace();
tv.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 14.0f);
}
if (!TextUtils.isEmpty(viewBean.getValue())) {
List viewCache = page.getViewCache();
if (viewCache != null) {
viewCache.add(tv);
}
}
tv.setText(viewBean.getContent());
tv.setTag(viewBean);
tv.setOnClickListener(v -> {
ViewBean bean = (ViewBean) v.getTag();
IAction action = ActionFactory.createAction(page, bean.getAction());
action.action(bean.getAction());
});
return tv;
}
}
注意填充的过程中判断value是否存在,存在直接存到viewCache集合里,后面设置数据能用上。
createView的方法传入了一个IPage接口,这个接口是为了方便获取context上下文和viewCache集合:
public interface IPage {
Context getContext();
List getViewCache();
}
n = ActionFactory.createAction(page, bean.getAction());
action.action(bean.getAction());
});
return tv;
}
}
注意填充的过程中判断value是否存在,存在直接存到viewCache集合里,后面设置数据能用上。
createView的方法传入了一个IPage接口,这个接口是为了方便获取context上下文和viewCache集合:
public interface IPage {
Context getContext();
List getViewCache();
}