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 ...

Simulator Screen Shot - iPhone 12 - 2021-01-11 at 14.10.05.png

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!

Recommended Posts

How to place a button that does not move by scrolling on TableView etc.
How to interact with a server that does not crash the app
How to move another class with a button action of another class.
How to make @Transactional work that does not work if you use it incorrectly
How to deploy a container on AWS Lambda
How to delete a controller etc. using a command
How to create a class that inherits class information
[Rails] How to create a Twitter share button
How to build a Pytorch environment on Ubuntu
I want to go back to a specific VC by tapping the back button on the NavigationBar!
MockMVC returns 200 even if I make a request to a path that does not exist
Adding a network device to CentOS 8 on Hyper-V does not automatically create a virtual network interface
How to move to the details screen by clicking the image
How to make JavaScript work on a specific page
[Java] How to get a request by HTTP communication
How to start TOMCAT by specifying JAVA_HOME on Windows
[Java] How to cut out a character string character by character
How to create a Wear OS by Google app project on Android Studio 3.0 or higher