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

いくつかのCSSドキュメントを使用setStyleAttribute()および参照できます

たとえば、このようにしてみてください（私は、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でテストしました。

編集：そしてこれは、ピクセルとブライアンのCSSスタイリングの提案を使用したバージョンで、よりコンパクトで、元のCSSメソッドに近い構文を使用しています（再びthx）：

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 に答える
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 に答える
1

画像へのGoogleドライブリンクを使用できます。画像がウェブ上で公開されていることを確認し、ドキュメントIDを取得します。共有するリンクが次のような場合：https：//docs.google.com/file/d/ [docID] / edit？usp = shareing

画像への直接リンクはhttps://googledrive.com/host/[docID]/です。

または、フォルダがパブリックで、IDがfolderIDの場合は、https：//googledrive.com/host/[folderID]/myimage.gifを使用できます。

于 2013-04-18T14:57:13.693 に答える