QA@IT

Titanium.UI.WebView の高さをテキストのフォントサイズ、文字数から事前に取得する

1922 PV

Titanium.UI.Label の高さをテキストのフォントサイズ、文字数から事前に取得しようと考えています。

Objective-C では、(CGSize)sizeWithFont が用意されており、このメソッドを使えば取得できると思うのですが、Titanium では sizeWithFont は現状、用意されていないので、どのように取得すれば良いでしょうか?

[参考] : iPhone UILabel 高さをテキストの量で決める - 袖触れ合うも多少の縁

ご存じの方がいらっしゃいましたら教えて下さい。よろしくお願いします。

[追記:2012/09/23]

下記のようにTableView内にImageView、WebViewと上から順番に配置するページで、WebViewの高さを事前に設定するために、高さを事前取得したいと考えています。

var tableView = Ti.UI.createTableView();

var imageView = Ti.UI.createImageView();
var row1 = Ti.UI.createTableViewRow();
row1.add(imageView);

var webView = Ti.UI.createWebView();
var row2 = Ti.UI.createTableViewRow();
row2.add(webView);

tableView.appendRow([row1, row2]);

WebViewの高さを文字列のフォントサイズ、文字数から事前に取得して設定する理由は、そうしないとTableViewのスクロールとWebViewのスクロールが別々に動いてしまうためです。
WebView内のコンテンツを充分に表示できる高さを事前に設定すれば、WebView部分のスクロールは動かないので、sizeWithFontメソッドで事前に取得したいと考えました。
[参考]: Moving TableView - 十六進数至上主義

var tableView = Ti.UI.createTableView();

var imageView = Ti.UI.createImageView();
var row1 = Ti.UI.createTableViewRow();
row1.add(imageView);

var webView = Ti.UI.createWebView();
var row2 = Ti.UI.createTableViewRow();
row2.add(webView);

tableView.appendRow([row1, row2]);

回答

タイトルはTi.UI.Labelですが、どうやら高さを取得したいのはWebViewのようですね。であれば、例えば、WebViewのevalJSを使って高さを取得することができます。

  var self = Ti.UI.createWindow({
    title:title,
    backgroundColor:'white'
  });

  var scrollView = Ti.UI.createScrollView({
    top:0,
    width:Ti.UI.FILL,
    height:Ti.UI.SIZE,
    contentWidth:'auto',
    layout:'vertical'
  });
  self.add(scrollView);

  // わかりやすいように目印
  var viewHeight = 60;
  var view = Ti.UI.createView({
    width:Ti.UI.FILL,
    height:viewHeight,
    backgroundColor:'Red'
  });

  var url = 'http://wtfjs.com/'; //他意はないです
  var webview = Ti.UI.createWebView({url:url, width:Ti.UI.FILL, height:0,top:0});
  scrollView.add(webview);
  scrollView.add(view);
  webview.addEventListener('load', function(e){
    var height = webview.evalJS('document.documentElement.scrollHeight');
    scrollView.contentHeight = Math.ceil(height / 2) + viewHeight; //端末の解像度によっては2で割らないといけない
    webview.height = Math.ceil(height / 2);
  });

WebViewの中にiframeがある場合は正常に動作しないことがあります(複数回loadが呼ばれるので工夫する必要があります)。

編集 履歴 (1)
  • ありがとうございます。
    WebView内のコンテンツを表示するのに充分な高さを事前に取得して、設定するために高さを取得したいと考えています。
    コードを書かねばならなかったので、上記の質問欄に追記しました。
    -
  • labelじゃなくてwebviewの高さですね。回答を更新しました。 -
  • ありがとうございます。webview の高さを取得することができました。
    また、別の問題ですが tableViewRow の height を後から変更すると、レイアウトが崩れてものすごい長いスクロールが現れてしまうみたいです。(現在、調査中です)
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。