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


関連記事

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

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

[Swift]忘れられがちなSFSafariViewControllerについて

1 はじめに1.1 前提条件2 SFSafariViewControllerとは2.1 SFSafariViewControllerの特徴2.2 iOS11からのCookie同期について3 SFSaf ...

[Swift]iOSの脱獄チェックを行う。

1 はじめに2 脱獄とは3 脱獄のチェックについて3.1 Cydiaのチェック3.2 パスのチェック3.3 書き込み権限のチェック3.4 iOSシミュレーターのチェックを行わない。4 コードまとめ5 ...

swift

Swift3でSCLAlertViewを使ってみた

1 はじめに2 準備3 実装 はじめに 今回はSwiftでフラットなデザインの アニメーション付きアラートビューが扱える SCLAlertViewを試してみたいと思います。 準備 おなじみCocoaP ...

CollectionViewのカスタムレイアウトを作ってみた

1 はじめに2 作成するレイアウト2.1 レイアウト2.2 手順3 prepare( )4 layoutAttributesForItem(at indexPath: IndexPath)5 layo ...

フォロー

follow us in feedly

blog-page_side_responsive

東京改造計画(NewsPicks Book)
2017年8月
 12345
6789101112
13141516171819
20212223242526
2728293031 

アプリ情報

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