#原生视图嵌入 LynxView

iOS 上需要再创建 LynxView 时，主动设置 LynxView 的大小约束。

有两个方式来给 Lynxview 设置大小约束：

• 通过 updateViewportWithPreferredLayoutWidth 并配合 setLayoutWidthMode、setLayoutHeightMode 来设置固定或者弹性大小
• 通过 lynxviewbuilder#frame 来设置固定大小

支持的约束模式：

typedef NS_ENUM(NSInteger, LynxViewSizeMode) {
  LynxViewSizeModeUndefined = 0,
  LynxViewSizeModeExact,
  LynxViewSizeModeMax
};

• LynxViewSizeModeUndefined

  LynxView 的宽或高完全由其 Page 的内容决定，父容器不给任何约束。

• LynxViewSizeModeExact

  LynxView 的宽或高为指定的固定值，即 Page 节点的大小固定。

• LynxViewSizeModeMax

  LynxView 的宽或高的最大值，即 Page 节点大小的最大值。

#onMeasure 里得到大小约束

Android 系统有给视图提供 onMeasure 周期，在这个阶段可以得到外层视图给 LynxView 的大小约束，Lynx 会在系统的 onMeasure 函数内完成所有节点的排版，并计算出 LynxView 的大小，以便通过 setMeasuredDimension 设置正确的值。

具体的 View.MeasureSpec 如下：

• UNSPECIFIED

  LynxView 的宽或高完全由其 Page 的内容决定，父容器不给任何约束。

• EXACTLY

  LynxView 的宽或高为指定的固定值，即 Page 节点的大小固定。

• AT_MOST

  LynxView 的宽或高的最大值，即 Page 节点大小的最大值。

在页面的内容需要重新排版时，Lynx 通过调用系统的 requestLayout，触发 onMeasure 重新执行。

#预设宽高，提前触发排版

你也可以在创建 LynxView 时，预设通过 LynxViewBuilder#setPresetMeasuredSpec 来预设给 LynxView 的大小约束，参数与 onMeasure 一致。这样可以在渲染周期内就触发排版，而不用等到 onMeasure 的执行。 当检测到 measureSpec 变化后，仍然会重新触发排版，保证 LynxView 的大小是正确的。

比如，通过下面的代码可以预设一个固定 400*200 大小：

LynxViewBuilder viewBuilder = new LynxViewBuilder();
viewBuilder = viewBuilder.setPresetMeasuredSpec(View.MeasureSpec.makeMeasureSpec(400, View.MeasureSpec.EXACTLY),
        View.MeasureSpec.makeMeasureSpec(200, View.MeasureSpec.EXACTLY));

LynxView lynxview = viewBuilder.build(this);;

#onMeasureSize 里得到大小约束

ArkUI 框架会在自定义组件确定尺寸时，将节点信息和尺寸范围通过 onMeasureSize 传递给该组件。

在这个阶段可以得到外层视图给 LynxView 的大小约束，Lynx 会在系统的 onMeasureSize 函数内完成所有节点的排版，并计算出 LynxView 的大小。

#使用 LynxViewBuilder#frame 属性

可以在创建 LynxView 的时候，设置 frame 属性大小，这样 LynxView 的大小就是固定的。

比如，你想限制 LynxView 的大小为固定的 400*200，可以按照如下方式：

   LynxView *lynxView = [[LynxView alloc] initWithBuilderBlock:^(LynxViewBuilder *builder) {
       builder.frame =  CGRectMake(0, 0, 400, 200);
         ...
    }];

#使用 preferredLayoutWidth/preferredLayoutHeight 和 layoutWidthMode/layoutHeightMode

参考如下代码:

_lynxView.layoutWidthMode = LynxViewSizeModeExact;
_lynxView.layoutHeightMode = LynxViewSizeModeExact;

_lynxView.preferredLayoutWidth = 400;
_lynxView.preferredLayoutHeight = 200;

只要外层容器给 LynxView 的约束是 EXACTLY，那么 LynxView 的大小就是固定的。

比如你想设置 400*200 大小的 LynxView:

//可以直接指定LynxView的大小
parentView.addView(lynxview, new ViewGroup.LayoutParams(400, 200));

//也可以固定父节点的大小,设置 MATCH_PARENT 模式
parentView.addView(lynxview,
   new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));

给 LynxView 固定的尺寸即可。

比如你想设置 400*200 大小的 LynxView:

// 可以直接指定 LynxView 的大小
LynxView({}).width('400px').height('200px');
// 也可以固定父节点的大小，设置百分比模式
LynxView({}).width('100%').height('100%');

如果你想让 LynxView 根据其内容自适应大小，可以不设置 LynxViewBuilder#frame，或通过 setLayoutWidth/HeightMode 设置 LynxViewSizeModeUndefined 或 LynxViewSizeModeMax 即可。

_lynxView.layoutWidthMode = LynxViewSizeModeUndefined;
_lynxView.layoutHeightMode = LynxViewSizeModeUndefined;

//或者，限制最大的宽度为400，最大高度为750
_lynxView.preferredLayoutWidth = 400;
_lynxView.preferredLayoutHeight = 750;
_lynxView.layoutWidthMode = LynxViewSizeModeMax;
_lynxView.layoutHeightMode = LynxViewSizeModeMax;

这里跟 Android 普通视图的排版约束是一致，比如给 LynxView 的设置排版参数是 WRAP_CONTENT，即可让 LynxView 的大小根据内容自适应:

parentView.addView(lynxview,
    new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT));

可以给 LynxView 设置 fitContentWidth 和 fitContentHeight 属性让 LynxView 的大小根据内容自适应宽高：

LynxView({ fitContentWidth: true, fitContentHeight: true });