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

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

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

swift

[Swift]iPadのActionSheet表示でクラッシュする問題

1 はじめに2 エラー内容2.1 エラー原因2.2 まだこれで解決ではない3 さいごに はじめに こんにちは、nukkyです。 私は普段iPhoneアプリの開発を主に行っているのですが 慣れか油断かi ...

swift

[Swift]UITableViewのセルの入れ替えが簡単に実装できるライブラリ「SwiftReorder」

1 はじめに2 準備3 実装4 さいごに はじめに こんにちは、nukkyです。 今回は、UITableViewでセルを入れ替えたい際に、ドラッグ&ドロップ操作を簡単に実装できるライブラリ「S ...

swift

[Swift3] コードで動的にオートレイアウトを変更する

1 はじめに1.1 前提条件2 事前準備3 1.NSLayoutConstraintのActiveを切り替える4 2.NSLayoutConstraintのActiveを切り替える(複数同時)5 3. ...

swift

Swiftで絵文字を判定する方法

1 はじめに2 実装2.1 絵文字の判定2.2 UITextFieldで絵文字の排除3 さいごに はじめに こんにちは、nukkyです。 今回はアプリでの文字入力の際に 入力された文字が絵文字かどうか ...

AppLink

page_side_300rect

アプリ情報

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

フォロー

follow us in feedly
2018年8月
« 7月  
 1234
567891011
12131415161718
19202122232425
262728293031 

Web版MyCoach

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