SAPUI5 (04) - 控件的布局

作者: Stone0823 | 来源:发表于2016-12-25 20:04 被阅读930次

SAPUI5 (04) - 控件的布局
UI
Flutter 布局
第四周笔记
1.布局过程之测量阶段
Colum Row
学习WPF
WPF路由
创建自定义控件
Android学习笔记（一）

如果多个控件都放在页面上，OpenUI5 会怎么安排控件的位置呢？如何按自己的想法安排控件的位置呢？Layout 控件就是专门来对控件的位置进行管理的。本篇介绍表格型布局 ( grid layout）。

Grid Layout 控件简介

Grid Layout 控件负责将页面进行表格式布局，页面被分为 12 列，子控件从左至右排列。每个控件并不是占一列，OpenUI5 根据屏幕的大小，将屏幕分为 4 种，分别是特大 ( XL: extra large )、大 ( L: large )、中等 ( M: medium ) 和小 ( S: small )。特大的比如 PC 机的大桌面，大的比如 PC 的桌面，中等的比如平板，小的比如手机。默认情况下，每个控件在 XL 桌面上占 3 列，在 L 桌面上占 3 列，在 M 桌面上占 6 列，在
S 桌面上占 12 列。OpenUI5 用一个字符串表示为 XL3 L3 M6 S12，通过 defaultSpan 属性来设置。

当屏幕的尺寸变更的时候，OpenUI5 检测到尺寸的变化，根据上面的 4 个分类对控件的位置进行调整，从而实现所谓的 自适应。

Grid layout 控件宽度（width 属性），可以基于像素，或者基于页面宽度的相对比例。控件之间的间距可以通过 vSpacing 和 hSpacing 属性进行设置。

没有布局的控件位置是如何安排的？

假设我们现在编写一个含有选择问答题的页面。每一个问题提供 A、B 两种答案。示例的问答包括两个问题：

页面上有两个 Logo，哪一个更好?
是否否喜欢 JavaScript 语言？

页面用 OpenUI5 控件实现，代码都写在 index.html 中，源码如下：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

        <!-- Bootstrap -->
        <script src="resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.m"
                data-sap-ui-theme="sap_bluecrystal">
        </script>
        
        <!-- Application area -->
        <script>
            function initialization() {
                // 两个image为两个logo
                var oImage1 = new sap.m.Image({
                    src: "img/alice.png",
                    decorative: false,
                    alt: 'Alice'
                });
                
                var oImage2 = new sap.m.Image({
                    src: "img/Hellen.png",
                    decorative: false,
                    alt: 'Helen'
                });
                
                // 询问更喜欢哪一个logo
                var oLabel1 = new sap.m.Label("label1", {
                    text: "Which logo do you like better?"
                });             

                // 答案放在radioButton中
                var oRadioBtnGrp1 = new sap.m.RadioButtonGroup({
                    columns: 2,
                    ariaLabelledBy: oLabel1,
                    buttons: [
                        new sap.m.RadioButton({ text: "Left logo" }),
                        new sap.m.RadioButton({ text: "Right logo"}), 
                    ]
                });
                
                // 询问是否喜欢javascript
                var oLabel2 = new sap.m.Label({
                    text: "Do you like JavaScript?"});
                
                // 答案放在radioButton中 
                var oRadioBtnGrp2 = new sap.m.RadioButtonGroup({
                    columns: 2,
                    ariaLabelledBy: oLabel2,
                    buttons: [
                        new sap.m.RadioButton({text: "Yes"}),
                        new sap.m.RadioButton({text: "No" }),
                    ]
                });
                
                oImage1.placeAt("content");
                oImage2.placeAt("content");
                oLabel1.placeAt("content");             
                oRadioBtnGrp1.placeAt("content");
                oLabel2.placeAt("content");
                oRadioBtnGrp2.placeAt("content");
            };
            
            sap.ui.getCore().attachInit(initialization);
            
        </script>

    </head>
    
    <!-- UI area -->
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

运行一下，我们得到的页面如下图所示：

两个问题都在同一行中，显得比较乱。

Grid Layout （表格式布局）

OpenUI5 是从左到右依次对控件进行放置的。我们需要添加布局控件对这些控件位置进行管理管理。先将代码修改如下：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

        <!-- Bootstrap -->
        <script src="resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.m, sap.ui.layout"
                data-sap-ui-theme="sap_bluecrystal">
        </script>
        
        <!-- Application area -->
        <script>
            function initialization() {
                // 两个image为两个logo
                var oImage1 = new sap.m.Image({
                    src: "img/alice.png",
                    decorative: false,
                    alt: 'Alice'
                });
                
                var oImage2 = new sap.m.Image({
                    src: "img/Hellen.png",
                    decorative: false,
                    alt: 'Helen'
                });
                
                // 询问更喜欢哪一个logo
                var oLabel1 = new sap.m.Label("label1", {
                    text: "Which logo do you like better?"
                });             

                // 答案放在radioButton中
                var oRadioBtnGrp1 = new sap.m.RadioButtonGroup({
                    columns: 2,
                    ariaLabelledBy: oLabel1,
                    buttons: [
                        new sap.m.RadioButton({ text: "Left logo" }),
                        new sap.m.RadioButton({ text: "Right logo"}), 
                    ]
                });
                
                // 询问是否喜欢javascript
                var oLabel2 = new sap.m.Label({
                    text: "Do you like JavaScript?"});
                
                // 答案放在radioButton中 
                var oRadioBtnGrp2 = new sap.m.RadioButtonGroup({
                    columns: 2,
                    ariaLabelledBy: oLabel2,
                    buttons: [
                        new sap.m.RadioButton({text: "Yes"}),
                        new sap.m.RadioButton({text: "No" }),
                    ]
                });
                
                new sap.ui.layout.Grid({
                    content: [
                          oImage1,
                          oImage2,
                          oLabel1,
                          oRadioBtnGrp1,
                          oLabel2,
                          oRadioBtnGrp2
                    ]
                }).placeAt("content");
            };
            
            sap.ui.getCore().attachInit(initialization);
            
        </script>

    </head>
    
    <!-- UI area -->
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

注意代码有两个主要改变：

Bootstrap 的 data-sap-ui-libs="sap.m, sap.ui.layout" 增加了sap.ui.layout;
控件全部放在 Grid layout 控件中而不是 DIV 中，只有 Grid 控件放在
DIV 中。Grid layout 控件和这些控件是聚合关系。主要代码如下：

new sap.ui.layout.Grid({
    content: [
          oImage1,
          oImage2,
          oLabel1,
          oRadioBtnGrp1,
          oLabel2,
          oRadioBtnGrp2
    ]
}).placeAt("content");

运行改变后的代码，界面如下：

界面有改变，但两个问题没有分开，仍然不是我们想要的结果。我想把每个问题单独放一行，答案一行。

控件的 layoutData 属性

sap.ui.core.Element 类定义了 layoutData 属性、getLayoutData() 方法和 setLayoutData() 方法。控件都是 sap.ui.core.Element 类的间接子类，从而控件都可以利用这些属性和方法设定这个控件在页面中如何定位。setLayoutData() 方法的参数是 sap.ui.core.LayoutData 对象。因为我们现在使用的 Grid 布局，所以 layoutData 我们可以用
sap.ui.core.LayoutData 类的子类 sap.ui.layout.GridData。

以 sap.m.Label 控件为例，代码这样写：

var oLabel1 = new sap.m.Label("label1", {
    text : "Which logo do you like better?",
    layoutData: new sap.ui.layout.GridData({
        span: "XL12 L12 M12 S12"
    })
});

调整后代码如下：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
        
        <!-- Bootstrap -->
        <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.m, sap.ui.layout"
            data-sap-ui-theme="sap_bluecrystal">
            
        </script>
        
        <!-- Application area -->
        <script>
        
            function initialization() {
                // 两个image为两个logo
                var oImage1 = new sap.m.Image({
                    src : "img/alice.png",
                    decorative : false,
                    alt : 'Alice'
                });
        
                var oImage2 = new sap.m.Image({
                    src : "img/Hellen.png",
                    decorative : false,
                    alt : 'Helen'
                });
        
                // 询问更喜欢哪一个logo
                var oLabel1 = new sap.m.Label("label1", {
                    text : "Which logo do you like better?",
                    layoutData: new sap.ui.layout.GridData({
                        span: "XL12 L12 M12 S12"
                    })
                });
        
                // 答案放在radioButton中
                var oRadioBtnGrp1 = new sap.m.RadioButtonGroup({
                    columns : 2,
                    ariaLabelledBy : oLabel1,
                    buttons : [ 
                        new sap.m.RadioButton({text : "Left logo"}), 
                        new sap.m.RadioButton({text : "Right logo"}), 
                    ],
                    layoutData: new sap.ui.layout.GridData({
                        span: "XL12 L12 M12 S12"
                    })
                });
        
                // 询问是否喜欢javascript
                var oLabel2 = new sap.m.Label("label2", {
                    text : "Do you like JavaScript?",
                    layoutData: new sap.ui.layout.GridData({
                        span: "XL12 L12 M12 S12"
                    })
                });
        
                // 答案放在radioButton中 
                var oRadioBtnGrp2 = new sap.m.RadioButtonGroup({
                    columns : 2,
                    ariaLabelledBy : oLabel2,
                    buttons : [ 
                        new sap.m.RadioButton({text : "Yes"}),
                        new sap.m.RadioButton({text : "No"}), 
                    ],
                    layoutData: new sap.ui.layout.GridData({
                        span: "XL12 L12 M12 S12"
                    })
                });
        
                new sap.ui.layout.Grid({
                    content : [ 
                         oImage1, 
                         oImage2, 
                         oLabel1, 
                         oRadioBtnGrp1, 
                         oLabel2,
                         oRadioBtnGrp2 ]
                }).placeAt("content");
            };
        
            sap.ui.getCore().attachInit(initialization);
            
        </script>   
    </head>

    <!-- UI area -->
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

调整后界面如下：

Responsive Margin

上面的界面中，控件和页面没有任何间距。我们可以在 div 的 class 属性中添加 sapUiResponsiveMargin来解决。

    <!-- UI area -->
    <body class="sapUiBody sapUiResponsiveMargin" role="application">
        <div id="content"></div>
    </body>

现在界面如下，在 Logo 上面有了一些间距 ( margin )：

达到目的。

SAPUI5 (04) - 控件的布局
如果多个控件都放在页面上，OpenUI5 会怎么安排控件的位置呢？如何按自己的想法安排控件的位置呢？Layout ...
UI
1、布局线性布局相对布局框架布局表格布局 2、控件设置控件的可见性，使用的是setVisibility()...
Flutter 布局
flutter布局 flutter部分分两种，一种是单个子控件的布局一种是多个子控件的布局常用的单个子控件布局 ...
第四周笔记
用户开发中的布局开发布局和控件（完成UI设计）涉及布局layout和控件View 线性布局和相对布局显示文本...
1.布局过程之测量阶段
1.什么是布局过程布局是计算控件大小和位置的过程。布局过程分为两个阶段测量阶段计算控件及其子控件的大小布局...
Colum Row
Row水平控件 Expanded 灵活布局（撑开） Column垂直布局控件 crossAxisAlignm...
学习WPF
控件类型大体可以分为6类1.布局控件可以容纳多个布局或者嵌套其他布局的控件，用于UI上组织和排列控件，其父类是P...
WPF路由
举例：窗口-用户控件-布局控件-…-按钮按钮的点击事件：先由按钮的Click相应，然后….，然后布局控件，然后用...
创建自定义控件
自定义控件 - 引入布局常见控件和布局的继承结构所有的控件都是直接或者间接继承于View所有的布局都是直接或者...
Android学习笔记（一）
★布局。相对布局： *停靠父控件边界（boolean） layout_alignParentTop（停靠父控件上...

SAPUI5 (04) - 控件的布局

Grid Layout 控件简介

没有布局的控件位置是如何安排的？

Grid Layout （表格式布局）

控件的 layoutData 属性

Responsive Margin

相关文章

SAPUI5 (04) - 控件的布局

UI

Flutter 布局

第四周笔记

1.布局过程之测量阶段

Colum Row

学习WPF

WPF路由

创建自定义控件

Android学习笔记（一）

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

ui5详细教程Stone