Question

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

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

这会将图像置于屏幕的左上角。有人能告诉我如何使图像居中吗？

非常感谢

Answer 1

您可以使用setStyleAttribute()并参考某些CSS documentation

尝试这样的例子（我真的不是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（像素）而不是％来定位图像，正如您所注意到的，我在电子表格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)
    }

Answer 2

我刚刚发现了另一个很好的方法。

默认情况下，面板会缩小以完全适合其内容。这很好，因为所有小部件彼此非常接近。所以我们在这里做的是，我们添加一个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);
}

Answer 3

您可以使用Google云端硬盘链接查看图片。确保图像在Web上公开，并获取文档ID。如果要分享的链接如下： https://docs.google.com/file/d/ [的docID] /编辑？USP =共享

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

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

如何集中元素谷歌应用程序脚本UiApp

3 个答案: