Skip to main content
Version: 7.1.1

ApplyLayout

ApplyLayout This section describes that what exactly means of using apply layout. API Reference: applyLayout

What is apply layout?​

This method is usually called when something has changed which has invalidated the layout of view such as view changes will affect the size, appearance , re-positioned and etc. It will result on being recalculated and be redrawn eventually.

The above diagram indicates the process of applyLayout. The measure step determines the view's size that determination includes the view's descendants size and has to be agreed by the view parent. The layout step sets position and size for view. The draw step can draw itself based on determination of size and position.

caution

To change dimensions of an element on runtime, you should always use contxjs methods of dispatch actions. Refer: https://github.com/smartface/contxjs

What is the usage & impact of apply layout?​

In some cases, the usage varies depending on operation system.

Android​

Typically the usage of apply layout also differs. Such as you might apply to its parent or child itself. Because of there is no guarantee that the parent will then re-layout its children. Such as, flexlayout height and width already given based on its parent but not to its children then flexlayout no need re-layout its children when apply layout is called. In those cases, apply layout should be implemented to view itself.

iOS​

There is a few inconsistent behavior of apply layout behavior. The recommended way for developer is usually necessary to call applyLayout of page root view.

If the layout is inside of ListViewItem, applyLayout should be called of ListViewItem itself on iOS

info

In most cases, calling applyLayout on the root view will suffice on both platforms.

If it fails, developer should resort to write applyLayout snippet like shown below:

import System from "@smartface/native/device/system";
function recalc(): void {
  // Considering the function is in page scope
  const myFlexLayout = this.myFlexLayout;
  this.myFlexLayout.dispatch({
    type: "updateUserStyle",
    userStyle: {
      height: 300,
      width: 200,
      visible: true,
    },
  });
  System.OS === System.OSType.IOS ? this.layout.applyLayout() : myFlexLayout.applyLayout();
}

How to invalidate a View?​

To invalidate a View and automatically recalculate its layout values, you can mark Views as dirty by using dirty method and the layouts will be recalculated. The dirty method is useful for text-based views such as Label, MaterialTextBox etc.

A common usage is shown in the following example:

scripts/pages/pgDynamicSize.ts
import PgDynamicSizeDesign from "generated/pages/pgDynamicSize";
import { withDismissAndBackButton } from "@smartface/mixins";

export default class PgDynamicSize extends withDismissAndBackButton(
  PgDynamicSizeDesign
) {
  constructor() {
    super({});
  }

  /**
   * @event onShow
   * This event is called when a page appears on the screen (everytime).
   * @param {Object} parameters passed from Router.go function
   */
  onShow() {
    super.onShow();
    const newText =
      "Some really long text that will overflow into more lines, Some really long text that will overflow into more lines, Some really long text that will overflow into more lines, Some really long text that will overflow into more lines, Some really long text that will overflow into more lines";
    setTimeout(() => {
      this.flDynamicSize.setText(newText, this);
    }, 1500);
  }

  /**
   * @event onLoad
   * This event is called once when page is created.
   */
  onLoad() {
    super.onLoad();
  }
}

For this example, a label's text has changed dynamically on the runtime, and by calling the dirty() method of the label, the label and its parent flexLayout's layouts have recalculated automatically.

caution

To make yourView.dirty() method work properly on iOS it is necessary to call applyLayout of page root view.