zoukankan      html  css  js  c++  java
  • 【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

  • 相关阅读:
    在Salesforce中创建Approval Process
    用C#基于WCF创建TCP的Service供Client端调用
    用 C# 实现一个简单的 Rest Service 供外部调用
    在Salesforce中将 Decimal 数据转换成美元格式
    在Asp.Net MVC中PartialView与EditorFor和DisplayFor的区别
    在Salesforce中对某一个Object添加自定义的Button和Link
    【LeetCode】227. Basic Calculator II
    【LeetCode】226. Invert Binary Tree
    【LeetCode】225. Implement Stack using Queues
    【LeetCode】224. Basic Calculator
  • 原文地址:https://www.cnblogs.com/genexusblog/p/10893097.html
Copyright © 2011-2022 走看看