iOS/UI7 iOS - Compositional Layout을 적용해 보자! 목표 UI 최근 진행중인 프로젝트에서 제가 맡은 뷰의 UI입니다. 상하 스크롤이 가능해야 하고 가운데에 있는 공식 홈페이지~크루 버튼 부분은 가로 스크롤이 가능해야 했습니다. 이 뷰를 구현하는 방법은 다양합니다. UIScrollView로 만들고 그 안에 여러 버튼들을 직접 전부 구현해서 넣기 UICollectionView 또는 UITableView로 만들고 Cell로 내부 UI들 처리 + 가로 스크롤이 필요한 부분은 Cell안에 CollectionView추가 UICollectionViewComposionalLayout 사용 저는 3번인 CompositionalLayout을 사용하는 것으로 정했습니다. 그 이유는 ComposotionalLayout이 이번 예시처럼 스크롤 영역이 중첩되는 뷰를 구현할 때 매.. 2023. 8. 3. [Swift] iOS 네이버 지도 SDK - 마커 커스텀 최근에 진행한 프로젝트에서 네이버 지도 SDK를 사용하여 기능을 구현해야 했었습니다. 사용자가 직접 지도를 터치하여 달리기 코스를 그리는 것이 주요 요구사항이었습니다. 구현해야 하는 디자인은 다음과 같습니다. 요구사항 처음 입력받은 좌표는 출발지로 설정해야 한다. ➡️ 출발이라는 말풍선 이미지를 포함해야 하고 다른 마커들과 UI가 다르다. 특정 뷰에서는 출발지 마커에 말풍선이 없어져야 한다. 그 이후 사용자가 터치해서 생기는 마커들은 테두리가 있는 작은 원 모양이다. 위와 같이 크게 3개의 요구사항으로 정리할 수 있었습니다! 그렇다면 제가 구현해야 할 마커는 출발지 마커와 경유지 마커입니다. 구현 사용한 NMapsMap SDK 버전 : 3.16.1 네이버 지도 SDK는 다양한 기능을 제공하고 있고 마커.. 2023. 7. 12. iOS UIScrollView 키보드 show/hide 시 스크롤 처리 UIScrollView를 사용해 폼 형식의 뷰를 구현하다 보면 사용자가 입력을 할 때 생기는 키보드 만틈 뷰를 올려줘야 하는 상황이 발생한다. 즉, 사용자가 TextField를 터치하여 입력을 시작하면 ScrollView가 키보드의 높이만큼 자동으로 스크롤되어 사용자가 입력중인 TextField가 키보드에 가려지지 않도록 해야한다. 사실 이 문제를 해결하는 코드는 구글링을 하면 많이 나오고 복붙하면 바로 사용이 가능하다. 하지만, 이번에 구현한 방식은 흔히 사용하는 코드를 Protocol로 만들어서 재사용성을 높인 방식이다. Keyboard의 등장에 따른 UI 처리는 여러 VC에서 중복으로 필요한 경우가 많고 이럴 때 마다 필요한 코드를 매번 VC에 넣게되면 VC의 크기가 커지게 된다. 이는 우리가 지양.. 2023. 3. 15. CollectionView MultipleSelection 영상처럼 cell을 여러개 선택할 수 있도록 구현하고 우측 상단에 선택된 총 cell의 개수를 UI로 보여주기를 원한다. 시도 방법 func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool { guard let cell = collectionView.cellForItem(at: indexPath) as? ImageListCollectionViewCell else { return false } print(cell.isSelected) if cell.isSelected { self.total -= 1 } else { self.total += 1 } return true } sho.. 2023. 2. 15. FSCalendar 를 이용하여 캘린더 뷰 만들기 구현하고자 하는 뷰 구현 코드 // // testVC.swift // Korail-iOS // // Created by sejin on 2022/11/17. // import UIKit import FSCalendar class TestVC: UIViewController { // 현재 캘린더가 보여주고 있는 Page 트래킹 lazy var currentPage = calendarView.currentPage // 이전 달로 이동 버튼 private let prevButton = UIButton(type: .system).then { $0.setImage(UIImage(systemName: "chevron.left"), for: .normal) $0.tintColor = .black } // 다음 달로 .. 2023. 2. 11. .grouped, .insetGrouped style tableView에서 위아래 여백 제거하기 생성일: 2022년 7월 3일 오전 1:28 UITableView(frame: .zero, style: .insetGrouped) 또는 UITableView(frame: .zero, style: .grouped) 처럼 style을 지정해준다면 테이블 뷰에 기본적으로 header, footer가 들어가서 원하는 크기의 테이블뷰가 생성되지 않는다. 문제 화면 보기 편하게 테이블 뷰의 backgroundColor를 .white로 주었다. 각 셀의 높이를 50, 셀의 개수 4개 ⇒ 총 높이 200 이기 때문에 TableView의 높이를 200으로 지정해주었다. 하지만 위의 사진처럼 위에 기본 헤더가 존재해서 원하는대로 UI가 구현되지 않고 아래의 cell이 잘려서 보이게 된다. 해결 방법 TableView의 H.. 2023. 2. 11. 이전 1 2 다음
