iOS

[Swift]ループできるページングビューをUIScrollViewで作ってみた

投稿日:2018年8月2日 更新日:

はじめに

こんにちは、nukkyです。

スライドショーやウォークスルーなどで何かしらのページングビューを使用するかとは思いますが、お手軽に使えるUIScrollViewだとループができないので、今回は自作でループができるように作ってみました!

前提条件

Xcode 9.x
iOS 11 Simulator
Swift 4.0

ページングビューとは

スクロールと違い任意の位置で止まるようなビューではなく、1ページ単位で切り替わるビューのことです、
今回作成する画面の完成イメージはこのようになります。

 

実装

Storyboardの準備

まずはStoryboardにUIScrollViewを用意します。

そうしたら、UIScrollViewの「indicators」と「Scrolling」を画像のように設定してください。

今回はページングなのでindicatorの表示はなくしています、それと忘れずに「Paging Enabled」にはチェックを入れてください。

それではこのUIScrollViewをViewControllerにリレーションしてください。

 

コードの実装

まずは今回使用する変数を宣言しておきます。

viewDidLoadでscrollViewのdelegateを設定します。

scrollViewに各ページのビューを生成します、オートレイアウトが適用されているviewDidAppear後が望ましいです、今回はviewDidAppear内で生成を行っています。

ループの肝となるUIScrollViewDelegateを追加します。

 

仕組み

駆け足でコードを貼ってしまいましたが、実際どのようにしてループさせているかというと以下のような流れです。

  1. まず5つ分のページのビューを用意します。
  2. このビューをUIScrollViewにaddSubViewします。
  3. 真ん中のビューが表示されるように位置を調整します。
  4. 真ん中のビューが初期のページになるように「1」のビューを更新します。
  5. UIScrollViewDelegateでスクロール終了を取得します。
  6. スクロール終了したら真ん中のビューが表示されるように位置を戻します。
  7. 「1」で用意したビューを更新して現在のページが真ん中に表示されるようにします。

「1」で用意した時のページの並びが[0,1,2,3,4]とした時に「4」のタイミングで0ページ目を初期位置にしたい場合ページの並びは[3,4,0,1,2]になります。

上記の状態で左スワイプをおこない「5」のタイミングで1ページ目が表示された場合、「7」のタイミングでページの並びを[4,0,1,2,3]に変更しビューの更新を行い、常に真ん中のビューに現在のページをセットすることで、ページングしているように見せつつループして表示することができます。

 

さいごに

UIScrollViewでのページングのループ処理どうでしょうか、今回は5つでサンプルを書きましたがViewの数は5つのままでページの要素を増やしていけば、メモリはView5つ分のままでまだまだページを増やすことも可能です!結構便利にできているのではないかと思うので同じようなものが欲しい方の力になれれば嬉しいです!

RE:ENGINESブログ「iOS記事」まとめページはこちらから

page_footer_300rect




page_footer_300rect




-iOS
-

執筆者:


comment

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

CAPTCHA


関連記事

swift

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

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

swift

Swiftの「UIActivityViewController」でTwitterにだけハッシュタグをつけたい!

1 はじめに2 実装2.1 まずはやってみよう2.2 Twitter連携時のみにハッシュタグをつけたい3 さいごに はじめに こんにちわ、nukkyです。 今回はSNSやメール連携したいときに便利な ...

[Swift]MapViewでクラスタ機能を利用する。

1 はじめに2 クラスタリングとは3 PINのクラスタリング機能を利用する3.1 マップの作成3.2 PINの作成3.3 Pinのカスタマイズ3.4 カスタムしたPinの利用3.5 CustomPin ...

swift

iOSでライブラリFSCalendarをつかって簡単にカレンダー表示

1 はじめに2 準備3 実装3.1 Storyboard3.2 コード3.3 タップの取得4 さいごに はじめに こんにちは、nukkkyです。 ツール系アプリ開発時にカレンダー表示を よく使うと思い ...

swift

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

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

フォロー

follow us in feedly

page_side_300rect

2018年8月
« 7月 9月 »
 1234
567891011
12131415161718
19202122232425
262728293031 

アプリ情報

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