Question

我想根据所使用的移动设备调整按钮的位置。

^{（当前按钮位置）}

我想根据移动设备调整的位置点击此处。

到目前为止，我已经提出以下代码来处理调整（在onRouteMatched中）：

this.getView().byId('idBtn').onAfterRendering = function() {
  jQuery.sap.delayedCall(100, this, function() {
    var btnClnt = this.getView().byId("idBtn").getDomRef().getBoundingClientRect();
    if (sap.ui.Device.system.phone === true) {
      var marginTopVal = "";
      /*if (sap.ui.Device.os.name === "iOS") {
        jQuery(this.getDomRef()).css({
          'margin-top': '355px'
        });
        return;
      }*/

      // Portrait mode

      if (sap.ui.Device.resize.width === 375) { //- 305 for iphone6 on fiori client via cloud launchpad
        marginTopVal = window.innerHeight - btnClnt.bottom - 305;
        jQuery(this.getDomRef()).css({
          'margin-top': String(marginTopVal + "px")
          //'margin-top': '300px'
        });
      } else if (sap.ui.Device.resize.width === 360) { // -165 works properly on andriod fiori client via cloud launchpad
        marginTopVal = window.innerHeight - btnClnt.bottom - 165;
        jQuery(this.getDomRef()).css({
          'margin-top': String(marginTopVal + "px")
          //'margin-top': '180px'
        });
      }
    }
  });
}

在下面的屏幕截图中，您可以看到按钮更改的位置。

我希望将其位置固定在每个Android和iOS移动设备上。

请建议如何在一个地方固定按钮的位置。

Answer 1

也许“FlexBox”解决了您的问题？请测试以下示例：

<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta charset="utf-8">

    <title>Centered button</title>

    <script id='sap-ui-bootstrap' src='/sapui5/resources/sap-ui-core.js' data-sap-ui-theme='sap_belize' data-sap-ui-libs='sap.m'
      data-sap-ui-xx-bindingSyntax='complex'></script>

    <script id="myXml" type="text/xmldata">
      <mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="myController" displayBlock="true">
        <App>
          <Page title="Centered Button">
            <FlexBox height="100%" alignItems="Center" justifyContent="Center">
              <items>
                <Button text="Start" />
              </items>
            </FlexBox>
          </Page>
        </App>
      </mvc:View>
    </script>

    <script>
      sap.ui.controller("myController", {});
      sap.ui.xmlview({
        viewContent: jQuery('#myXml').html()
      }).placeAt("content");
    </script>

  </head>

  <body id='content' class='sapUiBody'>
  </body>

</html>

Answer 2

通常，SAPUI5使用容器控件，以便UI5根据屏幕大小调整屏幕布局。在UX设计指南中，there is an article。

例如，控件sap.m.Page包含根据屏幕大小由UI5调整的页眉和页脚。然后，UI5中的图标和按钮在不同的screem sozes中对齐。

调整移动设备中的按钮位置

2 个答案: