Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

Xamarin.iOS で UIScrollView を使うには

こんにちは。エクセルソフトの田淵です。

iOS の UIScrollView、ややこしいですよね。少しわかった気がしたのでブログに残しておこうと思います。

遅れましたが、Xamarin Advent Calendar 2019 2日目のエントリーです!

UIScrollView を使う際のポイント

  • UIScrollView 内の View の Constraints の付け方に気を付ける。

です。

実際の作業

Scroll View とその中の View

普通に Scroll View 以外を配置します。今回は少し意地悪に画面一番下にも Label をおいてみます。

f:id:ytabuchi:20191203174131p:plain:w750

Scroll View を配置して、普通に Constraints を設定します。

f:id:ytabuchi:20191203174233p:plain:w750

Scroll View の中に View を配置します。

f:id:ytabuchi:20191203175507p:plain:w750

外側の Scroll View とぴったり同じにして、Super View との Constraints を上下左右に 0 で設定します。

f:id:ytabuchi:20191203175822p:plain:w750

View の下にある I (アイが横になったやつ)をドラッグして、View でドロップします。凸マークの下にあるやつなので注意してください。幅を SuperView と同じに設定する。という作業です。

f:id:ytabuchi:20191203180304p:plain:w450

最後に View の高さを任意の高さ(今回は 1,000)にして、

f:id:ytabuchi:20191203180755p:plain:w750

高さの Constraints を = 1,000 に設定します。

f:id:ytabuchi:20191203180906p:plain:w450

最終的に View の Constraints が以下の画像のようになっていれば OK です。

f:id:ytabuchi:20191203181041p:plain:w300

更にその中の 各 View

中にコンテンツを配置するのにやりづらいので、View Controller(View の下の枠)を選択して、Simulated Size を Fixed から Freedom に変更して、高さを 1200 などと入力します。

以下のようになるので、中に必要なコンテンツを追加しましょう。

Scroll View も合わせて一時的に 1,000 などに設定しておきます。選択する際は Storyboard エディター上部のブレッドクラムを選択すると便利です。

f:id:ytabuchi:20191203184542p:plain:w600

Constraints は全て Super View(この場合は Scroll View 内の View)に対して設定されます。

最終的に以下のような感じになりました。

f:id:ytabuchi:20191203184802p:plain:w750

サンプルプロジェクト

以下にアップしておきました。

f:id:ytabuchi:20191203185841g:plain:w750

github.com

参考サイト

Xamarin の Storyboard エディターだと分かりづらいなって場合は、以下などを参考にして Xcode でやってしまうのも手ですねw

大変参考になりました。

medium.com

chicketen.blog.jp

qiita.com

エクセルソフト | ダウンロード | 学習用リソース | JXUG リンクページ | ブログ購読