Hybrid 同层渲染（Beta）

开通插件

1. 登录 veImageX 控制台。

2. 单击左侧导航栏 SDK管理 > 应用管理，进入应用管理页面。

3. 选择一个 App 类应用，单击卡片进入应用详情页面。

4. 开启 Android Hybrid-HEIF TTwebview 插件 的开关。

   说明

   • 开通后将为此 AppID 创建 1 个域名，用于该 App 下发插件。插件包含 Hybrid-HEIF 安卓端 TTwebview 插件，插件总大小约为 30 MB。请注意，专用插件下发域名的流量/带宽费用需要由您自行承担。开通后无法关闭。
   • 域名格式：{AppID}.plugin.volcimagex.com

添加 maven 仓库

确保 project 根目录下的 build.gradle 下配置服务，代码示例如下所示：

maven {
    url 'https://artifact.bytedance.com/repository/Volcengine/'
}

添加 SDK 依赖

请在 module 目录下的 build.gradle 文件中的 dependencies 中添加 Hybrid 加载 SDK 依赖，X.X.X 为技术支持提供的具体版本号。代码示例如下所示：

implementation "com.bytedance.fresco:pia-image:X.X.X"    // 用于加载和显示 Pia 格式的图像
implementation "com.bytedance.fresco:ttweb-wrapper:X.X.X"   // 用于在应用程序中加载和展示 TTWebView
implementation "com.bytedance.fresco:fresco:X.X.X"  // Fresco 图片加载库，提供了基本的图像加载和显示功能
implementation "com.bytedance.fresco:fresco-api:X.X.X"  // Fresco API
implementation "com.bytedance.fresco:animated-gif:X.X.X" // 用于支持加载和显示 GIF 格式的动态图像
implementation "com.bytedance.fresco:animated-webp:X.X.X" // 用于支持加载和显示 WebP 格式动态图像 
implementation "com.bytedance.fresco:webpsupport:X.X.X" // 提供对低版本 webp 的支持
implementation "com.bytedance.fresco:drawee:X.X.X" // fresco 组件，用于显示和管理图像的视图组件
implementation "com.bytedance.fresco:heif:X.X.X" // 用于解码和显示 HEIF 格式的静态图像
implementation "com.bytedance.fresco:animated-heif:X.X.X" // 用于解码和显示HEIF格式的动画图像
implementation "com.bytedance.fresco:authorization:X.X.X"  // 授权

初始化 SDK

请参考以下内容完成 SDK 的初始化。

public class BDFrescoApplication extends Application {
    
    @Override
    public void onCreate() {
        super.onCreate();
        // TTWebView Render进程和GPU进程不走端上初始化流程
        // 使用步骤 2：TTWebView 子进程初始化
        if (TTWebSdk.needInitIndependent(this)) {
            initALog(this);
            TTWebWrapper.initTTWebViewProcess(this);
            return;
        }

        // 日志打印
        FLog.setMinimumLoggingLevel(FLog.VERBOSE);
        Logger.INSTANCE.setEnableDefaultLog(true);
        initDataReport(this);

        // 使用步骤 3：主进程初始化
        initALog(this);
        // HostAbi 需要与 abiFilters 的值相对应：
        // abiFilters 是 "armeabi-v7a"，则传 "32"
        // abiFilters 是 "arm64-v8a"，则传 "64"
        CloudControl.setHostAbi(BuildConfig.HOSTABI);
        TTWebWrapper.initAppProcess(this);

        // 初始化 applog 和 fresco，参考帮助文档：https://www.volcengine.com/docs/508/176049#%E5%88%9D%E5%A7%8B%E5%8C%96
        initAppLog();
        initFresco();
        initMonitor();

        // 使用步骤 4：其他必要调用，可放入子线程，优化启动时间
        new Thread(() -> {
            // 同层渲染埋点
            TTWebWrapper.initEmbedLog();
            // 配置 settings
            TTWebWrapper.setTTWebSettings();
            // 同层渲染初始化
            TTWebMixRender.INSTANCE.initialize();
        }).start();
}

    @Override
    public Context getApplicationContext() {
        // 使用步骤 1：返回 Context
        return this;
    }
    
    
    private void initALog(final Context context) {
        TTWebDataCenter.registerLogexCallback(context, new LogExCallback() {
            @Override
            public void onLogExe(String tag, String msg) {
                Log.e(TAG, tag + " " + msg);
            }

            @Override
            public void onLogExi(String tag, String msg) {
                Log.i(TAG, tag + " " + msg);
            }

            @Override
            public void onLogExd(String tag, String msg) {
                Log.d(TAG, tag + " " + msg);
            }
        });
}

    private void initDataReport(Context context) {
        TTWebDataCenter.registerEventListener(context, new EventListener() {
            @Override
            public void onCommonEvent(int eventCode, JSONObject jsonValue, JSONObject exjs) {
                Log.i(TAG, "onCommonEvent " + eventCode + " " + jsonValue.toString());
                switch (eventCode) {
                    case 443: // 加载结果
                        Log.i(TAG,
                            "loadso_result:" + jsonValue.optString("sdk_loadso_result"));
                        break;
                    case 201: // 开始下载
                        Log.i(TAG, "start download");
                        break;
                    case 299: // 下载完成
                        Log.i(TAG, "finish download");
                        break;
                    case 399: //解压完成
                        Log.i("[onCommonEvent]", "finish decompress");
                        break;
                }
            }

            @Override
            public void onCrucialEvent(int eventCode, JSONObject jsonValue, JSONObject exjs) {
                Log.i(TAG, "onCrucialEvent " + eventCode + " " + jsonValue.toString());
                switch (eventCode) {
                    case 1100: // 加载内核版本号
                        Log.i(TAG, "loadso: " + jsonValue.optString("LoadSo"));
                        break;
                }
            }
        });
    }
}

开启 Hybrid 同层渲染

使用 WebView 加载网页的应用程序，代码示例如下所示：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);
        WebView webView = findViewById(R.id.main_webview);

        // 使用步骤 5：允许同层渲染 2.0，添加自定义组件。
        TTWebMixRender.INSTANCE.enableForWebView(webView, Collections.singletonList(TTWebMixRender.EmbedRuntimeType));
        TTWebMixRender.INSTANCE.addComponent(BDImageView.class);

        webView.setWebViewClient(new WebViewClient());
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WebView.setWebContentsDebuggingEnabled(true);
        }

        // 使用步骤 6：调用 loadUrl 方法加载指定的网址到 WebView 中
        webView.loadUrl("您自己的应用程序地址");
    }
}

自定义插件

参考 BDImageView、BDImageViewFactory 代码自定义插件。

同层渲染并在一个 Web 页面滑动时，即使图片不可见，SimpleDraweeView 也不会自动释放，此时内存会累加。同一个页面中存在大量图片时，您可以在图片处于不可见位置时，从 Web 端将图片节点直接删除。