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でTTTAttributedLabelの文字列からリンク表示

1 はじめに2 TTTAttributedLabelとは3 CocoaPodsでインストール4 実装4.1 Labelの表示4.2 タップの検知5 さいごに はじめに こんにちは。 はじめましてnuk ...

swift

[Swift]動画撮影にて好きなサイズでプレビュー表示する

1 はじめに1.1 前提条件2 実装3 さいごに はじめに こんにちは、nukkyです。 今回はメインのビューの右上とかに小窓の様なプレビューにカメラの映像を出して、動画撮影するという機能を作成したの ...

swift

[Swift3]で直感的にアニメーションが記述できるライブラリ「Cheetah」

1 はじめに2 準備3 実装3.1 準備3.2 移動3.3 回転と拡大3.4 速度調整3.5 繰り返し3.6 アニメーションの終了4 さいごに はじめに こんにちは、nukkyです。 今回は、仕事でV ...

swift

[Swift]タブの切り替え時にアニメーションが簡単に実装できる「TransitionableTab」

1 はじめに2 準備3 実装4 さいごに はじめに こんにちは、nukkyです。 今回は、UITabBarControllerの切り替え時にアニメーションを実装できるライブラリ「Transitiona ...

swift

[Swift]ログフレームワーク「CocoaLumberjack」をSwiftで使ってみた

1 はじめに2 準備3 実装3.1 出力先の設定3.2 ログの出力レベルを設定する3.3 ログの出力4 さいごに はじめに こんにちは、nukkyです。 今回はログ管理に便利なライブラリ「CocoaL ...

page_side_300rect

Web版MyCoach

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

アプリ情報

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

リンク

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