【Swift】Neumorphism인 TabBar를 구현한다

외부 라이브러리 사용

사용한 라이브러리 : NeumorphismTab

CocoaPods로 설치

pod 'NeumorphismTab'

코드

라이브러리 가져오기

import NeumorphismTab

NeumorphismTabBarController 을 상속받은 MainTabBarController 클래스 만들기

class MainTabBarController: NeumorphismTabBarController

override func setupView() 메소드에 다음을 기술

color 설정

view.backgroundColor = #colorLiteral(red: 0.9725490196, green: 0.9725490196, blue: 0.9725490196, alpha: 1)

TabBarItem 생성

여기에 icon 에 SFSymbols 이미지가 있습니다.
title 를 비우면 텍스트가 표시되지 않는 버튼이 됨

let first = NeumorphismTabBarItem(icon: UIImage(systemName: "newspaper")!, title: "")
let second = NeumorphismTabBarItem(icon: UIImage(systemName: "person.crop.circle")!, title: "")
let third = NeumorphismTabBarItem(icon: UIImage(systemName: "info.circle")!, title: "")

별도의 파일로 각 탭의 내용이 되는 ViewController를 작성 인스턴스화

let firstViewController = FirstViewController()
let secondViewController = SecondViewController()
let thirdViewController = ThirdViewController()

tabBarItem 및 ViewController 설정

setTabBar(items: [first, second, third])
setViewControllers([firstViewController, secondViewController, thirdViewController], animated: false)

완성형

전체 코드

import UIKit
import NeumorphismTab

class MainTabBarController: NeumorphismTabBarController {

   override func setupView() {

        let first = NeumorphismTabBarItem(icon: UIImage(systemName: "newspaper")!, title: "")
        let second = NeumorphismTabBarItem(icon: UIImage(systemName: "person.crop.circle")!, title: "")
        let third = NeumorphismTabBarItem(icon: UIImage(systemName: "info.circle")!, title: "")

        view.backgroundColor = #colorLiteral(red: 0.9725490196, green: 0.9725490196, blue: 0.9725490196, alpha: 1)

        let firstViewController = FirstViewController()
        let secondViewController = SecondViewController()
        let thirdViewController = ThirdViewController()


        setTabBar(items: [first, second, third])
        setViewControllers([firstViewController, secondViewController, thirdViewController], animated: false)
    }
}