본문 바로가기

전체 글

[iOS] collectionView의 custom header 설정하기 헤더뷰의 위치,헤더뷰와 셀 사이의 간격,셀의 bottom과 두번째 헤더뷰의 top과의 간격 등디테일하게 수정할 부분들이 꽤 있습니다.오늘은 하나씩 하나씩 UI 디테일을 수정했습니다. 1. 헤더뷰 위치를 왼쪽 이미지처럼 부모뷰 리딩 좌 상단에 딱 맞추기 수정 전 (오른쪽 이미지)header.headerLabel.snp.remakeConstraints { make in make.top.equalToSuperview().offset(-2) make.leading.equalToSuperview().offset(16) // leading을 16으로 설정}  수정 후 코드 (leading을 superview에 맞춰 설정)header.headerLabel.snp.remakeConstraints { make.. 더보기
[iOS] picker 버튼을 dropdown UIView와 연결하기 며칠 전 만든 이미지 없는 picker 버튼 기억하시나요?"아니, 전혀 모르겠는데?" →  이곳으로  오늘은 망망대해에 홀로 떠있는 이 버튼 뷰에게 '언제' '어디서' '어떻게' 모습을 드러내라! 하고 생명의 바람을 후! 넣어 줍니다.  picker 버튼을 불러올 '중간다리', dropdown 만들기   1. DropdownButtonViewDelegate 프로토콜: 두 개의 메서드 정의didSelectOption(_ option: String): 옵션이 선택되었을 때 호출dropdownButtonTapped(): 드롭다운 버튼이 눌렸을 때 호출protocol DropdownButtonViewDelegate: AnyObject { func didSelectOption(_ option: String).. 더보기
[iOS] picker 버튼을 UIView로 만들기 (UIButton → UIView) 앞서 만든 PeriodPickerBtnView의 UI를 다른 방식으로 구현해 봅니다.  앞에서 월간, 주간, 일간을 각각 UIButton으로 만들었다면,이번에는 먼저 UIView를 만들고, 그 안에 Label과 UIImage를 childView로 추가했습니다. UIButton이 아닌 UIVIew를 사용하면 버튼 사이에 넣은 topSeparator와 bottomSeparator 대신addBorder를 넣어 버튼 사이의 경계를 표현해 줄 수 있고, addTarget 메서드가 아닌, UITapGestureRecognizer를 사용하여 tap 되었을 때 동작을 정의하였습니다.   이 컴포넌트가 연결된 vc는 기존과 동일한 하기에 눈에 보이는 화면은 동일합니다. 완전히 다른 코드인데 같은 화면으로 노출된다니.. .. 더보기
[iOS] picker 버튼에 이미지 추가하기 (UIButton) 이미지가 있는 picker 버튼을 만들어봅니다.앞서 만든 버튼과 달리 이미지 애셋이 추가된 버전으로PeriodPickerBtnView라는 컴포넌트 뷰는 따로 빼서 연결해 주었습니다.  + TodoCalendarViewController에는 많은 요소들과 func들이 있지만이 곳에서는 셀을 구성하는 collectionView와 PickerBtn과 관련된 코드만 빼서 기록해 둡니다. 1. TodoCalendarViewControllerBaseViewController를 상속받은 클래스로 "할 일 캘린더" 기능을 담당하는 뷰 컨트롤러→ 사용자에게 일정 관리와 할 일 목록을 월간, 주간, 일간 보기로 제공하는 UI를 관리 BaseViewController:  BaseViewController를 상속받아 기본적인.. 더보기
[iOS] 옵션 선택을 위한 picker 버튼 만들기 세 개의 버튼과 두 개의 분리선이 있는 custom UIView로 picker 버튼을 만들고 기록합니다. 아자.! (੭•̀ᴗ•̀)੭1. PickerBtnView 클래스 정의 및 초기화:"기한임박", "등록순", "최신순" 텍스트 추가, 일반 / 선택 상태에 따라 텍스트 색상이 다르게 설정두 개의 분리선(topSeparator, bottomSeparator)은 얇은 선으로 분리buttons 배열을 사용하여 세 버튼에 쉽게 접근초기화 메서드(init(frame:) 및 required init?(coder:))는 setupView와 setupActions를 호출해서 뷰를 설정class PickerBtnView: UIView { private let button1: UIButton = { .. 더보기
[iOS] YZCenterFlowLayout 이해하기 앞서 만든 컬렉션 뷰 상단의 캐로셀 영역에서UICollectionViewFlowLayout을 서브클래싱하여 중앙 정렬된 셀 레이아웃을 제공하는 YZCenterFlowLayout이라는 클래스를 살펴봅니다. (아직 업데이트 중!) 출처:https://github.com/yudiz-solutions/YZCenterFlowLayout  셀 사이의 간격, 스크롤 목표지점 등 수정을 해야합니다..  [수정내용]  → func scrollToPage 현재 필요 없으므로 삭제  → 셀 사이의 간격은 CollectionViewCell에서 아래 spacingMode 숫자를 수정하여 재설정layout.spacingMode = .fixed(spacing: -5) 1. 열거형 정의두 개의 열거형 정의:아이템 간의 간격 설정 +.. 더보기
[iOS] UICollectionView에서 제네릭으로 코드 수정하기 + 제네릭(Generic)이란?  타입에 의존하지 않는 재사용 가능한 함수나 타입을 정의할 수 있도록 하는 기능. 제네릭을 사용하면 타입 안전성을 유지하면서도 여러 다른 타입과 함께 작동할 수 있는 코드를 작성할 수 있다. 타입 매개변수(parameter)를 사용하여 특정 타입으로 작동하는 코드의 틀을 제공한다. 프로젝트 진행 중에 컬렉션뷰 안에 셀이 있고 그 안에 다시 새로운 뷰에서 cell로 캐로셀을 구현하다보니셀을 등록하고 빼는 과정이 무척 혼란스러웠다. 이때 제네릭을 써보면 쉽지 어떻겠는지 의견을 주셔서 아래의 코드처럼 extension으로 빼냈으나 이 과정을 이해하진 못했다.선 코드 후 이해 방식으로.. 이제 하나씩 이해해 보자. 아래 제네릭은 UICollectionView에 대한 확장을 통해 .. 더보기
[iOS] UICollectionView 내의 Carousel UI 수정하기 (2) 앞의 글에 이어, 캐로셀 내의 Cell 디자인을 디테일하게 수정해봅니다.날짜 레이블에 추가적인 디자인을 넣어야 합니다.  이전 글의 마지막 수정 버전 ▽ 여기서 날짜(28일)을 중심으로 검은 원(너비와 높이는 각각 86.25*)을 넣어주고, 날짜 폰트 컬러는 화이트로 수정해야한다.  우선, 검은 동그라미의 레이아웃을 잡아주고, // 날짜를 감싸는 검은 동그라미 (너비*높이 : 86.25) private lazy var dateContainerView: UIView = { let view = UIView() view.backgroundColor = .black view.layer.cornerRadius = 43.125 // 86.25 / 2 view.l.. 더보기

티스토리툴바