UniWebView

# Position and Size

UniWebView has two ways to determine where the web view should be displayed on the screen:

  • Setting a frame directly, or
  • Setting a reference UI element

# Setting Frame

You could set the position and size by using Frame property.

# Origin and Size

A frame is a combination of an origin (where it should be) and a size (how large it should be).

The coordinate system used in UniWebView is top-left based. The zero point (0, 0) in the coordinate is the most top-left point of your screen. And the size is defined by Unity Screen, with Screen.width and Screen.height as its max:

In this coordinate system, you could set the position and size of the web view quite easy:

// Full screen web view:
webView.Frame = new Rect(0, 0, Screen.width, Screen.height);

// Bottom half of screen:
webView.Frame = new Rect(0, Screen.height / 2, Screen.width, Screen.height / 2);

// Insets from all sides by 10:
webView.Frame = new Rect(10, 10, Screen.width - 20, Screen.height - 20);

// 200 x 200 web view at point (100, 100)
webView.Frame = new Rect(100, 100, 200, 200)

Although you can set the absolute value, keep in mind that the screen sizes are varying. Usually, you need to calculate a frame based on the current Screen before set it.

If you want more control on the position and size, UniWebView supports another way to get benefit from Resolution & Device Independence concept from Unity UI and Canvas Scaler. Read the Using Reference UI Element below to know how to use it.

IMPORTANT

Frame property will be ignored if you use the method described in "Using Reference UI Element" (or say, if the ReferenceRectTransform property is not null).

# Orientation Change

When setting Frame property, it is only for the current screen. If your game supports different orientation, you need to update the Frame to a new value.

Listen to the OnOrientationChanged event and take the response to update Frame property when this event raised. For example, the code below will set the web view full screen and also keep it full screen when the orientation changes:

// Set the frame to full screen. Say it is portrait 320x640.
webView.Frame = new Rect(0, 0, Screen.width, Screen.height);

// OnOrientationChanged will be called whenever the screen orientation changes.
webView.OnOrientationChanged += (view, orientation) => {
    // Set full screen again. If it is now in landscape, it is 640x320.
    webView.Frame = new Rect(0, 0, Screen.width, Screen.height);
};

If you do not set the Frame again in the OnOrientationChanged event, the web view size will keep what it is initially set (320x640), and your layout will be broken.

# Using Reference UI Element

Unity has a responsive, nicely designed UI system: Unity UI. It considers screen canvas scaler and every rendered Unity UI comes with a RectTransform. You can set a RectTransform to UniWebView's ReferenceRectTransform, and UniWebView will follow this given RectTransform to determine its position and size. So you could skip to calculate the Frame and adapt to devices with different sizes and resolutions.

Unity UI could be designed to fit for multiple resolutions by using a canvas with Canvas Scaler. With this feature, UniWebView can also be adaptive. If you are not familiar with it, we recommend you to read the Designing UI for Multiple Resolutions (opens new window) first.

Once you have a RectTransform, just set the property:

RectTransform myUITransform = ...
webView.ReferenceRectTransform = myUITransform;

And everything should be done.

The RectTransform supports all three kinds render mode ("Screen Space - Overlay", "Screen Space - Camera" and "World Space") on the first Canvas from the transform above. However, if you are using a camera-depended space, please make sure you have set up the camera correctly for the render mode. Otherwise, RectTransform will fall back as there is no camera and the size/location might be incorrect.

# Handle Rect Transform Changing

Similar to the case for Frame, ReferenceRectTransform only considers the current state of the referenced transform when set. However, since we know the reference rect will be changed when the screen orientation changes, there is no need to update it again in OnOrientationChanged event. UniWebView will update its position and size automatically for you.

But for other changes besides of the orientation change, UniWebView cannot detect it automatically. You take the responsibility to update the web view position and size in this case. In Unity, the OnRectTransformDimensionsChange in UIBehavior will be called when the attached rect transform changed. Please call UniWebView's UpdateFrame() in this method to give UniWebView a chance to calculate correct layout:

// In a UIBehavior script:

// This method is called whenever the associated `rectTransform` is changed.
void OnRectTransformDimensionsChange() {
    // Update web view's frame to match the reference rect transform.
    webView.UpdateFrame();
}

← Transition →