#Embedding LynxView into Native View

You should proactively set its size constraints, when creating a LynxView on iOS.

There are two ways to set size constraints for LynxView.

• Using updateViewportWithPreferredLayoutWidth and setLayoutWidthMode、setLayoutHeightMode to set fixed or flexible sizes.
• Using lynxviewbuilder#frame to set fixed size.

Supported constraint modes:

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

• LynxViewSizeModeUndefined

  LynxView's size is determined by Page content, with no parent constraints.

• LynxViewSizeModeExact

  LynxView's size is fixed, same as the Page element's size.

• LynxViewSizeModeMax

  LynxView's maximum width or height.

#Get size constraints in the onMeasure method.

Android system provides an onMeasure for views, during which LynxView receives size constraints from its parent view. Lynx will complete the layout of all elements and calculate the size of LynxView within the system's onMeasure function, and then set the correct value using setMeasuredDimension.

View.MeasureSpec values:

• UNSPECIFIED

  LynxView's size is determined by Page content, with no parent constraints.

• EXACTLY

  LynxView's size is fixed, same as the Page element's size.

• AT_MOST

  LynxView's maximum width or height.

When the content of the page needs to be re-layout, Lynx will call the system's requestLayout, which triggers onMeasure to execute again.

#Preset Width and Height, Trigger Layout Early

When creating LynxView, you can preset its size constraints using LynxViewBuilder#setPresetMeasuredSpec, with parameters identical toonMeasure. This triggers layout during the rendering pipeline instead of waiting for onMeasure.

If a change in measureSpec is detected, the layout will re-trigger to ensure LynxView's size is correct.

For example, you can preset a fixed size of 400x200 with the following code:

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);;

#Getting Size Constraints in onMeasureSize

The ArkUI framework passes node information and size ranges to custom components through onMeasureSize when determining component dimensions.

At this stage, the size constraints given to LynxView by the outer view can be obtained. Lynx will complete the layout of all nodes within the system's onMeasureSize function and calculate the size of LynxView

#Use the LynxViewBuilder#frame

You can set the frame property size when creating LynxView, so the size of LynxView is fixed.

For example, if you want to fix the size of LynxView to 400x200, you can do it as follows:

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

#Use preferredLayoutWidth/preferredLayoutHeight and layoutWidthMode/layoutHeightMode

For example:

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

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

As long as the outer container constraint for LynxView is EXACTLY, the size of LynxView will be fixed.

For example, if you want to set a 400x200 sized LynxView:

//You can directly specify the size of LynxView
parentView.addView(lynxview, new ViewGroup.LayoutParams(400, 200));

//You can also fix the parent node's size and set it to MATCH_PARENT
parentView.addView(lynxview,
   new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));

You can give LynxView a fixed size.

For example, if you want to set a LynxView with a size of 400*200:

// You can directly specify the size of LynxView
LynxView({}).width('400px').height('200px');
// You can also fix the parent node size and set percentage mode
LynxView({}).width('100%').height('100%');

If you want LynxView to adapt its size based on its content, you can either avoid setting LynxViewBuilder#frame, or set setLayoutWidth/HeightMode to LynxViewSizeModeUndefined or LynxViewSizeModeMax.

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

//Alternatively, limit the width to 400 and the height to 750.
_lynxView.preferredLayoutWidth = 400;
_lynxView.preferredLayoutHeight = 750;
_lynxView.layoutWidthMode = LynxViewSizeModeMax;
_lynxView.layoutHeightMode = LynxViewSizeModeMax;

The layout constraints here are consistent with the Android views.

For example, setting the layout parameters for LynxView to WRAP_CONTENT will make LynxView size adapt to its content.

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

You can set the fitContentWidth and fitContentHeight properties for LynxView to make its size adapt to the content's width and height:

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