【誰でもわかる】Xcode11でカンタンにScrollViewを使う方法

Technology

「xcode11のstoryboardでScrollViewを使いたいんだけど、どうやって配置するんだろう…複数のviewを置いてスクロールさせたい!」

そういった疑問を解決します

記事コンテンツ

  • Xcode11でScrollViewを使うには
  • 実際にstoryboardでScrollViewを動かしてみよう!
  • スクロールできたらScroViewをカスタム

表示項目が多くなると一回に表示しづらいため、
Scrollviewでスライドさせて隠れている部分を見ることができます。

アプリ作成中にscrollViewが必要となり、
試しに使ってみたのでまとめました。

今回はUIでScrollViewを使う方法を紹介していきます!

Xcode11でScrollViewを使うには

Xcode11でScrollViewを使う方法は「コード」と「UI」の二つがあります。

今回は「UI」で進めていきます。

基本的にstoryboardにscrollviewを配置後、制約で固定してあげます。
その後、scrollviewにスクロールさせたい要素を追加してく流れです。

ちょうザックリ説明しましたが、例をあげて説明します。

では、いきましょう!

実際にstoryboardでScrollViewを動かしてみよう!

今回は「collection view」「ui view」「map view」の三つを配置して、
スクロールできるようにしたいと思います。

ステップ1

Main.storyboardを開いて、
オブジェクトライブラリーからScrollViewを選択し画面に置きます。

そして、ScrollViewを画面全体に広げます。
後々一番下にmapを表示するのですが、
Map下にスペースがあった方が綺麗なので少し開けときます。

制約をかける。
上下左右を全て0に設定。
エラーとしてHas ambiguous scrollable content heightとHas ambiguous scrollable content widthが表示されていますが、
今は無視して大丈夫です。

ステップ2

StackViewをScrollViewの下におきます。
そしてscrollviewと同じ大きさにドラッグして広げます。

制約をつけるためにまずStackViewを選択し、
controlを押しながらContentLayoutGuideまでドラッグ。
そうすると下記のように制約が出現します。
Shiftキーを押しながら上から4つ「Leading Space〜、Top Space〜、Trailing Space〜、Bottom Space」を選択。

生成された制約の中に数字が存在しますが、不要のため数字が存在する部分を削除。

StackViewの横幅をFrame Layout Guideと合わせたいので、
はじめにStackViewを選択し、controlを押しながらContentLayoutGuideまでドラッグします。
ポップアップでwindowが表示されるので「Equal Width」を選びます。

ステップ3

StackVewの下に「ui view」「ui view」「map view」を置きます。
各要素の高さを指定していないため怒られています。
※ここでは勝手に3つのviewを使っていますが、必要なければ2つでも大丈夫です。

下記のように各要素にheightを設定。

ui view(height):300
ui view(height):200
map view(height):400

そうすると、エラーが消えます。
Mapの高さを400に設定すると少しはみでますが、
その部分がスクロールされることによって表示されます。

ここまでで「commadn+R」で実行しても、
スクロールできますがスクロールがわかりやすいようにちょっとだけカスタムしていきます。

ちなみに実行時はこんなかんじ↓

ちゃんとスクロールできています。mapの隠れていた部分が表示されている。

スクロールできたらScroViewをカスタム

2つのui viewとmap viewを追加しましたがちょっと質素なので、
labelと画像を追加してスクロールをよりみやすくしてみます。

ステップ1

オブジェクトライブラリーからlabelを上のui viewに追加します。
また、Image Viewを下のui viewに追加。

ステップ2

Labelの文字を「サンプル」に変更します。
そして、image viewに使う画像を設定していきましょう。
画像追加するには「Assets.xcassets」に移動します。
「Shift+command+o」でopen quicklyを開き、
「Assets.xcassets」検索すると移動がはやいですね。

ステップ3

追加したい画像をインポート。今回は適当に花の画像を使いました。
Asset Catalogのscaleを「single scale」に設定しときます。

ステップ4

Main.staryboardに戻り、ImageViewで画像追加します。
Attributes inspectorのImageでプルダウンすればさっき追加した画像が候補としてできてきます。

「commadn+R」を押し、シュミレーターで確認。

「サンプル」と「花の画像」が追加された上にスクロールもできたため問題なし。

以上です。最後までありがとうがございました。