112 iOS Swipe Tab Menu, Swift UI
**Swipe Tab Menu
=>iOS에는 Android 와 같은 상단에 탭 메뉴를 제공해주는 기능이 없습니다.
=>상단에 탭 처럼 배치하고 누를 때 마다 필요한 화면으로 이동하고 스와이프를 이용해서 화면 전환이 되도록 구현할려면 직접 구현을 하거나 이미 만들어진 외부 라이브러리를 이용해야 합니다.
=>직접 구현을 할 때는 상단에 필요한 만큼의 버튼을 생성 - 버튼에 선택되었을 때와 그렇지 않을 때의 색상을 다르게 설정을 합니다.
하단에는 스크롤 뷰를 배치하는데 안에 콘텐츠가 될 뷰들을 화면 크기 단위로 배치를 하고 버튼을 누를 때 마다 화면 단위로 이동되도록 구현합니다.
=>외부 라이브러리를 이용하는 방법은 여러가지 형태로 구현되어 있습니다.
=>하이브리드 앱이 빌드를 하게되면 Cocoa Pods Project로 빌드 되므로 iOS에서 Cocos pods를 사용하는 것은 중요합니다.
1.Project를 생성
2.Cocoa Pods 프로젝트로 변환
=>터미널을 실행시켜 프로젝트가 저장된 디렉토리로 프롬프트를 이동 한 후 pod init
3.의존성 설정
=>Podfile을 열어서 Target 별로 필요한 의존성을 설정
SwipeViewController 의 의존성을 설정
pod ‘SwipeViewController’
4.터미널로 이동해서 의존성 라이브러리를 설정
pod install
5.현재 열려있는 프로젝트를 닫고 xcworkspace 파일을 열기
6.다운로드 받은 pod 프로젝트 안의 SwipeViewController.swift, SwipeButtonWithImage.swift 파일을 자신의 프로젝트에 복사
7.SwipeButtonWithImage.swift 파일에 UIKit 을 import
import UIKit
8.다른 탭에 보여질 UIViewController로 부터 상속받는 클래스를 생성 - FirstVC
9.FirstVC.swift 파일에 버튼을 누르면 ViewController로 푸시되는 메소드를 새생성
//버튼을 누르면 호출되는 메소드
@objc func buttonTapped(){
let viewController = UIViewController()
viewController.view.backgroundColor = .black
navigationController?.pushViewController(viewController, animated:true)
}
10.FirstVC.swift 파일의 viewDidLoad 메소드에 버튼을 배치하고 누르면 위의 메소드를 호출하도록 추가
let button = UIButton()
button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
button.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(button)
button.setTitle("버튼", for: .normal)
button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
button.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
11.ViewController 클래스를 SwipeViewController로부터 상속받도록 변경
12.ViewController.swift 파일에 바버튼을 눌렀을 때 호출될 메소드 생성
//바버튼 아이템을 눌렀을 때 호출될 메소드를 생성
@objc func push(_ sender: UIBarButtonItem){
let vc = UIViewController()
vc.view.backgroundColor = UIColor.purple
vc.title = "Cool"
navigationController?.pushViewController(vc, animated:true)
}
13.ViewController.swift 파일의 viewDidLoad 메소드에 바버튼을 추가하고 위의 메소드를 호출하도록 설정
let barButtonItem = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(push(_:)))
barButtonItem.tintColor = .black
self.navigationItem.leftBarButtonItem = barButtonItem
14.SceneDelegate.swift 파일의 Scene이 생성될 때 호출되는 메소드 재정의
=>iOS 13 이하 버전에서만 동작하는 애플리케이션을 만들 때는 AppDelegate.swift 파일에 작성
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
//탭에 필요한 만큼 뷰 컨트롤러를 생성
let vc1 = FirstVC()
vc1.view.backgroundColor = UIColor(red: 0.19, green: 0.36, blue: 0.60, alpha: 1.0)
vc1.title = "First"
let vc2 = UIViewController()
vc2.view.backgroundColor = UIColor(red: 0.70, green: 0.36, blue: 0.60, alpha: 1.0)
vc2.title = "Second"
let vc3 = UIViewController()
vc3.view.backgroundColor = UIColor(red: 0.19, green: 0.70, blue: 0.20, alpha: 1.0)
vc3.title = "Third"
//스와이프 뷰 컨트롤러 생성
let swipeViewController = ViewController(pages:[vc1, vc2, vc3])
//옵션 설정
swipeViewController.startIndex = 0
swipeViewController.selectionBarWidth = 80
swipeViewController.selectionBarHeight = 3
swipeViewController.selectionBarColor = UIColor(red: 0.23, green: 0.55, blue: 0.92, alpha: 1.0)
swipeViewController.selectedButtonColor = UIColor(red: 0.23, green: 0.55, blue: 0.92, alpha: 1.0)
swipeViewController.equalSpaces = false
//윈도우의 첫번째 뷰 컨트롤러로 swipeViewController
window?.rootViewController = swipeViewController
window?.makeKeyAndVisible()
guard let _ = (scene as? UIWindowScene) else { return }
}
15.실행
16.텍스트 대신에 이미지 적용 - SceneDelegate.swift 파일의 Scene이 만들어 질 때 호출되는 메소드에 추가
1) 필요한 이미지 추가
2)코드 작성
// Button with image example
let btnFirst = SwipeButtonWithImage(image: UIImage(named: "heart"), selectedImage: UIImage(named: "yellowheart"), size: CGSize(width: 40, height: 40))
let btnTwo = SwipeButtonWithImage(image: UIImage(named: "message"), selectedImage: UIImage(named: "message"), size: CGSize(width: 40, height: 40))
let btnThree = SwipeButtonWithImage(image: UIImage(named: "idea"), selectedImage: UIImage(named: "idea"), size: CGSize(width: 40, height: 40))
swipeViewController.buttonsWithImages = [btnFirst, btnTwo, btnThree]