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


関連記事

[Swift] プロトコルを弱参照するために

1 はじめに2 プロトコルとは2.1 プロトコルの作成方法2.2 プロトコルを採用したクラス作成2.3 使用例3 ClassOnlyProtocolとは3.1 メリット3.2 使用例4 最後に5 おす ...

iOSでFABを表現する「material-components」「Floaty」

1 はじめに2 Floating Action Button(FAB)とは3 Material Components3.1 導入方法3.2 FABの配置3.3 FABをタップした時の処理4 Float ...

【Swift】Tesseract-OCR-iOSを使って文字の読み取り

1 はじめに2 導入準備2.1 ライブラリのインポート2.2 言語モデルのインポート2.3 カメラを利用する準備3 レイアウト作成4 カメラ撮影5 データ解析5.1 UIImageのエクステンション5 ...

[Swift]クラスタされているPINを取得する

1 はじめに2 前回からの修正箇所3 クラスタリングされたPINの内容を取得する3.1 クラスタリングされているPINか判別3.2 クラスタリングされているPINを取得する4 TableViewとの連 ...

swift

[Swift]CSVを読み込みRealmに保存してみる

1 はじめに1.1 前提条件2 準備3 実装4 さいごに はじめに こんにちは、nukkyです。 今回はDBにプリセットなどを用意する際にCSVを使ってRealmで保存して見たいと思います。 前提条件 ...

フォロー

blog-page_side_responsive

2018年8月
 1234
567891011
12131415161718
19202122232425
262728293031  

アプリ情報

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