weex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From 王乾元 <wqyfavo...@gmail.com>
Subject Fwd: [Discuss] Better support screen size change and supporting re-layout after screen orientation changed.
Date Wed, 29 May 2019 05:53:29 GMT
Hi, all

Since Weex was born, we don't support hot-layout after screen orientation
changed. And for pad devices, we are not supporting
very well. There are multiple issues related to this feature on github.

https://github.com/apache/incubator-weex-site/issues/399
https://github.com/apache/incubator-weex/issues/2103
https://github.com/apache/incubator-weex/issues/2219

I cannot list all issues in this mail, but from inside Alibaba and outside
developers. We must support this feature.

Long ago, Weex on iOS/Android provided interface to set view-port-width for
each page via meta module
<https://weex.apache.org/docs/modules/meta.html#setviewport>.
And currently, on initialization of Weex, we set current screen size to
WeexCore environment variable.

CGSize screenSize = [UIScreen mainScreen].bounds.size;

env->SetDeviceWidth(std::to_string(screenSize.width));

env->SetDeviceHeight(std::to_string(screenSize.height));

For all pages, we use global device-width, page's view-port-width and px
values of styles to determine coordinates and dimensions of
a component.

There are mainly two issues here:

1. Our layout system receives and manipulates SYSTEM UIKit coordinates.
       For example, on iOS.
              375px in CSS style, 750 view-port-width, and iPhone6 screen
width 375(actually 750 physical pixels with screen scale as 2)
       produces 187.5 width value to layout system, and after layout we set
the UIView's width as 187.5 and it displays as half screen on iPhone6.

    So view-port-width and screen-width both matter in converting a style
in px value to final UIView frame.

2. After unit converting in Issue 1, we set the UIKit value to layout node
and we dropped the raw style value for better memory usage.
Unlike browsers which will reserve raw CSS style values, we cannot
HOT-RELOAD-LAYOUT a page after screen orientation changes. Currently, we can
only let users to reload all page from JS after screen changes.

For issue 1, we are now providing a new API to set a page specific required
device size.
For issue 2, we should reserve all raw css styles for a page which should
be hot-layout-reloaded. And whether to reserve styles is up to user.

I have committed my modifications of WeexCore and iOS to
https://github.com/wqyfavor/incubator-weex/commit/3a9ea7950a1a63550a3711a2e8450215ffa8dbc7
In this patch, I supported hot-reload a page on iOS.

Changes
a) Add a flag reserve_css_styles for RenderPage which controls whether to
reserve all raw CSS style values in RenderObject.
b) Add setDeviceSize method to meta module so that JS can determine the
screen size it uses when rendering a page.
c) Add setPageArguments method to meta module so that JS can pass
reserveCssStyles as "true" to turn on reserve_css_styles flag of RenderPage.
d) Add setPageKeepRawCssStyles, setPageArgument, setViewportWidth,
setPageRequiredWidth methods to WXSDKInstance so that native developers can
determine
 flags and page required specific view-port-width, device-size.
e) Add reloadLayout method to hot reload a page.

Usage
On iOS, after screen orientation changes, we set new page required width to
instance and call reloadLayout.

- (*void*)didRotateFromInterfaceOrientation:(UIInterfaceOrientation
)fromInterfaceOrientation

{

    CGFloat w = [UIScreen mainScreen].bounds.size.width;

    CGFloat h = [UIScreen mainScreen].bounds.size.height;

    NSLog(*@"rotate from: %@, screen size(%f, %f)"*,
convertInterfaceOrientationToString(fromInterfaceOrientation), w, h);



    *if* (_instance) {

        //[_instance setViewportWidth:w / MIN(w, h) * WXDefaultScreenWidth];

        [_instance setPageRequiredWidth:w height:h];

        [_instance reloadLayout];

    }

}

Problems
For all styles in 'px' or without any suffix(also treated as 'px'), when
screen size changed and we triggered hot-reloading. The actual converted
value will also change
which will make text font size looks bigger. So for a page which requires
mutli-size screen fitting. It must use wx unit for styles that should not
fit screen size.

You can check this demo. In this demo, I set text and panel height to use
'wx' unit so that they will look the same size on different screen sizes.
http://editor.weex.io/p/wqyfavor/scroller/commit/b0c0b0af634a221eb4746cab9d803da6

TODO
1. We should discuss the way proposed by me to support this feature.
2. After discussion, Android needs develop to support this feature which
will be easy because the main changes are in WeexCore.

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message