質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Q&A

解決済

2回答

1050閲覧

スクロールの際にUIButtonの表示/非表示を切り替える方法について

samson66

総合スコア35

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

0グッド

0クリップ

投稿2019/08/09 15:07

編集2019/08/09 15:13

実現したいこと
tableviewをスクロールした際にcellが並ぶ画面(tableview)の上に
(浮いて見えるように)固定されたUIButtonがcellの邪魔にならないように非表示にし、
スクロールをしてない時は表示するようにしたいです。

画面レイアウト
tableviewに固定されているUIButton

以下のサイトを参考に作ってみましたが、シミュレーターでスクロールをしてみてもUIボタンは非表示になりませんでした。
http://blog.all-in.xyz/2016/06/20/how-to-put-button-on-tableview-which-will-not-scroll-with-table/

viewcontrollerには以下のようにコーディングしました。

ViewController

1import UIKit 2 3class ViewController: UIViewController { 4 5 // UIButton の表示/非表示を管理 6 private var isButtonDisplayed: Bool = true 7 8 @IBOutlet weak var addPictureButton: UIButton! 9 10 // 先ほど実装した UITableView 側の ViewController の delegate に self を設定 11 override func prepare(for segue: UIStoryboardSegue, sender: Any!) { 12 if segue.identifier == "ArticleViewControllerSegue" { 13 let vc = segue.destination as! ArticleViewController 14 vc.delegate = self 15 } 16 } 17 18 override func viewDidLoad() { 19 super.viewDidLoad() 20 // Do any additional setup after loading the view, typically from a nib. 21 } 22} 23 24// スクロール発生時に通知されるプロトコルを実装 25extension ViewController: ArticleViewControllerDelegate { 26 // スクロールアップ時に UIButton を表示する 27 func viewDidscrolledUp() { 28 if !isButtonDisplayed { 29 addPictureButton.isHidden = false 30 isButtonDisplayed = true 31 } 32 } 33 34 // スクロールダウン時に UIButton を非表示にする 35 func viewDidscrolledDown() { 36 if isButtonDisplayed { 37 addPictureButton.isHidden = true 38 isButtonDisplayed = false 39 } 40 } 41}

ArticleViewController

1import UIKit 2 3// スクロールの発生を検知してUIButtonの表示を切り替えるためのプロトコル 4protocol ArticleViewControllerDelegate: class { 5 func viewDidscrolledUp() 6 func viewDidscrolledDown() 7} 8 9class ArticleViewController: UIViewController { 10 11 @IBOutlet weak var tableview: UITableView! 12 13 weak var delegate: ArticleViewControllerDelegate? 14 // スクロールの開始点 15 var scrollBeginingPoint: CGPoint! 16 17 // ドラッグしてスクロールが発生する直前に呼び出される 18 func scrollViewWillBeginDragging(scrollView: UIScrollView) { 19 scrollBeginingPoint = scrollView.contentOffset 20 } 21 22 // スクロールが発生している間常に呼び出される 23 func scrollViewDidScroll(scrollView: UIScrollView) { 24 let currentPoint = scrollView.contentOffset 25 26 if scrollBeginingPoint.y < currentPoint.y { 27 print("scroll to bottom") 28 delegate?.viewDidscrolledDown() 29 } else { 30 print("scroll to top") 31 delegate?.viewDidscrolledUp() 32 } 33 } 34 35 override func viewDidLoad() { 36 super.viewDidLoad() 37 // Do any additional setup after loading the view. 38 tableview.delegate = self 39 tableview.dataSource = self 40 } 41 42} 43 44extension ArticleViewController: UITableViewDelegate { 45} 46 47extension ArticleViewController: UITableViewDataSource { 48 49 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 50 // スクロールさせるために50行のCellを表示 51 return 50 52 } 53 54 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 55 // CellのtextLabelにindexPath.rowを表示 56 let cell = UITableViewCell(style: .default, reuseIdentifier: "cell1") 57 cell.textLabel?.text = String(indexPath.row) 58 return cell 59 } 60 61} 62

storyboardはこのような状態です。
イメージ説明

どんなことでも構いませんのでアドバイス、お待ちしておりますm(_ _)m

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

TableViewの上にボタンを用意すればすんなり書けます。
サンプル作りましたので参考になれば幸いです。
https://github.com/MilanistaDev/DisappearButttonWhileScrolling

最小で書くならこんな感じです。

ボタンをTableViewの上に置く。

イメージ説明

swift

1import UIKit 2 3class ViewController: UIViewController { 4 5 @IBOutlet weak var bottomButton: UIButton! 6 @IBOutlet weak var tableView: UITableView! 7 8 override func viewDidLoad() { 9 super.viewDidLoad() 10 self.tableView.delegate = self 11 self.tableView.dataSource = self 12 } 13} 14 15extension ViewController: UIScrollViewDelegate { 16 17 // 肝はここ 18 //スクロール開始時にボタンのalpha値を0に 19 func scrollViewWillBeginDragging(_ scrollView: UIScrollView) { 20 self.bottomButton.alpha = 0.0 21 } 22 //スクロール終了時にボタンのalpha値を1に 23 func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { 24 self.bottomButton.alpha = 1.0 25 } 26} 27 28extension ViewController: UITableViewDelegate { 29} 30 31extension ViewController: UITableViewDataSource { 32 33 func numberOfSections(in tableView: UITableView) -> Int { 34 return 1 35 } 36 37 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 38 return 50 39 } 40 41 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 42 let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) 43 cell.textLabel?.text = String(indexPath.row) 44 return cell 45 } 46} 47

イメージ説明

投稿2019/08/09 16:17

編集2019/08/09 16:21
TakuyaAso

総合スコア1361

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

まず、最初にお聞きしたいのですが、なぜ 2 つの UIViewController を使われているのですか?
1 つの UIViewController に UITableView と UIButton を設置しても良いと思うのですが。

では、回答させていただきます。

まず、samson66 さんがやりたいと仰っているスクロールに応じてボタンの表示・非表示を切り替えたいということであれば、viewDidscrolledDownviewDidscrolledUp は、あまり本質的ではないと思うので、シンプルに、スクロールされたかどうか、スクロールが終わったかどうかという状況でお話しします。

また、以下に示すコードは、UI を Storyboard ではなく、コードベースで実装しているので少し見慣れないところも一部あるかと思いますが、適宜コメントを書いているので意味がわからないということは無いかと思います。
また、複雑な UI はどうしてもコードベースで制御するので、今のうちに慣れておくといいかと思います。

以下のコードは、UITableView と UIButton を表示させている UIViewController です。

スクロール時・スクロール終了時のボタン表示・非表示の切り替え方法は、コードとコメントを見ることで分かるのではないかと思います。

また、参考にされているページのコードを詳しく見てはいませんが、シンプルに 1 つの UIViewController で
実現できますし、Protocol を使う必要は無いかと思います。もちろん、遷移前のビューにスクロールを反映させたいという場合は、必要になるかもしれませんが。

swift

1 2import UIKit 3 4class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource { 5 6 fileprivate let cellId = "cellId" 7 8 // tableView の生成 9 fileprivate lazy var tableView: UITableView = { 10 let tv = UITableView() 11 tv.register(UITableViewCell.self, forCellReuseIdentifier: cellId) 12 tv.translatesAutoresizingMaskIntoConstraints = false 13 tv.rowHeight = 80 14 tv.delegate = self 15 tv.dataSource = self 16 return tv 17 }() 18 19 // button の生成 20 fileprivate let button: UIButton = { 21 let button = UIButton(type: .system) 22 button.setTitle("Click", for: .normal) 23 button.setTitleColor(.white, for: .normal) 24 button.backgroundColor = .blue 25 button.translatesAutoresizingMaskIntoConstraints = false 26 button.layer.cornerRadius = 38 27 return button 28 }() 29 30 override func viewDidLoad() { 31 super.viewDidLoad() 32 33 // view に tableView と button を追加 34 view.addSubview(tableView) 35 view.addSubview(button) 36 37 // tableView の位置を設定 38 tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true // 上 39 tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true // 左 40 tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true // 右 41 tableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true // 下 42 43 // button の位置を設定 44 button.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -32).isActive = true 45 button.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -32).isActive = true 46 button.widthAnchor.constraint(equalToConstant: 76).isActive = true // 幅 47 button.heightAnchor.constraint(equalToConstant: 76).isActive = true // 高さ 48 } 49 50 // スクロール中に呼ばれる 51 func scrollViewDidScroll(_ scrollView: UIScrollView) { 52 print("start") 53 // 表示・非表示を綺麗に見せるために、アニメーションを適用 54 UIView.animate(withDuration: 0.25) { 55 self.button.alpha = 0 56 } 57 } 58 59 // スクロールが終わった時に呼ばれる 60 func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { 61 print("end scroll") 62 UIView.animate(withDuration: 0.25) { 63 self.button.alpha = 1 64 } 65 } 66 67 // ドラッグスクロールが終わった時に呼ばれる 68 func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) { 69 print("end drag") 70 UIView.animate(withDuration: 0.25) { 71 self.button.alpha = 1 72 } 73 } 74 75 // セルの数 76 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 77 return 100 78 } 79 80 // セルのテキストを設定 81 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 82 let cell = tableView.dequeueReusableCell(withIdentifier: cellId, for: indexPath) 83 cell.textLabel?.text = "item (indexPath.row)" 84 return cell 85 } 86 87} 88

起動時
起動時

スクロール中
スクロール中

スクロール終了時
スクロール終了時

参考になれば幸いです。

投稿2019/08/09 16:05

編集2019/08/09 16:11
s.m_1

総合スコア293

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問