All Products
Search
Document Center

Customize View in Android Mini Program

Last Updated: Jul 16, 2021

The custom View function of the Android Mini Program is only supported in mPaaS 10.1.68.29 and later versions.

Upgrade baseline

  1. Upgrade the baseline to 10.1.68.29 or later version, and add the Mini Program component to the project. Refer to mPaaS Upgrade Guide.
  2. Use the customized appx base library. The code example is as follows:
       
    1. dependencies {
    2. ···
    3. implementation ('com.mpaas.tinyapp.commonres:tinyappcommonres:1.14.2-beta4.1') {
    4. force = true
    5. }
    6. ···
    7. }

Realize custom View

Customize a class to inherit MPBaseEmbedView, implement the getView method, then obtain the Android View and return it to the mini program.

 
  1. public class MyTestEmbedView extends MPBaseEmbedView {
  2. @Override
  3. public View getView(int width, int height, String viewId, String mType, Map<String, String> params) {
  4. // Return the true Android view.
  5. return mRealView;
  6. }
  7. }

Register custom View

Call the MPEmbedViewHelper.registerEmbedView to register a custom view before QuinoxlessFramework is called. The registerEmbedView is no time-consuming and does not affect startup performance.

 
  1. MPEmbedViewHelper.registerEmbedView("com.mpaas.demo.nebula.MyTestEmbedView", "custom_map");
Note:
  • The parameter "com.mpaas.demo.nebula.MyTestEmbedView" represents the complete path of the custom View.
  • The parameter “custom_map” represents the type of the custom View, which also needs to be filled in on the mini program. Add a prefix is recommended.

Call custom View

The sample of of calling custom View by mini program is as follows:

 
  1. <mpaas-component
  2. id="mpaas-map"
  3. type="custom_map"
  4. style="{{ width: 200, height: 200 }}"
  5. />
Note:
  • The mpaas-component is a fixed value, please do not modify it.
  • id is the ID of the custom View instance, please do not repeat it in a single mini program.
  • type is the type of custom View, it should be consistent with the third parameter of the client’s registered custom View. Add a prefix is recommended.
  • style, in which input the width and height.

Callback of MPBaseEmbedView

All callback functions of custom View are as follows:

 
  1. public class MPBaseEmbedView{
  2. /**
  3. * The method is called when the custom View is instantiated. It is the first callback method to be called.
  4. *
  5. * @param context
  6. * @param h5Page
  7. */
  8. public void onEmbedViewCreate(Context context, H5Page h5Page) {
  9. }
  10. /**
  11. * Get the embeded View instance.
  12. *
  13. * @param width Customize the width of view.
  14. * @param height Customize the height of view.
  15. * @param viewId Customize view's self-increment id, which can be ignored.
  16. * @param mType Fixed value "application/view", which can be ignored.
  17. * @param params Parameter
  18. * @return
  19. */
  20. @Override
  21. public View getView(int width, int height, String viewId, String mType, Map<String, String> params) {
  22. }
  23. /**
  24. * Call back when custom View is attached to webview.
  25. *
  26. * @param width Customize the width of view.
  27. * @param height Customize the height of view.
  28. * @param viewId Custom view's self-increment id, which can be ignored.
  29. * @param mType Fixed value "application/view", which can be ignored.
  30. * @param params Parameter
  31. */
  32. @Override
  33. public void onEmbedViewAttachedToWebView(int width, int height, String viewId, String mType, Map<String, String> params) {
  34. }
  35. /**
  36. * Call back when custom View is detached from webview.
  37. *
  38. * @param width Customize the width of view.
  39. * @param height Customize the height of view.
  40. * @param viewId Customize view's self-increment id, which can be ignored.
  41. * @param mType Fixed value "application/view", which can be ignored.
  42. * @param params Parameter
  43. */
  44. @Override
  45. public void onEmbedViewDetachedFromWebView(int width, int height, String viewId, String mType, Map<String, String> params) {
  46. }
  47. /**
  48. * Call back when the custom View is destoryed.
  49. *
  50. * @param width Customize the width of view.
  51. * @param height Customize the height of view.
  52. * @param viewId Customize view's self-increment id, which can be ignored.
  53. * @param mType Fixed value "application/view", which can be ignored.
  54. * @param params Parameter
  55. */
  56. @Override
  57. public void onEmbedViewDestory(int width, int height, String viewId, String mType, Map<String, String> params) {
  58. }
  59. /**
  60. * Call back when webview is resumed.
  61. */
  62. @Override
  63. public void onWebViewResume() {
  64. }
  65. /**
  66. * Call back when webview is paused.
  67. */
  68. @Override
  69. public void onWebViewPause() {
  70. }
  71. /**
  72. * Call back when webview is destroyed.
  73. */
  74. @Override
  75. public void onWebViewDestory() {
  76. }
  77. /**
  78. * Called when receiving the context instruction of the mini program.
  79. *
  80. * @param actionType Context name
  81. * @param data Context parameter
  82. * @param bridgeContext callback bridge
  83. */
  84. @Override
  85. public void onReceivedMessage(String actionType, JSONObject data, H5BridgeContext bridgeContext) {
  86. }
  87. /**
  88. * The rendering instructions when custom View is created.
  89. *
  90. * @param data Rendering data
  91. * @param bridgeContext Callback bridge, which can be ignored.
  92. */
  93. @Override
  94. public void onReceivedRender(JSONObject data, H5BridgeContext bridgeContext) {
  95. }
  96. }

Sample code