본문 바로가기

전체 글

[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.. 더보기
[iOS] UICollectionView 내의 Carousel UI 수정하기 (1) 앞의 글에서 콜렉션뷰 섹션에 들어가는 캐로셀의 코드를 작성하고, VC에 연결했어요. 이제 연결된 캐로셀 UI를 팀에서 협의된 디자인에 맞추어 디테일하게 수정해 봅니다. 1. TodoCalandarViewController에서 섹션으로 나뉜 뷰의 사이즈 너비를 화면과 동일하게 수정하고, (width 360 -> 393) // 셀 크기 설정 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { return CGSize(width: 393, height: 244) .. 더보기

티스토리툴바