iOS

[Swift3] ScrollViewを使ってみた!

投稿日:

はじめに

どーもはじめです。
ずっと苦手意識というかあまり使いたくないイメージを持っていたのですが、
そろそろ一回ぐらい書けるかなと思ったのでチャレンジしてみます。

はい、今回はタイトルの通りScrollViewです。
早速行ってみましょう

 

縦スクロール

横幅いっぱいの縦スクロールを作ってみます。
これはストーリーボードだけで実装が可能です。

1.ViewにScrollViewを追加
2.ScrollViewにオートレイアウトを設定
・Top,Left,Right,Bottomに0を設定
3.ScrollView内にViewを追加
4.Viewにオートレイアウトを設定
・Top,Left,Right,Bottomに0を設定
・ScrollViewとViewを同時に選択し、EqualWidthを設定
・Viewに対しスクロールさせたい高さでHeightを設定

上記手順で横幅いっぱいの縦スクロールを実装できます。

上記手順を踏んだ後のオートレイアウトは以下のようになります。
(ちなみにHeightには1000ポイントを指定)

 

横スクロール

次に高さを指定した横スクロールを作ります。
方法としては縦スクロールの時とほぼ変わりません。

1.ViewにScrollViewを追加
2.ScrollViewにオートレイアウトを設定
・Top,Left,Rightに0を設定
・Heightに80を設定
3.ScrollView内にViewを追加
4.Viewにオートレイアウトを設定
・Top,Left,Right,Bottomに0を設定
・ScrollViewとViewを同時に選択し、EqualHeightを設定
・Viewに対しスクロールさせたい幅でWidthを設定

以上で高さ指定の横スクロールが完成です。
縦スクロール時と変わったところは
・ScrollViewに設定するオートレイアウトとしてBottomではなくHeightを指定
・ScrollViewとViewを選択した時に設定するオートレイアウトをEqualHeightに変更
・Viewに対して設定するオートレイアウトをWidthではなくHeightを設定

これでタブメニューのようなものが作れます。

 

横スライドでページング

チュートリアル等で使用するようなページングを作ってみます。
手順は以下になります。

1.ViewにScrollViewを追加
2.ScrollViewにオートレイアウトを設定
・Top,Left,Right,Bottomに0を設定
3.ScrollView内にViewを追加
4.Viewにオートレイアウトを設定
・Top,Left,Right,Bottomに0を設定
・ScrollViewとViewを同時に選択し、EqualHeightを設定
・Viewに対しス適当な幅でWidthを設定
5.ScrollViewのPagingEnableにチェックを入れる


6.[3]で追加したViewをoutlet接続
7.[3]で追加したViewにせっていしたWidthの制約をoutlet接続

ストーリーボードの設定は以上になります。

最終状態のストーリーボードは以下のようになります。


次にコードです。

全てのコードは以下になります。

 

今回はカラーを設定していますが
Imageを設定すればチュートリアルのような画面が作成できます。

 

さいごに

UIScreen.main.boundsで画面サイズを取得できることを最近知りました。
ViewDidLoad等Viewが生成される前でも画面サイズを取得できることができるので
かなり便利なのはないかと思っています。

今回も最後まで見ていただきありがとうございました。

page_footer_300rect




page_footer_300rect




-iOS
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

swift

[Swift]AVSpeechSynthesizerで音声再生

1 はじめに2 実装2.1 コード2.2 呼び出し3 さいごに はじめに こんにちは、nukkyです。 音声読み上げはちょっと今更感が漂いますが、案件で使用したばっかというのと、備忘録兼、初心者向けと ...

swift

UITableViewでTableViewCell(Xib)を使ってみた

1 はじめに1.1 前提条件1.2 事前準備2 TableViewを準備3 Xibを準備4 tableviewに表示するcellにxibを指定する5 さいごに はじめに どうも、はじめです。 今回はX ...

swift

UnboxとWrapでデータを永続化する

1 はじめに1.1 ライブラリの紹介1.2 前提条件2 事前準備3 実装3.1 データの準備3.2 設定データをテキストファイルに出力する3.3 設定データの読み込み4 さいごに はじめに 設定ファイ ...

swift

[Swift 3] テキストの装飾(フォント・文字サイズ・文字間隔・行間・文字色・下線)

1 はじめに2 フォント・文字サイズ変更3 文字間隔4 行間5 文字色6 下線7 さいごに はじめに どうもはじめです。 今回は文字の装飾をやってみようと思います。 完成図を載せておきます。 &nbs ...

swift

Swift3で動的にUIViewを切り替える Part2

1 はじめに1.1 前提条件2 完成イメージ3 StoryBoardの準備3.1 Viewの配置3.1.1 ① Segmentを配置するView3.1.2 ② ContainerViewを表示するVi ...

page_side_300rect

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。
下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。

アプリ情報

私たちは、目標を達成したい方を応援する、TODOアプリもリリースしております。
下記のアイコンから無料でダウンロードできます。

リンク

follow us in feedly
2017年9月
« 8月 10月 »
 12
3456789
10111213141516
17181920212223
24252627282930