iOS

[Swift3] ScrollViewを使ってみた!

投稿日:2017年9月8日 更新日:

はじめに

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

はい、今回はタイトルの通り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が生成される前でも画面サイズを取得できることができるので
かなり便利なのはないかと思っています。

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

おすすめ書籍

[改訂新版]Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 (WEB+DB PRESS plus)詳解 Swift 第4版Android/iOSクロス開発フレームワーク Flutter入門作って学ぶ iPhoneアプリの教科書 【Swift4&Xcode 9対応】 ~人工知能アプリを作ってみよう! ~(特典PDF付き)

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:


comment

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

CAPTCHA


関連記事

【Swift】WKWebViewでタップしたURLを取得する。

1 はじめに2 WKWebViewについて3 WKWebViewの基本実装4 ナビゲーションにタイトルを追加5 ロングタップの禁止6 特定のリンクの場合はブラウザを起動して表示7 さいごに はじめに ...

CollectionViewのカスタムレイアウトを作ってみた

1 はじめに2 作成するレイアウト2.1 レイアウト2.2 手順3 prepare( )4 layoutAttributesForItem(at indexPath: IndexPath)5 layo ...

UIWebViewからWKWebViewへの移行

1 はじめに2 ターゲットとなるUIWebViewで行なっていること3 URLへのアクセス4 ローカルHTMLの読み込み5 ページを戻す、進める6 ページの読み込み開始時や終了時に処理を行う(dele ...

swift

Swift3でRealmを使ってみる

1 はじめに1.1 前提条件2 事前準備2.1 Realmのインストール・設定2.1.1 Carthageファイルの生成2.1.2 CarhageにてRealmをインストール2.1.3 Realmをイ ...

iOS13ダークモード対応

1 はじめに2 一時しのぎ3 実装3.1 UI Element Colors3.2 Color Set3.3 コードで描きたい3.4 カスタムのカラーを定義する3.5 画像をモードで動的に変更したい4 ...

フォロー

follow us in feedly

blog-page_side_responsive

2017年9月
 12
3456789
10111213141516
17181920212223
24252627282930

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。
Get it on App Store
Get it on Google Play