初次开始研究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 true
        exclude 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;
    }

    @Override
    public 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();
    }

    @Override
    public void getBitmap(String uri, int reqWidth, int reqHeight, ImageLoader.Listener lis) {

    }

    /*url處理*/
    private void spliteUrl(String url) {
        if (!TextUtils.isEmpty(url)) {//如果没有URL那么就为null
            String[] 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)) {//特殊处理的url
                        typeName = 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));

后记

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