検索結果が多い場合、「次へ」「(例)1,2,3…15」ボタンを表示させたい。

Question

###現状
Yahoo!ショッピングの商品検索結果を取得することが可能なAPIを利用して、商品検索結果のJSONを取得し、商品一覧をTableViewに表示するアプリを作成しています。
現在できていることは、検索した商品の画像・タイトル・価格を表示することまでできていますが、取得したJSONのデフォルトの20件のみしか表示することができていません。

###やりたいこと
検索した商品データ数が20を超える場合に検索一覧の下に画像のような次へ・戻るボタン、ページ番号を追加したいのですが、UIの作り方はどうすれば良いでしょうか？

商品の合計数のデータはJSONから取得することは可能です。
アドバイスなどいただけると嬉しいです。よろしくお願いいたします。

Comments

[fuzzball]

「どうすればよいでしょうか？ 」は何に対する質問でしょうか？UIの作り方でしょうか？APIへのアクセス方法についてでしょうか？

[nao_otsu]

今回はUIの作り方に関しての質問です。曖昧な質問になってしまい申し訳ございませんでした。

[fuzzball]

ボタンを並べるだけだと思うのですが、何が分からないのでしょうか？

[nao_otsu]

合計検索数によって、ボタンの数が異なると思います。ボタンの配置などはStoryBoardを利用して作成してきましたが、今回の場合はボタンを作成する数や配置する場所などはコードで書かなければいけないでしょうか？もしその場合はうまくボタンを配置する方法を教えていただきたいです。ボタンはTableViewを一番下までスクロールした位置に配置を考えています。

[fuzzball]

「次へ・戻るボタンを追加したい」だけではないのでしょうか？

[nao_otsu]

最初は「次へ・戻るボタン」の追加だけを考えていたのですが、StoryBoard上でボタンの配置などできそうだと思ったので、上の画像のように、「1,2,3,…18」はどのようにして実装すればいいのか分からなかったので聞いてしまいました。申し訳ございません。

Answer 1

iOSアプリでは基本的にTableViewで追加情報の取得をするために、次へボタンを使うことはありません。
アプリの画面上に最後尾のセルが表示されたら、追加情報を取得するための通信を行うのが一般的です。

どうしても次へボタンを表示させたいのであれば、単純にボタンとラベルをそのように並べれば良いのでは。

Comments

[nao_otsu]

回答いただき、ありがとうございます。
もし、今回のように追加情報を取得する場合は、TableViewではなく何を利用したらよいのでしょうか？
またTableViewを利用する場合は、今回は20件セルの表示を行い、最後のセルが表示されたら、追加で20件情報を取得し追加で新しいセルを表示するという理解であっていますでしょうか？

[oden]

TableViewを利用する場合の動きに関しては、概ねnao_otsuさんのご理解で正しいように思えます。
より具体的な実装方法としては、`UIRefreshControl`や`Pull-to-Refresh`といったキーワードで検索すれば出てくると思います。

ご質問にあるようなレイアウトを実現するためのViewは、iOSには用意されていないと思います。
ご自身で独自に実装されるか、ちょうど良いライブラリを探して見られるのが良いかと思います。

[nao_otsu]

odenさん
返信ありがとうございます！
具体的な実装方法のアドバイスまで頂けてうれしく思います。
試行錯誤して、実装頑張りたいと思います。
丁寧に教えていただきありがとうございました。