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だったり、スクロールだったり。
まだまだ勉強不足だなと日々実感しておりますが、
着実にできることが増えていっているのが実感できるのでかなり嬉しいです。
早く「何でも任せろ!」と言える日がくるように頑張ります。

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

age_footer_300rect




age_footer_300rect




-iOS
-

執筆者:


comment

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

関連記事

Swift3 + Alamofire4 + Unbox2.4を使ってJSONをパースする

1 はじめに1.1 前提条件1.2 完成形2 モデルの作成3 APIクラスの作成4 ViewControllerの作成4.1 Delegateの指定4.2 TableViewの設定4.3 Search …

Swift3でRealmを使ってみる

1 はじめに1.1 前提条件2 事前準備2.1 Realmのインストール・設定2.1.1 Carthageファイルの生成2.1.2 CarhageにてRealmをインストール2.1.3 Realmをイ …

SnapKItをつかってコードでも簡単にAutoLayout実装

1 はじめに2 準備3 実装3.1 準備3.2 AutoLayoutを指定3.3 UIAlertControllerのカスタム4 さいごに はじめに こんにちは、nukkyです。 iOSの実装中にコー …

UITableViewでTableViewCell(Xib)を使ってみた

1 はじめに1.1 前提条件1.2 事前準備2 TableViewを準備3 Xibを準備4 tableviewに表示するcellにxibを指定する5 さいごに はじめに どうも、はじめです。 今回はX …

SwiftでTTTAttributedLabelの文字列からリンク表示

1 はじめに2 TTTAttributedLabelとは3 CocoaPodsでインストール4 実装4.1 Labelの表示4.2 タップの検知5 さいごに はじめに こんにちは。 はじめましてnuk …

page_side_300rect






follow us in feedly

2017年8月
« 7月    
 12345
6789101112
13141516171819
20212223242526
2728293031