Material Design Floating Button for iOS with Swift

Hello, this is a self-taught 100 app-making channel. This channel supports those who do not know the coding and beginners.
This video aims to create an app by combining each element you need.
I recommend you to study around the parts where you have questions after copying this video.
Now let's use Google Material Design to create Floating Button for iOS with Swift.

---

First Paste: Installing Floating Button as a pod file inside the app

Create a new project in Xcode.
Run Terminal.
Access the new project folder from Terminal.
Enter Pod intit to create a Pod file.
Run the newly created Pod file in the folder.
Paste the code that installs the button and press the Save button.

//# 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

Return to Terminal and type Pod install to install the floating button inside the app.
Close the .xcodeproj file that was open.
newly createdRun the xcworkspace file.

---

Second Paste : Include in ViewController to enable floating buttons

Open the ViewController file.
Paste the code that calls up Floating Button into ViewController in the first line.

 

import MaterialComponents.MaterialButtons
//import UIKit

//class ViewController: UIViewController {

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

---

3rd Paste : Set the location, icon, and color of the floating button

Paste the func code for Floating Button setting in the bottom of ViewDidLoad.
This code sets the location, icon, and color of the floating button.

 

//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))
    }
        
//}

---

Fourth Paste: Set the item to run when the Floating button is pressed

Paste the object code into the lower part of the func you just entered, which will run when the user presses the Floating button.
Experimentally, when the button is pressed, the Hello World sentence is printed.

 

//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")
//    }

//}

 

---

Fifth Paste: Invoke the floating button you just created in ViewDidLoad

 

Paste the code that calls up the setFloatingButton function inside ViewDidLoad.

//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")
}


//}

Run the app.

Verify that the statement is output when the button is pressed.

---

More information can be found in the Google Material Design Developer document.
Please refer to the link for the code used in the video. Thank you.