iOS

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

投稿日:

はじめに

どうも、はじめです。
今回は「スクロールする画面上にボタンやラベルを固定で表示させておきたい!!」
そんなことを思って調べて実際描いてみたので、備忘録という意味も含めて
記事にしてみました。

先に言ってしまうと以前投稿した記事にヒントが隠されていました。。。
(記事を書くまで気づかなかった。。。w)

完成形は下のようなイメージになります。
固定で表示されているタブとボタンがあり、
後ろ側ではスクロールをさせるためにTableViewを表示しています。

 

では早速。

前提条件

Xcode 8.3.3
Swift 3.1

 

Storyboardの準備

今回使用するのはまたもやContainerViewです。
前回も使ってみて思いましたが、こやつかなり便利だなーって思います。

Storyboad上のViewの上部にタブとなるView、ボタンを配置します。
次にタブの下から画面いっぱにContainerViewを配置します。
ContainerViewの上に乗っかる形で画面下にボタンを配置します。
ContainerViewに紐づいているViewControllerにはスクロールできるようにTableViewを配置します。
※TableViewのdelegateとdataSourceはこの時点で設定しておきます。

あとはこれが動くように実装すれば完成です。

 

Controllerの実装

スクロールする画面の実装(TableView)

まずはTableViewにスクロールできるだけのCellを表示させます。
今回はCellのTextLabelにindexPath.rowを表示させておきます。
※今回はViewControllerという名前で作成しました。

 

固定で表示するボタンを配置している画面の実装(ContainerView)

次にContainerViewが設置してあるStoryboardの実装に移ります。
設置してある各ボタンのActionメソッドを実装しておきます。
(今回はどのボタンが押されたのかがわかるようにPrintをするだけにしておきます。)
※今回はContainerViewControllerという名前で作成しました。

 

以上で完成となります。

 

さいごに

最近ScrollViewを使用する機会が増えてきたのですが、
かなり苦戦させられております。
autolayoutだったり、スクロールだったり。
まだまだ勉強不足だなと日々実感しておりますが、
着実にできることが増えていっているのが実感できるのでかなり嬉しいです。
早く「何でも任せろ!」と言える日がくるように頑張ります。

今回も最後まで見て頂きありがとうございました。

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:


comment

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

CAPTCHA


関連記事

[iOS]ライセンスを簡単に生成してくれるLicensePlistを使って見た

1 はじめに1.1 作者様ページ1.2 前提条件2 インストール3 早速使ってみよう3.1 Settings.bundleの準備3.2 LicensePlistの作成3.3 自動更新の設定4 さいごに ...

swift

[Swift]動画広告を最後まで見たら何かするアレをAPPLOVINでやってみた

1 はじめに1.1 前提条件2 準備3 実装3.1 Xcodeの設定3.2 広告の再生4 テスト設定とかアプリ管理5 さいごに はじめに こんにちは、nukkyです。 今回はタイトルの通り、アプリでよ ...

swift

Swiftでのパーミッション取得を簡単に

1 はじめに2 準備3 実装3.1 とりあえず表示3.2 カスタマイズ4 さいごに はじめに こんにちは、nukkyです。 今回は、アプリにはつきもののユーザへのパーミッションの確認を 簡単に行えるラ ...

swift

SwiftでLTMorphingLabelを使ってみた

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

[Swift]AlamofireでファイルのUploadをしてみる

1 はじめに2 CarthageでAlamofireを導入する2.1 CartFileの作成とライブラリのダウンロード2.2 Xcodeの設定3 Alamofireとは3.1 AlamofireのHT ...

フォロー

follow us in feedly

blog-page_side_responsive

2017年8月
 12345
6789101112
13141516171819
20212223242526
2728293031 

アプリ情報

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