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記事」まとめページはこちらから

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:


comment

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

CAPTCHA


関連記事

[初心者向け]続・Xcodeの使い方(よく使うショートカットキーとエディタ)

1 はじめに1.1 前提条件2 ショートカットキー2.1 定義に移動(Jump to Definition)2.2 Quick Help2.3 Rename2.4 Edit All in Scope2 ...

UnityのiOSネイティブをSwiftで書く

1 はじめに2 UnityのiOSネイティブとは?3 今回作るもの4 必要な構成5 unity-swiftの導入6 必要な機能の実装6.1 Swiftクラスの作成6.2 Objective-C++でU ...

swift

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

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

【Swift】iOS13.1、Xcode11でSceneDelegate周りを触ってみた。

1 はじめに2 SceneDelegateについて3 SceneDelegateの呼ばれる順番3.1 アプリ起動時3.2 アプリバックグラウンド3.3 アプリフォアグラウンド3.4 アプリフォアグラウ ...

[Swift]忘れられがちなSFSafariViewControllerについて

1 はじめに1.1 前提条件2 SFSafariViewControllerとは2.1 SFSafariViewControllerの特徴2.2 iOS11からのCookie同期について3 SFSaf ...

フォロー

blog-page_side_responsive

2018年8月
 1234
567891011
12131415161718
19202122232425
262728293031  

アプリ情報

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