#HarmonyOS NEXT体验官#ArkUI-X与原生view平台视图开发 原创

ArkUI-X与原生view平台视图开发

首先我们要了解为什么要使用平台视图。

平台视图，主要是为了利用原生组件，减少开发成本，提供了ArkUI-X与原生view进行混合显示。

以Android为例，ArkUI-X框架支持将原生View和ArkUI组件混合显示的能力，用户可以编写ArkTS代码，java原生代码，就可以在ArkUI-X框架上显示原生组件的视图。

这里我们以Android平台为例，别问我为什么以Android距离，因为我就会Android。

使用场景及能力

使用场景

平台视图主要用于这样的场景：应用需要显示原生组件的视图，如地图，而在OpenHarmony中没有对应的跨平台的类似组件的实现。

具体可用于以下场景：利用Android的地图原生组件，如显示地图等；这里我们就可以使用XComponent的PLATFORMVIEW模式下，能够混合显示ArkUI组件与原生view，并支持用户操作的事件处理。

接口支持

平台视图提供的接口包括，IPlatformView接口，PlatformViewFactory接口，支持Android、iOS。具体如下表：

IPlatformView接口:

PlatformViewFactory接口:

接下来，我们一起看一下，如何开发，

开发步骤

开发者需要做如下3个步骤。

1、【Android】 自定义PlatformView, PlatformViewFactory

在 Android 端新建一个实现 IPlatformView 接口的类，并实现 getView 、onDispose()接口；
在 Android 端新建一个实现 PlatformViewFactory 接口的类，并实现 getPlatformView()接口；

2、【Android】 定义StageActivity，注册上述的 PlatformViewFactory类

再实现一个继承 StageActivity的类，在其构造函数中创建(1)的 PlatformViewFactory 对象；
把 PlatformViewFactory 类注册到 StageActivity中。

3、【Arkui-X ets】使用PlatformView

结合layout组件中使用widget Xcomponent用来显示PlatformView
在 Android 端实现好了之后，就能在ArkUI端用ets来显示原生组件的视图了，如显示MapView。

案例：使用原生地图组件

1、自定义IPlatformView接口的实现类。

// MyMapWrapper.java
import com.amap.api.maps.AMap;
import com.amap.api.maps.TextureMapView;
import ohos.ace.adapter.capability.platformview.IPlatformView;

public class MyMapWrapper implements IPlatformView {
    TextureMapView mMapView = null;
    AMap aMap = null;
    private String id = "PlatformViewTest1";

    MyMapWrapper(Context context, Bundle savedInstanceState) {
        // create TextureMapView
        mMapView = new TextureMapView(context) {
            @Override
            public boolean dispatchTouchEvent(MotionEvent event) {
                return super.dispatchTouchEvent(event);
            }
        };
        mMapView.onCreate(savedInstanceState);
        // init map
        aMap = mMapView.getMap();
        init();
    }

    private void init() {
        aMap.setOnMapLoadedListener(new AMap.OnMapLoadedListener() {
            @Override
            public void onMapLoaded() {
                setUp(aMap);
            }
        });
    }

    private void setUp(AMap amap) {
        UiSettings uiSettings = amap.getUiSettings();
        amap.showIndoorMap(true);
        uiSettings.setCompassEnabled(true);
        uiSettings.setScaleControlsEnabled(true);
        uiSettings.setMyLocationButtonEnabled(true);
    }

    public void onResume() {
        mMapView.onResume();
    }

    public void onSaveInstanceState(Bundle outState) {
        mMapView.onSaveInstanceState(outState);
    }

    @Override
    public View getView() {
        return mMapView;
    }
    @Override
    public  void onDispose() {
        mMapView.onDestroy();
    }
    @Override
    public String getXComponentID() {
        return id;
    }
}

2、自定义PlatformViewFactory接口的实现类。

// MyPlatformViewFactory.java
import android.content.Context;
import ohos.ace.adapter.capability.platformview.IPlatformView;
import ohos.ace.adapter.capability.platformview.PlatformViewFactory;

public class MyPlatformViewFactory extends PlatformViewFactory {
    private Context context;
    private Bundle savedInstanceState;

    @Override
    public IPlatformView getPlatformView(String xComponentId) {
        IPlatformView pv = null;
        switch (xComponentId){
            case "PlatformViewTest1":
                // create PlatformView
                pv = new MyMapWrapper(context, savedInstanceState);
                break;
            default:
                break;
        }
        return pv;
    }

    public void setContext(Context context) {
        this.context = context;
    }

    public void setSavedInstanceState(Bundle savedInstanceState) {
        this.savedInstanceState = savedInstanceState;
    }
}

3、自定义StageActivity

把PlatformViewFactory实现类注册到StageActivity中。

// EntryEntryAbilityActivity.java
import com.amap.api.maps.MapsInitializer;

import ohos.ace.adapter.capability.platformview.IPlatformView;
import ohos.ace.adapter.capability.platformview.PlatformViewFactory;
import ohos.stage.ability.adapter.StageActivity;

public class EntryEntryAbilityActivity extends StageActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        setInstanceName("com.example.mapapp:entry:EntryAbility:");
        super.onCreate(savedInstanceState);
        
        MapsInitializer.updatePrivacyShow(this, true, true);
        MapsInitializer.updatePrivacyAgree(this, true);
        // create PlatformViewFactory
        MyPlatformViewFactory pf = new MyPlatformViewFactory();
        pf.setContext(this);
        pf.setSavedInstanceState(savedInstanceState);
        // register PlatformViewFactory
        registerPlatformViewFactory(pf);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }
    @Override
    protected void onResume() {
        super.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
    }
    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
    }
}

4、在ArkTS中，使用PlatformView。

编写ArkUI页面platformview.ets。

// platformview.ets
@Entry
@Component
struct PlatformView {
  @State changeValue: string = ''
  @State submitValue: string = ''
  controller: SearchController = new SearchController()
  build() {
    Column() {
      //create XComponent ,init type to PLATFORM_VIEW
      XComponent({
        id: 'PlatformViewTest1',
        type: XComponentType.PLATFORM_VIEW,
      })
        .width('100%')
        .height('80%')
        .backgroundColor(Color.Gray)

      Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })
        .searchButton('SEARCH')
        .width('95%')
        .height(40)
        .backgroundColor('#F5F5F5')
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .textFont({ size: 14, weight: 400 })
        .onSubmit((value: string) => {
          this.submitValue = value
        })
        .onChange((value: string) => {
          this.changeValue = value
        })
        .margin(20)

    }.height('100%')
  }
}

最后我们就完成了平台视图的开发，是不是很厉害。好的，我们继续加油吧。鸿蒙未来可期。