2

我正在创建一个带有图像的简单应用程序。我像这样创建应用程序：

function createApplication(){
  var app = UiApp.createApplication().setTitle("My Simple App");
  mainImage = app.createImage("URL TO IMAGE");
  app.add(mainImage);
  return(app);
}

这会将图像放在屏幕的左上角。有人可以告诉我如何使图像居中吗？

非常感谢

4

3 回答 3

4

我刚刚找到了另一种不错的方法。

默认情况下，面板会缩小以完全适合其内容。这很好，因为所有小部件都彼此非常接近。所以我们在这里所做的，我们添加一个 fullPanel - 填充整个浏览器区域。然后添加我们应用程序的 mainPanel，并在其中放置我们需要的任何小部件。

+--fullPanel-----------------+
|                            |
|                            |
|       +-mainPanel--+       |
|       |            |       |
|       |            |       |
|       +------------+       |
|                            |
|                            |
+----------------------------+

结果？

  • mainPanel 中的所有小部件都彼此完美对齐
  • mainPanel 始终位于中心

有代码：

function createApplication(){
  var app = UiApp.createApplication().setTitle("My Simple App");

  /* Main application Panel */
  var mainPanel = myApp.createVerticalPanel();

  /* Add any widgets to this Panel */
  mainImage = app.createImage("URL TO IMAGE");
  mainPanel.add(mainImage);

  /* Create a panel that will fill all area of browser */
  var fullPanel = myApp.createVerticalPanel();
  fullPanel.setHeight('100%');
  fullPanel.setWidth('100%');
  fullPanel.setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER);
  fullPanel.setVerticalAlignment(UiApp.VerticalAlignment.MIDDLE);
  fullPanel.add(mainPanel);

  app.add(fullPanel);
  return(app);
}
于 2013-05-15T11:31:58.443 回答
4

您可以使用setStyleAttribute()并参考一些CSS 文档

例如尝试这样（我真的不是 CSS 专家，所以如果它不优雅，请不要怪我;-)

function testImage(){
  var app = UiApp.createApplication().setTitle("My Simple App").setHeight('700').setWidth('900');
  mainImage = app.createImage("https://dl.dropbox.com/u/211279/Time-change-clock_animated_TR80.gif")
  .setStyleAttribute('position','relative').setStyleAttribute('left','50%').setStyleAttribute('top','50%')
  app.add(mainImage);
  ss=SpreadsheetApp.getActive()
  ss.show(app)
}

注意：您还可以使用 PX(pixels) 而不是 % 来定位图像，并且正如您所注意到的，我在电子表格 UI 中对此进行了测试。

编辑：这是一个使用像素和 Bryan 对 CSS 样式的建议的版本，更紧凑，语法接近原始 CSS 方法（再次感谢）：

var _imgCSS = {'position':'relative', 'left':'200PX', 'top':'200PX'}

function testImage(){
      var app = UiApp.createApplication().setTitle("My Simple App").setHeight('500').setWidth('500');
      var mainImage = app.createImage("https://dl.dropbox.com/u/211279/Time-change-clock_animated_TR80.gif")
      .setStyleAttributes(_imgCSS)
      app.add(mainImage);
      ss=SpreadsheetApp.getActive()
      ss.show(app)
    }
于 2012-11-23T22:43:23.817 回答
1

您可以使用指向图像的 Google Drive 链接。确保图像在网络上是公开的，并获取文档 ID。如果共享链接如下：https://docs.google.com/file/d/[docID]/edit?usp=sharing

图片的直接链接是 https://googledrive.com/host/[docID]/

或者，如果文件夹是公共的，ID 为 folderID，您可以使用 https://googledrive.com/host/[folderID]/myimage.gif

于 2013-04-18T14:57:13.693 回答