【GeneXus】开发移动APP时,如何使用Canvas进行布局?
当我们开发移动端APP的时候,经常遇到一种布局方式,那就是层级的布局,比如:一张照片我想在照片的上面显示它的名称,但不影响我照片展示的布局大小,也就是这个名称是浮在照片上的,如图:
如果要实现这样的布局方式,应该怎么做呢? 这种布局方式在GeneXus中变得非常简单,接下来我们就看一下如何实现。
首先我们在SDPanel中有个控件叫Canvas,它是允许您使用绝对定位准确地对布局中的元素进行控制,首先我们把它拖入我们的页面中,然后再把我们需要放入的元素放到控件中,然后直接调整它们的显示的位置和层级即可,如图:
那么我们怎么调整它每个元素显示的位置及大小呢?
每当我们拖一个元素到CanVas 中,这个元素都会有对应的属性去设置它的高度宽度及在整个CanVas 中显示在哪个位置的属性,如图:
我简单的给大家说下每个属性的作用:
1) Top : 从控件到Canvas顶部的距离,(也就是说我们的元素距离 Canvas 顶部的距离,可以是DIP或者百分比 )
2) Left: 从控件到Canvas左侧的距离(也就是说我们的元素距离 Canvas 左边的距离,可以是DIP或者百分比 )
3) Bottom: 从控件到Canvas底部的距离(也就是说我们的元素距离 Canvas 底部的距离,可以是DIP或者百分比 )
4) Right: 从控件到Canvas右侧的距离(也就是说我们的元素距离 Canvas 右边的距离,可以是DIP或者百分比 )
5) Width:控件的宽度(也就是我们放进去的元素要显示的宽度,可以是DIP或者百分比)
6) Height:控件的宽度(也就是我们放进去的元素要显示的高度,可以是DIP或者百分比)
7) Z-order:指定控件的堆栈顺序。(堆栈顺序较大的控件始终位于堆栈顺序较低的控件前面,值是数字)
注:Left,Right,Top和Bottom属性的值可以是负数。这意味着我们的元素将以相反的方向移动
如下图所示,我设置了一些属性值:
首先我放入的图片我不限制它的宽度,我设置了图片显示的高度也就是150dip ,然后我让它居上50%,居下50%,那也就是它是在整个手机屏幕的中间显示,它的Z-order是0,说明它是在最底下那层显示,
接下来看下我们的文字对应的属性设置,如图:
其余的属性和上一个相似,唯独Z-order是1 那么也就说明我的文字是在图片的前一层。
下面就是我们运行后的效果图:
注:CanVas 不局限于图片和文字的 使用,它可以灵活性的使用和放入各种元素,控件使用,以上只是说一下它的使用方法。
参考wiki链接:https://wiki.genexus.com/commwiki/servlet/wiki?22452,Canvas%20control
【GeneXus】开发移动APP时,如何使用Canvas进行布局?的更多相关文章
- 开发移动 APP 时,你应注意这 5 个细节
智能手机的普及带动了大批移动应用的诞生,这些应用能够帮助人们解决日常生活所面临的种种问题.Smart Insights 发表的一份报告指出,移动应用占人们使用智能手机总时间的89%,因此,为了确保你所 ...
- 跨平台移动APP开发进阶(二)HTML5+、mui开发移动app教程
前端开发APP,从HBuilder开始~ 序 通过 HTML5 开发移动App 时,会发现HTML5 很多能力不具备.为弥补HTML5 能力的不足,在W3C 中国的指导下成立了www.HTML5Plu ...
- ionic3+angular4开发混合app 之自定义组件
这里主要是记录ionic3+angular4开发混合app时自定义组件,我想自定义组件的方法和angular4应该类似,具体在纯angular4中自定义组件,暂时没有实践,个人觉得差别不大,之后实践了 ...
- UWP开发:APP之间的数据交互(以微信为例)
目录 说明 UWP应用唤醒方式 跟微信APP交互数据 APP之间交互数据的前提 说明 我们经常看到,在手机上不需要退到桌面,APP之间就可以相互切换,并且可以传递数据.比如我在使用知乎APP的时候,需 ...
- 【转载】用Ionic开发hybrid APP
使用phonegap开发APP的优劣在此不必细说,快速,简单,跨平台,以及随着iOS,Android本身对webview优化所带来的不错的性能,便是其独有的优势.而且私以为在目前激烈而又变化快速的移动 ...
- 分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面
此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介 ...
- 后移动互联网时代:到底还要不要开发一个App?
后移动互联网时代,到底是什么样的一个时代? 首先,后移动互联网时代中,产生头部应用的几率变小了,像微信这样巨头式的App很难在产生第二个.其次,后移动互联网时代,物联网发展迅速,所有的智能硬件都需要一 ...
- 亲手使用Sencha Touch + phonepag开发Web APP随笔 -- 第一个APP
参考博文: [Phonegap+Sencha Touch] 移动开发1.准备工作 [Phonegap+Sencha Touch] 移动开发2.PhoneGap/Cordova初步使用 经过差不多1 ...
- 开发客户端软件时,出现System.Windows.Markup.XamlParseException错误
开发客户端软件时,出现System.Windows.Markup.XamlParseException错误,通过查看错误消息,发现TCPIP的一个COM组件在安装软件过程中被删除了,重新注册了一下TC ...
随机推荐
- HTML--表格与表单
一.表格 <table></table>表格 width:宽度.可以用像素或百分比表示. 常用960像素. border:边框,常用值为0. cellpadding:内容跟边框 ...
- Linux中ifcfg-eth0配置参数说明
ifcfg-eth0在/etc/sysconfig/network-scripts下, 其配置如下: DEVICE=物理设备名IPADDR=IP地址NETMASK=掩码值NETWORK=网络地址BRO ...
- [转]SpringBoot整合Swagger2以及生产环境的安全问题处理
1.创建springboot项目 https://www.cnblogs.com/i-tao/p/8878562.html 这里我们使用多环境配置: application-dev.yml(开发环境) ...
- Tomcat停,图片名字中文显示不出来
Tomcat停,图片名字中文显示不出来 Tomcat下,图片名字中文显示不出来在tomcat的server.xml中加入URIEncoding="utf-8"<Con ...
- Spring Security 中的 Bcrypt
最近在写用户管理相关的微服务,其中比较重要的问题是如何保存用户的密码,加盐哈希是一种常见的做法.知乎上有个问题大家可以先读一下: 加盐密码保存的最通用方法是? 对于每个用户的密码,都应该使用独一无二的 ...
- H3C 环路避免机制一:路由毒化
- P1074 彩票摇奖
题目描述 为了丰富人民群众的生活.支持某些社会公益事业,北塔市设置了一项彩票.该彩票的规则是: (1) 每张彩票上印有 7 个各不相同的号码,且这些号码的取指范围为 1~33. (2) 每次在兑奖前都 ...
- centos7 安装R和RstudioServer版
参考: http://www.cnblogs.com/inspursu/p/4275701.html http://blog.csdn.net/u010022051/article/details/5 ...
- IE显示 “Promise”未定义,vue项目兼容ie的两种方案
第一种方法: 直接在html中加入js链接: <script src = "https://cdn.polyfill.io/v2/polyfill.min.js">&l ...
- 11大Java开源中文分词器的使用方法和分词效果对比,当前几个主要的Lucene中文分词器的比较
本文的目标有两个: 1.学会使用11大Java开源中文分词器 2.对比分析11大Java开源中文分词器的分词效果 本文给出了11大Java开源中文分词的使用方法以及分词结果对比代码,至于效果哪个好,那 ...