Embedding LynxView into Native View

LynxView itself is a native view that can easily be used as a full-screen view, or be embedded within a non-full-screen native view.

LynxView corresponds to the Page element. It only allows the client to set size constraints on LynxView, and you generally cannot directly modify the Page's style to set its size.

The client sets different size constraints on LynxView, which translates to setting size constraints on the Page. The Lynx layout engine uses these constraints to calculate the size of the Page node and all its child nodes.

Constrain the size of LynxView

Constraint mode

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

LynxView with fixed size

Use theLynxViewBuilder#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);
         ...
    }];

UsepreferredLayoutWidth/preferredLayoutHeight andlayoutWidthMode/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));

LynxView with flexible size

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));
Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.