smobiler自适应不同手机分辨率
在smobiler中可以通过相对布局或者绝对布局实现自适应不同手机分辨率。
例如实现下图中的布局,图中的布局实际可以分成3个部分,部分1可以使用title控件,部分2可以使用panel(在panel中加入iconmenuview可以实现图中效果,本文不具体说明),部分3 使用toolbar控件,具体见下文。
绝对布局
新建窗体,窗体的layout属性设置absolute,首先在窗体中拖入一个title控件,dock属性设置top,再拖入以toolbar控件,dock属性设置bottom,最后再拖入一个panel控件,dock属性设置fill。
这样title一直处于窗体的顶部,toolbar处于底部,而panel始终撑满剩余的空间。
注:
1.dock属性只在绝对布局下生效
2.需要注意控件拖入的顺序,上述的步骤中如果先拖入panel再拖入toolbar设置dock属性后,panel控件会覆盖toorbar控件
3.绝对布局参考https://www.smobiler.com/guide/layout.aspx
相对布局
新建窗体,窗体的layout属性设置relative,窗体的direction设置column,接着在窗体中拖入一个title控件,一个panel控件,一个toolbar控件,将这个三个控件的flex属性分别设置为1,8,1。
窗体的direction设置column是为了让窗体中的控件垂直排列,flex是比例因子,用于控制控件在窗体中的高度,title的flex为1,其高度占窗体高度的1/10,panel占8/10,toolbar占1/10.
注:
1.flex比例因子,只在相对布局下生效
2.需要注意控件的拖入顺序
3.相对布局参考 https://www.smobiler.com/guide/layout1.aspx
上述两种布局都可以使得title一直处于窗体的顶部,toolbar处于底部,而panel始终撑满剩余的空间,不会出现因手机屏幕分辨率导致的控件未能撑满屏幕。
补充:窗体大小和屏幕分辨率是自适应 ,form若设置宽300,高500,显示的时候判断300为手机的宽来对应显示,即手机屏幕的宽度对应300 所以若是18:9的显示屏 对应的form为宽300,高600
彩蛋
smobiler中label控件如何根据内容自适应大小呢?
在相对布局下label控件可根据文本自动撑大控件,具体实现:
1.将窗体的layout属性设置relative(或者panel的layout属性设置relative);
2.在窗体(或者panel)中拖入label控件,size设置(0,0)即可实现。
推荐阅读
-
Android字体大小自适应不同分辨率的解决办法
-
smobiler自适应不同手机分辨率
-
一个已经完成的PC网站,如何快速改造,让它能适应平板、手机等不同分辨率?_html/css_WEB-ITnose
-
css判断不同分辨率显示不同宽度布局实现自适应宽度_html/css_WEB-ITnose
-
css判断不同分辨率显示不同宽度布局实现自适应宽度
-
网页怎么自适应不同的分辨率_html/css_WEB-ITnose
-
如何让网页自适应手机屏幕分辨率_html/css_WEB-ITnose
-
怎么才能让多张图片在手机不同分辨率下居中显示_html/css_WEB-ITnose
-
网页怎么自适应不同的分辨率_html/css_WEB-ITnose
-
css判断不同分辨率显示不同宽度布局实现自适应宽度_html/css_WEB-ITnose