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

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

age_footer_300rect




age_footer_300rect




-iOS
-

執筆者:


comment

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

関連記事

swift

Swift3 + Alamofire4 + Unbox2.4を使ってJSONをパースする

1 はじめに1.1 前提条件1.2 完成形2 モデルの作成3 APIクラスの作成4 ViewControllerの作成4.1 Delegateの指定4.2 TableViewの設定4.3 Search …

swift

SnapKItをつかってコードでも簡単にAutoLayout実装

1 はじめに2 準備3 実装3.1 準備3.2 AutoLayoutを指定3.3 UIAlertControllerのカスタム4 さいごに はじめに こんにちは、nukkyです。 iOSの実装中にコー …

swift

Swift3 コードでの画面遷移

1 はじめに1.1 環境2 performSegue2.1 事前準備2.2 遷移先を示すSegueを作成2.3 遷移させるイベントを作成2.4 画面遷移させる3 prepare3.1 事前準備3.2 …

swift

[Swift3] スクロールする画面に固定でボタンを表示する方法

1 はじめに1.1 前提条件2 Storyboardの準備3 Controllerの実装3.1 スクロールする画面の実装(TableView)3.2 固定で表示するボタンを配置している画面の実装(Co …

swift

月と日を選択するpickerを作る

1 はじめに1.1 前提条件2 サンプル2.1 ピッカーのイメージ2.2 ピッカーのxibファイル2.3 実装したカスタムクラス2.4 呼び出し元のコード3 簡単な解説3.1 MonthAndDayP …

page_side_300rect






follow us in feedly

2017年9月
« 8月    
 12
3456789
10111213141516
17181920212223
24252627282930