smobiler adaptive different phone resolution

In smobiler can achieve adaptive layout different phone resolution by the relative or absolute layout.
For example, implement the layout in the following figure, FIG layout actually be divided into three parts, part 1 may be used Title control portion 2 may be used Panel (added IconMenuView in the Panel FIG effect can be achieved herein is not specifically described), part 3 using ToolBar control, particularly below.

lula20190601lula20190602
  


Absolute layout

New Form, Form Layout property to Absolute, first drag a Title control on the form, dock property to Top, and then drag to the ToolBar control, dock property to Bottom, and finally drag a Panel control, dock property set Fill.

lula20190603


This Title has been in top form, ToolBar at the bottom, while the Panel always stays full the remaining space.
Note:
1.dock property takes effect only on absolute layout
order 2. Note drag controls of the above steps if the first drag Panel and then dragged into the dock after setting ToolBar property, Panel control will cover toorbar control
3. Absolute layout reference https://www.smobiler.com/guide/layout.aspx


Relative layout

The new form, the form of Relative Layout property, form A Direction Column, followed by a drag control in the form Title, Panel a control, a ToolBar control, three control this Flex properties were set to 1 , 8,1.

lula20190604

Column Direction form is provided in order to allow the form control vertical alignment, Flex is a scaling factor for controlling the height control in the form of, Title 1 is a Flex, which form a height representing 1/10 of the height, accounting panel 8/10, toolbar representing 1/10
Note:
1.Flex scale factor, only apply to the relative layout
2. Note that the order of control drag
3. the relative layout reference https://www.smobiler.com/ guide / layout1.aspx   

Both layouts can make Title has been in top form, ToolBar at the bottom, while the Panel always stays full the remaining space, the controls do not appear because the phone screen resolution is a result of failure to support full screen.

NOTE: Form size and screen resolution is adaptive, Form if set width 300, high 500, when the display 300 is determined to correspond to the phone display width, i.e. the width corresponding to the phone screen 300 so that if the 18: 9 screen Form corresponding to a width of 300, high 600


Egg

How Smobiler the Label control based on the content adaptive size of it?
In the relative layout according Label control automatically hold large text controls, specific implementation:
1. Form Layout property Relative (Panel or the Layout property Relative);
2. label in form drag (or Panel) in controls, Size setting (0,0) can be realized.

Guess you like

Origin blog.51cto.com/14360220/2429067