【Swift】 플로팅 액션 버튼을 만드는 방법

플로팅 액션 버튼을 만드는 방법.

구현 이미지



TableViewCell 위에 떠 있는 디자인으로 슬라이드해도 고정되도록 구현합니다.


Storyboard



우선 button만을 두고 AutoLayout을 붙입니다.


그 위에 TableView,TableViewCell을 화면 가득 놓습니다. TableViewCell의 Identifier를 Cell로 설정합시다.


소스 코드



ViewController.Swift
import UIKit

class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var button: UIButton!

//    TableView
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 30
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        return cell
    }

//    FAB
    var startingFrame : CGRect!
    var endingFrame : CGRect!

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if (scrollView.contentOffset.y >= (scrollView.contentSize.height - scrollView.frame.size.height)) && self.button.isHidden {
         self.button.isHidden = false
         self.button.frame = startingFrame 
         UIView.animate(withDuration: 1.0) {
          self.button.frame = self.endingFrame
         }
        }
    }
    func configureSizes() {
        let screenSize = UIScreen.main.bounds
        let screenWidth = screenSize.width
        let screenHeight = screenSize.height

        startingFrame = CGRect(x: 0, y: screenHeight+100, width: screenWidth, height: 100)
        endingFrame = CGRect(x: 0, y: screenHeight-100, width: screenWidth, height: 100)

    }

    override func viewDidLoad() {
        super.viewDidLoad()

//        buttonを角丸にする
        button.layer.cornerRadius = 32
    }


}

좋은 웹페이지 즐겨찾기