質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.85%

  • Xamarin

    424questions

    Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

Xamarin.Formsにおいて、WebViewの高さを表示内容に応じて動的に変更したい。

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 106

aimysato

score 0

 前提・実現したいこと

Xamarin.Formsを使ってiOS/Andoroidアプリケーションを作っています。
あらかじめ入力されたhtml・cssなどによって整形されたコードを読み込んで、
WebViewで内容を表示するという仕組みを作ったのですが、
内容に応じて高さをアジャストさせる方法が見つからない・思いつきません。

※WebViewに意図した内容が来ているかどうかについては、HeightRequestに適当な整数を与えることで表示領域を作り、確認済です。

 発生している問題・エラーメッセージ

前述の通りです。

 該当のソースコード

下記のようになっており、WebViewの中身が変化します。
この中身に応じて、高さを適切に調節する方法を考えています。

var Contents = new Xamarin.Forms.HtmlWebViewSource
{
    Html = 〜データベースから取得したテキスト(html・css)〜,
};
WebView1.Source = Contents;

 試したこと

・Xamarin.Formsのカスタムレンダラーを用いてなんとかできないか考えました。
・(iOSネイティブは未経験なので)Swift3について調べ、カスタムレンダラーで作成するWebviewを使い、
OnElementChangedのタイミングで(もとい、これ以外のタイミングを使う方法がわかりませんでした)

iOSであれば
・UIKit.UIViewContentMode.ScaleAspectFit を入れてはどうか?
→結果:変化なし

・サイズを取得して再描画してなんとかできないか?
var WebviewWidth = UIKit.UIScreen.MainScreen.Bounds.Width;
var WebviewHeight = UIKit.UIScreen.MainScreen.Bounds.Height;
var DrawRectParameter = new CoreGraphics.CGRect(0, 0, WebviewWidth, WebviewHeight);
base.Draw(DrawRectParameter);
→結果:変化なし

・SizeToFitメソッドなら?
base.SizeToFit();
this.SizeToFit();
→結果:変化なし

・ScalesPageToFitプロパティをtrueにすれば?
this.ScalesPageToFit = true;
→結果:HeightRequestで指定した高さに合わせる形で内容をフィットさせる(縮小・拡大する。ViewPortのような感じです。)

 補足情報(FW/ツールのバージョンなど)

・macOS sierra Ver10.12.6
・Visual Studio Community Edition 2017
・Xamarin Forms Ver2.3.4.270

以上です。何かご存知のことがあれば、教えていただければと思います。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

試したわけではないので自分ならこう考えるといったヒント程度で回答します。

カスタムレンダラーに便利なプロパティ等があるか不明なので、自力でやる方法について検討します。
目的が「高さを表示内容に応じて動的に変更したい」ということなので、

  1. 表示されているコンテンツの高さを検知する
  2. 任意のサイズにWebViewの高さを変更する

という2点をクリアできればOKかと考えます。

1に関してですが、恐らくWebViewの外からコンテンツのサイズを検知することは出来ないと考えます。
ですのでJavaScript側でロードが完了したらコンテンツの高さを取得して、Xamarin.Forms側に伝えてあげれば良いかと考えます。
WebViewのNavigatingやNavigatedのイベントを使えばForms側に値を受け渡すことが可能です。

2に関してはHeightRequestを指定すれば良いかと考えますが、
実際に試してみないとうまくできるかわからないですね。
ボタンを押したときなどにWebViewのサイズが変更できるかどうかなど試してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/04 11:26

    返答が遅れて申し訳ありません。
    回答、ありがとうございます。

    教えていただいた内容を元に調査し、コードを記述しているのですが、
    1に関しては、
    どうやらAndroidの場合は上記のNavigating・Navigatedのイベントが発生しない(自分でのテストと、各種海外フォーラムの情報です)ようで、
    Androidに於いてどう対応しようか調べている状態です。
    AndroidネイティブのOnPageFinishedというメソッドを用いることができれば、期待した動作に一歩近づくのではないかと考えているのですが実現できず、マイクロソフトのサンプルを確認・記述しながら突破口がないか考えております。(最下部に参照しているページのURLを記載しておきます。)

    2に関しては、
    HeightRequestに値を与えることで変化するのは確認していたので、
    もし指定した値に高さが変化しない場合は、イベントのタイミング・そもそもイベントを経由していないという線から考えていくことができると思っています。

    以上になります。手詰まり状態だったので、調査する糸口が見えただけでも助かっております。ありがとうございます。

    <参考>
    確認中のページ‥
    HybridWebView を実装します。 - Xamarin | Microsoft Docs
    https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/app-fundamentals/custom-renderer/hybridwebview

    キャンセル

  • 2018/06/05 13:25

    >どうやらAndroidの場合は上記のNavigating・Navigatedのイベントが発生しない(自分でのテストと、各種海外フォーラムの情報です)ようで、

    自分のところではAndroidでもiOSでもNavigating・Navigatedでハンドリング処理書いて動いています
    端末、OS、XFバージョンなど見直すことで動くようになるかも?

    キャンセル

  • 2018/06/05 17:10

    自分が動作確認しているXamarin.Formsのバージョンは2.4.0.280
    自前でWebViewのBehaviorを作って、NavigatingとNavigatedをViewModelで利用しています。
    汎用的にBehaviorを作るならEventToCommandBehaviorとか作るかどっかから引っ張て来ても良いかと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.85%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Xamarin

    424questions

    Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。