[iOS] 알람 앱 (1) - TabBarItem, NavigationBarItem 이미지 추가하기

 

오늘은 새로운 프로젝트 발제날!

 

프로젝트의 주제는 알람, 타이머, 스탑워치 기능이 있는 알람앱이다.

주제들이 다 어려울 것 같아서 고민하다가 팀원들과 즐겁게 할 수 있을 것 같은 알람 앱으로 결정했다.

 

SA 작성

이번에도 프로젝트 SA를 작성하고 코드컨벤션, 커밋 규칙 등을 작성하고 작업을 시작했다.

 

 

Figma 작업

와이어 프레임과 참고할 디자인 요소들도 피그마에서 작업했다.

다크모드와 라이트모드의 디자인은 각각 정했는데 우선 다크모드 기준으로 구현한 후 수정할 것 같다!

 

 

GitHub 초기 작업

이번에는 개인 Repository 대신 Organization을 생성해서 Repository를 만들었다.

 

이제 ignore 파일 추가 후 초기 코드 업로드 후 각자 맡은 UI 작업을 시작했다.

 

이번에는 팀원들과 Issue를 만들어서 사용하는 것도 경험해보기로 해서 처음으로 써봤다.

소연님이 만들어주신 이슈 템플릿을 사용해서 할 일 정리 후 이슈에서 브랜치를 만들어서 사용했다.

Pull Request 템플릿도 만들어주셔서 내일 push 하기 전에 작성해볼 예정이다.

 

TabBarItem, NavigationBarItem

또한 각자 맡은 역할을 시작하기 전에 각자의 ViewController를 TabItem으로 연결하기 위해 TabBarViewController 파일을 생성했다.

private func configureUI() {
    self.view.backgroundColor = UIColor(red: CGFloat(13)/255.0, green: CGFloat(13)/255.0, blue: CGFloat(37)/255.0, alpha: 1.0)
    self.tabBar.backgroundColor = UIColor(red: CGFloat(44)/255.0, green: CGFloat(44)/255.0, blue: CGFloat(69)/255.0, alpha: 1.0)
    self.tabBar.barTintColor = .white
    self.tabBar.tintColor = .orange

    let topView = UIView()
    topView.backgroundColor = UIColor(red: 44/255, green: 44/255, blue: 69/255, alpha: 1.0)
    view.addSubview(topView)
    topView.snp.makeConstraints { make in
        make.top.equalToSuperview()
        make.leading.equalToSuperview()
        make.trailing.equalToSuperview()
        make.bottom.equalTo(view.safeAreaLayoutGuide.snp.top)
    }
}

우선 탭바의 컬러 및 기본 작업을 위 코드와 같이 작성했다.

네비게이션 바도 이용할 예정이라 네비게이션 상단 뷰에 대한 UI 설정도 했다.

 

private func configureTabItem() {
    let clockNav = UINavigationController(rootViewController: ClockViewController())
    let alarmNav = UINavigationController(rootViewController: AlarmViewController())
    let timerNav = UINavigationController(rootViewController: TimerViewController())
    let stopNav = UINavigationController(rootViewController: StopwatchViewController())

    clockNav.tabBarItem.title = "Clock"
    alarmNav.tabBarItem.title = "Alarm"
    timerNav.tabBarItem.title = "Timer"
    stopNav.tabBarItem.title = "Stopwatch"

    let iconSize = CGSize(width: 24, height: 24)
    let iconSize2 = CGSize(width: 32, height: 32)

    if let clockIcon = UIImage(named: "clockIcon")?.resized(to: iconSize) {
        clockNav.tabBarItem.image = clockIcon
    }

    if let alarmIcon = UIImage(named: "alarmIcon")?.resized(to: iconSize) {
        alarmNav.tabBarItem.image = alarmIcon
    }

    if let timerIcon = UIImage(named: "timerIcon")?.resized(to: iconSize) {
        timerNav.tabBarItem.image = timerIcon
    }

    if let stopwatchIcon = UIImage(named: "stopwatchIcon")?.resized(to: iconSize2) {
        stopNav.tabBarItem.image = stopwatchIcon
    }

    configureNavigationBar(clockNav)
    configureNavigationBar(alarmNav)
    configureNavigationBar(timerNav)
    configureNavigationBar(stopNav)

    self.setViewControllers([clockNav, alarmNav, timerNav, stopNav], animated: false)
}

각 뷰 컨트롤러들을 네비게이션 root로 지정한 후 탭 바의 항목으로 추가했다.

또한 이미지를 탭바 아이템에 추가하기 위해 각 탭바의 아이템으로 설정했다.

이때 이미지의 사이즈를 조정하는 메서드는 Extension에 추가해서 사용했다.

 

private func configureNavigationBar(_ navigationController: UINavigationController) {
    guard let modeImage = UIImage(named: "modeImage"),
          let moreImage = UIImage(named: "moreImage") else {
        return
    }

    // Mode 버튼 설정
    let resizedModeImage = modeImage.resized(to: CGSize(width: 30, height: 20))
    let modeImageView = UIImageView(image: resizedModeImage)
    let modeItem = UIBarButtonItem(customView: modeImageView)

    // More 버튼 설정
    let resizedMoreImage = moreImage.resized(to: CGSize(width: 20, height: 20))
    let moreImageView = UIImageView(image: resizedMoreImage)
    let moreItem = UIBarButtonItem(customView: moreImageView)

    navigationController.topViewController?.navigationItem.leftBarButtonItem =  modeItem
    navigationController.topViewController?.navigationItem.rightBarButtonItem = moreItem
    navigationController.navigationBar.backgroundColor = UIColor(red: 44/255, green: 44/255, blue: 69/255, alpha: 1.0)
}

위 코드는 네비게이션 바에 이미지 버튼을 추가한 내용이다.

각 탭들의 네비게이션 아이템이 똑같기 때문에 네비게이션 바 스타일도 TabBarViewController 파일에 작성했다.

 

Stopwatch 화면 UI 구성

피그마를 참고해서 코드베이스로 맡은 화면인 Stopwatch의 화면 구성을 했다!

스택뷰로 각 분, 초, 밀리초의 라벨과 라벨을 담는 뷰,그리고 Lap, Start 버튼을 생성하고 레이아웃까지 설정했다.

확실히 스토리보드로 작업하는 것보다 코드베이스가 간단한 UI작업도 오래걸리는 것 같다.. 버튼 아래에 Lap 타임을 보여줄 테이블뷰도 추가할 예정이다.

 

 

그리고 취업 준비를 위해 5분 기록 보드도 작성하기 시작했다. 

우리 조 이모지들이 아주 귀여워서 기념으로 캡쳐했다ㅎ.ㅎ🍑

내일은 UI 마무리 후 스톱워치 기능 구현에 집중해봐야겠다! 이번 프로젝트도 화이팅~!💪💪