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


関連記事

iOS14のWidget機能を使ってみた。

1 はじめに2 Xcode 12 betaの入れ方3 WidgetExtensionの追加方法4 デフォルトのコード説明5 Configurationについて6 プロバイダー6.1 snapshot6 ...

【Swift】SwiftUIの理解のためDSL記法とFunctionBuilderを調べてみた

1 はじめに2 DSL(ドメイン固有言語)について3 関数ビルダ3.1 定義方法3.2 使用方法3.3 SwiftUIの関数ビルダ4 カスタム属性5 さいごに6 おすすめ書籍 はじめに Xcode11 ...

swift

SwiftでLTMorphingLabelを使ってみた

1 はじめに2 LTMorphingLabelとは3 準備4 実装 はじめに 今回はLTMorphingLabelというライブラリが面白そうなので使ってみました。 LTMorphingLabelとは ...

[Swift4]StringのSwft4変更点と文字列操作

1 はじめに2 Swift4でのString変更点2.1 コレクション化2.2 文字列長の取得2.3 文字列を複数行で定義3 文字列操作3.1 英大文字、小文字変換3.2 ひらがな、カタカナ変換3.3 ...

swift

[Swift]通信状況を取得できるReachability.swiftを使ってみた

1 はじめに2 準備3 実装3.1 通信状況を確認する3.2 通信可能になった時に通知する4 さいごに はじめに こんにちは、nukkyです。 今回は端末の通信状況を取得できるReachability ...

フォロー

follow us in feedly

blog-page_side_responsive

2018年8月
 1234
567891011
12131415161718
19202122232425
262728293031 

アプリ情報

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