初次开始研究Tangram七巧板

对于脚本开发有非一般的执着，阿里的七巧板架构是一个不错的体验，git官方提供的demo可能并不能够满足我的需求，本博客只是为了记录工作，并没有什么。。。

导入支持

    implementation fileTree(dir: 'libs', include: ['*.jar'])implementation('com.android.support:appcompat-v7:28.0.0') {changing = true}compile 'com.android.support:support-annotations:28.0.0'implementation 'com.android.support.constraint:constraint-layout:1.1.3'// 最新版本引入了rxjava，需要自行添加rx依赖implementation 'io.reactivex.rxjava2:rxjava:2.1.12'implementation 'io.reactivex.rxjava2:rxandroid:2.0.2'implementation 'com.squareup.picasso:picasso:2.5.2'//圖片支持implementation("com.github.bumptech.glide:glide:4.8.0") {exclude group: "com.android.support"}implementation("com.android.support:support-fragment:28.0.0") {}
//    compile 'com.github.bumptech.glide:annotations:4.8.0'annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'implementation 'com.alibaba.android:tangram:3.1.7@aar'implementation 'com.alibaba.android:ultraviewpager:1.0.7.8@aar'implementation('com.alibaba.android:virtualview:1.3.8.4@aar') {transitive trueexclude group: 'com.android.support', module: 'appcompat'exclude group: 'com.android.support', module: 'appcompat-v7'exclude group: 'com.android.support', module: 'support-v7-recyclerview'exclude group: 'com.android.support', module: 'support-v4'exclude group: 'com.android.support', module: 'support-annotations'exclude group: 'com.android.support', module: 'support-compat'}implementation('com.alibaba.android:vlayout:1.2.18@aar') {changing = true}

思路

1.Tangram本质是动态布局，通过json来控制布局样式，使用最常见的几种需求有
[1]res下的drawable vs mipmap 资源
[2]url链接包含网络图片，assets下的图片
[3]gif图片
[4]需要做成圆形的网络图片
[5]url加载失败需要显示默认图
[6]url加载，加载过程中需要显示图片

在性能以及官方推广上，比较推荐picasso，但是picasso已经很久没有使用，顾不是特别熟悉，刚开始也对其研究了一波，但是还是高估了自己，为了更加便捷快速，所以最后舍弃了picasso，使用了Glide

思考结果

[1]res下的drawable vs mipmap 资源
采用src=“@drawable/图片” or src=“@mipmap/图片”
类似原生中调用
[2]url链接包含网络图片，assets下的图片
直接采用 src=“对应的url"即可
[3]gif图片
在Glide中gif图片是需要特殊处理的顾，最后决定使用
src=”gif://url地址" or src=“gif://@drawable/图片“ or src=“gif://@mipmap/图片”
但实际中基本上不会出现gif://url地址，顾直接把这当作普通加载url处理
[4]需要做成圆形的网络图片
该种多用于拉取到的图片，因为动态组件(一般N开头组件都行)已经提供了可以绘制圆角，亲们可以去试一试
src=“yuan://url”
最后本人还是选择了动态组件布局解决圆形图片，只是在思考的时候，对于动态组件没有太多的了解，才选择了这一波
[5]url加载失败需要显示默认图
src=“url的规则；error://资源图片地址规则”
[6]url加载，加载过程中需要显示图片
src=“url的规则；holder://资源图片地址规则"

代码

package ***;import android.content.Context;
import android.text.TextUtils;
import android.util.Log;
import com.bumptech.glide.load.resource.bitmap.CircleCrop;
import com.bumptech.glide.load.resource.gif.GifDrawable;
import ***.application.GlideApp;
import ***.application.GlideRequest;
import ***.utils.StringUtils;
import com.tmall.wireless.vaf.virtualview.Helper.ImageLoader;
import com.tmall.wireless.vaf.virtualview.view.image.ImageBase;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import static com.bumptech.glide.request.RequestOptions.decodeTypeOf;
import static ***.application.GlideOptions.bitmapTransform;public class GlideImgLoadAdapter implements ImageLoader.IImageLoaderAdapter {private String typeName = "", urlStr = "";//类型vs图片地址private int RESID = 0;//图片资源private String RESTYPE = "";//图片资源Context context;public GlideImgLoadAdapter(Context context) {this.context = context;}@Overridepublic void bindImage(String uri, ImageBase imageBase, int reqWidth, int reqHeight) {Log.e("qinming.Fu","glide URL:"+uri);typeName="";urlStr = "";RESID = 0;RESTYPE = "";spliteUrl(uri);//獲取各種環境地址GlideRequest glideRequest=null;GlideVVSimpleTarget target=new GlideVVSimpleTarget(imageBase);Log.e("qinming.Fu","typeName:"+typeName+",urlStr:"+urlStr+",RESID:"+RESID+",RESTYPE:"+RESTYPE);if (!TextUtils.isEmpty(typeName) && typeName.equals("yuan://")) {//加載圓性圖片glideRequest=GlideApp.with(context).asBitmap().load(urlStr).apply(bitmapTransform(new CircleCrop()));} else if (!TextUtils.isEmpty(typeName) && typeName.equals("gif://")) {//加載gif圖片glideRequest = GlideApp.with(context).asBitmap().load(urlStr).apply(decodeTypeOf(GifDrawable.class).lock());}else{glideRequest = GlideApp.with(context).asBitmap().load(urlStr);}if (RESID != 0) {if (!TextUtils.isEmpty(RESTYPE) && RESTYPE.equals("holder://")){glideRequest.placeholder(RESID).error(RESID);}else{glideRequest.error(RESID);}}glideRequest.into(target);
//        boolean crileFalg = !TextUtils.isEmpty(typeName);//是否加載圓性圖片
//        Glide.with(context).load(urlStr).apply(RequestOptions.bitmapTransform(new CircleCrop())).thumbnail();}@Overridepublic void getBitmap(String uri, int reqWidth, int reqHeight, ImageLoader.Listener lis) {}/*url處理*/private void spliteUrl(String url) {if (!TextUtils.isEmpty(url)) {//如果没有URL那么就为nullString[] strs = url.split(";");//拆分数据开始if (strs != null && strs.length > 0) {for (int i = 0; i < strs.length; i++) {String str = strs[i] != null && !TextUtils.isEmpty(strs[i]) ? strs[i] : "";//当前数据//资源图片的正则if (Pattern.matches("(holder://|error://)?(@drawable/|@mipmap/).*", str)) {//加载本地图片String typeStr = StringUtils.patternFind("(holder://|error://)", url);String resType = StringUtils.patternFind("(drawable|mipmap)", str);//图片类型String urlStr = str.replace(typeStr +"@" +resType+"/", "");Log.e("qinming.Fu","typeStr:"+typeStr+",resType:"+resType+",urlStr:"+urlStr);if (!TextUtils.isEmpty(urlStr)) {int resID = context.getResources().getIdentifier(urlStr, resType, context.getApplicationInfo().packageName);if (resID != 0) {if (!TextUtils.isEmpty(typeStr)) {RESTYPE = typeStr;}RESID = resID;}}} else if (Pattern.matches("(yuan://|gif://).*", url)) {//特殊处理的urltypeName = StringUtils.patternFind("(yuan://|gif://)", str);urlStr = str.replace(typeName, "");} else {typeName = "";urlStr = str;}}}}}
}

关于GlideApp

引入

allprojects {
repositories {
google()
jcenter()
mavenCentral()//最重要
}
}

build.gradle

annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'//导入最新的版本

构建GlideAPP环境

任意package中写入一下类
不用像其他博客上面说必须写入Application类中

package ***;import com.bumptech.glide.annotation.GlideModule;
import com.bumptech.glide.module.AppGlideModule;@GlideModule
public final class MyAppGlideModule extends AppGlideModule {}

如何验证

没有导入或者编译环境成功，GlideAPP有时也是可以打出来的，股直接打出来是不合理的，亲们可以看下是否可以设置加载过程中图片，继 GlideApp.with(context).asBitmap().load(urlStr).apply(bitmapTransform(new CircleCrop())).placeholder(RESID);，在本人的实际导入编译中出现GlideAPP但是却不能够使用的情况，后面发现是参考的博客有问题，然后官方提供的方法不能使用，具体使用方法，亲们可以参考glide官网。

Tangram 导入图片下载Server

engine.getService(VafContext.class).setImageLoaderAdapter(new GlideImgLoadAdapter(activity));

VafContext vafContext = engine.getService(VafContext.class);
//在开始写的时候看了VirtualView设置点击等，却不知道怎么获取VafContext后面也是研究了很久才看到，主要之前的苹果核在pc端访问老出现不能查看，顾记录一下下
vafContext.setImageLoaderAdapter(new GlideImgLoadAdapter(activity));

后记

小菜鸟一枚，不断学习中，愿未来越来越好。

Tangram + Virtualview图片处理相关推荐

今日头条技术架构千字分析，
点击"开发者技术前线",选择"星标????" 让一部分开发者看到未来今日头条创立于2012年3月,到目前仅4年时间.从十几个工程师开始研发,到上百人,再到 ...
Android 动态界面开发框架 Tangram 使用完整教程
阅读本文大概需要20分钟熟悉阿里出品的vlayout的读者都知道,vlayout极大地扩展了RecyclerView的LayoutManager,从而为RecyclerView提供了一组布局.使用该 ...
猫客页面内组件的动态化方案-Tangram 2.0
Tangram 2.0 库 Android Tangram-Android Virtualview-Android iOS Tangram-iOS Virtualview-iOS 背景技术背景一直 ...
Android Virtualview：淘宝、天猫又开源了一个动态化、高性能的UI框架
转载 Carson_Ho Android Virtualview:淘宝.天猫又开源了一个动态化.高性能的UI框架前言目录 1. 为什么要向 Tangram模型加入 VirtualView 2. ...
Android Virtualview：淘宝、天猫又一个动态化、高性能的UI框架力作
Android Virtualview:淘宝.天猫又一个动态化.高性能的UI框架力作前言淘宝.天猫一直致力于解决页面动态化的问题在2017年的4月发布了v1.0解决方案:Tangram模型 ...
Android Virtualview：淘宝、天猫又开源了一个动态化、高性能的UI框架力作
前言淘宝.天猫一直致力于解决页面动态化的问题在2017年的4月发布了v1.0解决方案:Tangram模型及其对应的 Android库 vlayout,该解决方案在手机淘宝.天猫 Android ...
苹果核 - 页面动态化的基础 —— Tangram
12月10日在SFDC(SegmentFault Developer Conference)大会上初次介绍了手机天猫的Tangram方案,现场时间有限,讲得匆忙,特此整理记录.这篇内容是Tangram ...
苹果核 - Tangram 的基础 —— vlayout（Android）
1. 前言天猫沉淀了3年的一套界面解决方案已经开始陆续进入开源流程:首先开源的是Android基础组件VLayout vlayout 是手机天猫 Android 版内广泛使用的一个基础 UI 框架项 ...
苹果核 - Tangram是我们对界面动态化的态度 Tmail
Tangram,七巧板,几块简单的积木就能拼出大千世界.我们用Tangram来命名这套界面方案,也是希望他能像七巧板一样可以通过几块积木就搭出丰富多彩的界面. 号外:Tangram开源了!通过http ...

Tangram + Virtualview图片处理