[SWIFT] How to place a button that does not move by scrolling on TableView etc.

Introduction

"You can place it on top with NavigationBarItem etc., but something is different in design ...", "Since there are two functions, it is not enough to divide by tabs ..." In such a case, a button that does not move by scrolling on the view I want to place. Here we will implement a button that does not work in the code base. In addition, we use SnapKit, which is convenient when creating a layout based on the code base. (Where snp is attached) Since it is originally specified byCGRect () or CGSize (), please replace it if necessary. If you use storyboard, here will be helpful. By the way, it seems to be ** Floating Button ** in Flutter and Android. When you create a new app with Flutter, it should have been used in the first counting app ...

View preparation

Creating a class

Create a class that inherits UIView called FloatingButtonView, prepare for initialization, and define UIButton and UITableView.

import UIKit
import SnapKit

class FloatingButtonView: UIView {
    
    let tableView =  UITableView()
    let floatingButton = UIButton()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

TableView preparation

The size and layout are defined in the function setupTableView.

private func setupTableView() {
        addSubview(tableView)
        tableView.snp.makeConstraints {
            $0.center.equalToSuperview()
            $0.size.equalToSuperview()
        }
    }

Preparing the floatingButton

The size and layout are defined in a function called setupFloatingButton. Since it's a big deal, I use layer.cornerRadius to make it round. You can make a beautiful circle by halving the length of one side.

private func setupFloatingButton() {
        floatingButton.backgroundColor = .blue
        addSubview(floatingButton)
        floatingButton.snp.makeConstraints {
            $0.width.equalTo(50)
            $0.height.equalTo(50)
            $0.right.equalToSuperview().offset(-30)
            $0.bottom.equalToSuperview().offset(-30)
        }
        floatingButton.layer.cornerRadius = 25
    }

Whole source code

import UIKit
import SnapKit

class FloatingButtonView: UIView {
    
    let tableView =  UITableView()
    let floatingButton = UIButton()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupTableView()
        setupFloatingButton()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupTableView() {
        addSubview(tableView)
        tableView.snp.makeConstraints {
            $0.center.equalToSuperview()
            $0.size.equalToSuperview()
        }
    }
    private func setupFloatingButton() {
        floatingButton.backgroundColor = .blue
        addSubview(floatingButton)
        floatingButton.snp.makeConstraints {
            $0.width.equalTo(50)
            $0.height.equalTo(50)
            $0.right.equalToSuperview().offset(-30)
            $0.bottom.equalToSuperview().offset(-30)
        }
        floatingButton.layer.cornerRadius = 25
    }
}

ViewController preparation

All you have to do is paste what you made with Viewd.

Creating a class

import UIKit

class FloatingButtonViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

Preparing the loadView

In loadView, change your own view to the FloatingView you created earlier.

override func loadView() {
        view = FloatingButtonView()
}

Whole source code

import UIKit

class FloatingButtonViewController: UIViewController {
    
    override func loadView() {
        view = FloatingButtonView()
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

Complete!