[TIL] 24.02.06

🩵 오늘 한 일

 

✔️ 디자인 제작 + 디자인 시스템?

디자인 시스템이라는 것에 알고 계신가요?

대충 서비스에 적용될 디자인적인 규칙 혹은 가이드라인이라고 보시면 쉽습니다.

보통은 공통으로 사용될 것을 지정해둡니다.

예를 들면 색상, 텍스트와 관련된 스타일 / 재사용이 잦을 것으로 예상되는 버튼과 같은 UI 컴포넌트등이 포함됩니다.

 

 

이번 팀 과제의 주제는 날씨 앱으로 정했어요.

테마는 "간단하게 확인하고 원하는 정보를 커스텀 가능한" 날씨 앱 입니다.

 

보편적으로 메인 화면에 한 번에 정보를 확인할 수 있도록 하단에 쭈루룩 정보가 떠 있는데,

이걸 최대한 단순화 시키고 스크롤 x 단일 페이지로 작업해봤어요

 

이렇게 디자인을 하고 나면 (혹은 하기 전에) 

개발자는 디자인을 확인하며 어떤 부분이 재사용될지 생각해봐야 해요.

그래야 프로젝트 세팅을 할 때 색상, 텍스트 시스템을 지정해두고

반복될 부분을 컴포넌트화 시켜 재사용할 수 있으니까요... ^____^ 

 

재사용에 미쳐버리는 개발자들

 

 

 

다만 회의를 거친 결과 이번 디자인은 거의 UICollectionView같은 Cell을 사용하는 컴포넌트를 사용하게 될 것 같네요

그래서 따로 컴포넌트화 할 건.. 없어보입니다.ㅎㅎ 다행이에요

 

쨌던.. 이번 프로젝트에서는 드디어 디자인 시스템도 적용을 시켜볼 것 같습니다.

디자인도 얼레벌레 할 줄 아는 입장에서는 이런거 챙겨주면 또 기분이 좋거든여...

 

 

 

✔️ 페이지네이션

저는 이번에 메인 화면을 만들게 되었어요.

UI 다루는 걸 좋아해서 좀 어려워보이는걸.. 해보고 싶었네요ㅎ

 

특히 눈에 띄는게 전체 화면을 페이지네이션 시키는 부분이었습니다

처음에는 View를 왔다갔다 하려고 했는데 팀 회의중 UI 스케치를 공유하며 이야기하다가

같은 디자인이고 데이터만 바뀌니 UICollectionView는 어떠냐는 의견이 있어서 적극 수용했습니다.

 

UICollectionView와 UIPageControl를 사용해서

페이지 단위로 내용을 스크롤하고 페이지 컨트롤을 통해 현재 페이지를 표시하는 기능을 테스트용으로 만들어봤어요

class ViewController: UIViewController {

    let numberOfPages = 3 // 페이지 수
    var collectionView: UICollectionView!
    var pageControl: UIPageControl! // 페이지 컨트롤 추가

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .white
        
        setCollectionView()
        setPageControl()
        setLayout()
    }
}

extension ViewController {
    func setCollectionView() {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        layout.minimumLineSpacing = 0
        layout.minimumInteritemSpacing = 0

        collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView.isPagingEnabled = true
        collectionView.showsHorizontalScrollIndicator = false
        collectionView.backgroundColor = .clear

        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
        
        view.addSubview(collectionView)
    }
    
    func setPageControl() {
        pageControl = UIPageControl()
        pageControl.numberOfPages = numberOfPages
        pageControl.currentPage = 0
        pageControl.tintColor = .white
        pageControl.pageIndicatorTintColor = .systemGray4
        pageControl.currentPageIndicatorTintColor = .systemBlue // 현재 페이지의 인디케이터 색상 변경
        pageControl.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(pageControl)
    }
    
    func setLayout() {
        NSLayoutConstraint.activate([
            pageControl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            pageControl.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20)
        ])
    }
}

• viewDidLoad() 메서드를 오버라이드하여 화면이 로드될 때 호출되는 초기 설정 수행
• 배경색을 흰색
• setCollectionView() - collectionView 생성
• setPageControl() - pageControl 생성
• setLayout() - 오토레이아웃 설정

 

// MARK: - UICollectionViewDataSource

extension ViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return numberOfPages
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)

        cell.backgroundColor = .systemGray
        let label = UILabel(frame: CGRect(x: 20, y: 100, width: cell.contentView.frame.width - 40, height: 100))
        label.text = "page \(indexPath.row + 1)"
        label.textColor = UIColor(named: "Label/Primary")
        label.font = UIFont.systemFont(ofSize: 24, weight: .bold)
        label.textAlignment = .center
        cell.contentView.addSubview(label)

        return cell
    }
}

 

• UICollectionViewDataSource
  • 셀의 개수와 셀을 반환하는 메서드 구현

 

// MARK: - UICollectionViewDelegateFlowLayout

extension ViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return collectionView.bounds.size
    }
}

 

• UICollectionViewDelegateFlowLayout
  • 셀의 크기를 설정

 

// MARK: - UIScrollViewDelegate

extension ViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let pageIndex = round(scrollView.contentOffset.x / scrollView.frame.width)
        pageControl.currentPage = Int(pageIndex)
    }
}

 

• UIScrollViewDelegate
  • 스크롤 이벤트가 발생할 때 페이지 컨트롤의 현재 페이지를 업데이트

 

 

잘 응용해서 메인화면 만들어보겠습니다 ^_^