붙여넣기 Swift 강의 - iOS를 위한 Floating Button Ctrl+C, V로 만들기

안녕하세요. 독학으로 100개 앱만들기 채널입니다. 본 채널은 코딩을 알지 못하는 사람과 초심자들을 응원합니다.
본 영상은 자신에게 필요한 각 요소들을 조합해서 앱을 만드는 방법을 지향합니다.
본 영상을 따라해본 뒤에 의문이 생기는 부분을 중심으로 공부하는 것을 추천해드립니다.
그럼 지금부터 Google Material Design을 이용하여 iOS를 위한 Floating Button을 Swift를 가지고 만들어 보겠습니다.

---

1/5

첫번째 붙여넣기 : Floating Button을 앱 내부에 Pod파일로 설치

 

Xcode에서 새로운 프로젝트를 만듭니다.
Terminal을 실행합니다.
Terminal에서 새로운 프로젝트 폴더에 접근합니다.
Pod init을 입력하여 Pod file을 만들어줍니다.
폴더에서 새로 만들어진 Pod 파일을 실행합니다.
버튼을 설치하는 코드를 붙여넣고 저장버튼을 눌러줍니다.

 

Paste 1.

첫번째 붙여넣기

//# Uncomment the next line to define a global platform for your project
//# platform :ios, '9.0'

//target 'MaterialDemo' do
//  # Comment the next line if you don't want to use dynamic frameworks
//  use_frameworks!

//  # Pods for MaterialDemo

pod 'MaterialComponents/Buttons'

//  target 'MaterialDemoTests' do
//    inherit! :search_paths
//    # Pods for testing
//  end

//  target 'MaterialDemoUITests' do
//    # Pods for testing
//  end

//end

 

다시 Terminal로 돌아와 Pod install을 입력하여 앱 내부에 플로팅 버튼을 설치합니다.
열려져있던 .xcodeproj 파일을 닫습니다.
새롭게 만들어진 .xcworkspace 파일을 실행합니다.

---

2/5

두번째 붙여넣기 : 플로팅 버튼을 사용할 수 있도록 ViewController에 포함

 

ViewController 파일을 엽니다.
가장 첫줄에 ViewController로 Floating Button을 불러오는 코드를 붙여넣습니다.

 

Paste 2.

두번째 붙여넣기

import MaterialComponents.MaterialButtons
//import UIKit

//class ViewController: UIViewController {

//    override func viewDidLoad() {
//        super.viewDidLoad()
//    }
//}    

---

3/5

세번째 붙여넣기 : 플로팅 버튼의 위치와 아이콘과 색상을 설정

 

ViewDidLoad 하단부에 Floating Button 설정을 위한 func 코드를 붙여넣습니다.
이 코드에서 플로팅 버튼의 위치와 아이콘과 색상을 설정합니다.

 

Paste 3.

세번째 붙여넣기

//import MaterialComponents.MaterialButtons
//import UIKit

//class ViewController: UIViewController {

//   override func viewDidLoad() {
//        super.viewDidLoad()
//   }

func setFloatingButton() {
        let floatingButton = MDCFloatingButton()
        let image = UIImage(systemName: "message.fill")
        floatingButton.sizeToFit()
        floatingButton.translatesAutoresizingMaskIntoConstraints = false
        floatingButton.setImage(image, for: .normal)
        floatingButton.setImageTintColor(.white, for: .normal)
        floatingButton.backgroundColor = .systemBlue
        floatingButton.addTarget(self, action: #selector(tap), for: .touchUpInside)
        view.addSubview(floatingButton)
        view.addConstraint(NSLayoutConstraint(item: floatingButton, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: -64))
        view.addConstraint(NSLayoutConstraint(item: floatingButton, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: -32))
    }
        
//}

---

4/5

네번째 붙여넣기 : 플로팅 버튼을 눌렀을 때 실행될 항목을 설정

 

방금 입력한 func 하단부에 사용자가 Floating 버튼을 눌렀을 때 실행될 object 코드를 붙여넣습니다.
실험적으로 버튼을 눌렀을 때 Hello World 문장이 출력되도록 하였습니다.

 

Paste 4.

네번째 붙여넣기

//import MaterialComponents.MaterialButtons
//import UIKit

//class ViewController: UIViewController {

//    override func viewDidLoad() {
//        super.viewDidLoad()
//        setFloatingButton()
//    }
    
//    func setFloatingButton() {
//        let floatingButton = MDCFloatingButton()
//        ...
//        view.addConstraint(NSLayoutConstraint(item: floatingButton, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: -32))
//    }
    

@objc func tap(_ sender: Any) {
	print("Hello World")
}


//}

---

5/5

다섯번째 붙여넣기 : ViewDidLoad에서 방금 만든 플로팅 버튼을 호출

 

ViewDidLoad 내부에서 setFloatingButton 함수를 불러오는 코드를 붙여넣습니다.

 

Paste 5.

다섯번째 붙여넣기

//import MaterialComponents.MaterialButtons
//import UIKit

//class ViewController: UIViewController {

//    override func viewDidLoad() {
//        super.viewDidLoad()

        setFloatingButton()
        
//    }
    
//    func setFloatingButton() {
//        let floatingButton = MDCFloatingButton()
//        ...
//        view.addConstraint(NSLayoutConstraint(item: floatingButton, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: -32))
//    }
    
//    @objc func tap(_ sender: Any) {
//        print("Hello World")
//    }

//}

 

앱을 실행시킵니다.
버튼을 눌렀을 때 문장이 출력되는지 확인합니다.
더 자세한 내용은 Google Material Design 개발자 문서를 통해 확인하실 수 있습니다.
감사합니다.

---

처음부터 끝까지 한번에 만드는 과정 영상으로 보기

www.youtube.com/watch?v=2-DLCD0yP2I