김종권의 iOS 앱 개발 알아가기

Extendable tableVeiw 구현 아이디어 셀의 UI는 stackView에 label을 넣고 hidden을 on/off하며 펼쳐지거나 줄어들게끔 구현 데이터 소스 타입에 isDescHidden와 같이 플래그를 넣고, 확장하고 싶은 경우 isDescHidden을 false로 한 다음 해당 데이터 부분만 reloadRows(at:with:)을 통해 업데이트 reloadRows(at:with:)에서 애니메이션도 지정할수 있는데, 아래로 팽창하듯이 늘어나는 옵션은 UITableView.RowAnimation.automatic 사용 // 해당 셀 업데이트 tableView.reloadRows(at: [IndexPath(row: indexPath.row, section: 0)], with: UITableV..

구현 아이디어 상단에는 UIImageView, 하단에는 스크롤되는 UITableView나 UICollectionView 준비 (예제에서는 UICollectionView 사용) UIImageView와 UICollectionView 레이아웃 UICollectionView의 topAnchor를 화면의 최상단으로 제약 UICollectionView의 top contentInset값을 UIImageView의 크기만큼 설정 - UIImageView가 마치 collectionView의 하나의 셀처럼 보이도록 하기 위함 상단의 UIImageView도 마치 스크롤 되는 동작처럼 보여야하므로, scrollViewDidScroll(_:) 델리게이트에서, scrollView.contentOffset.y값을 이용하여 UIIma..

TimerView 입력한 초만큼 테두리에 stroke가 칠해지는 뷰 구현 아이디어 UIBezierPath를 이용하면 뷰의 테두리 부분의 위치를 쉽게 구할 수 있는 점 CAShapeLayer를 이용하면 테두리의 width값과 fillColor, strokeColor, 거기에다가 CABasicAnimation의 "strokeEnd" 애니메이션도 쉽게 사용이 가능 사용하는쪽에서는 단순히 아래에서 구현할 TimerView를 addSubview하고 start(duration:)하여 사용 ex) TimerView를 사용하는쪽 // ViewController.swift private func addTimerView(on subview: UIView) { let timerView = TimerView() subview..

구현 아이디어 UIView 2개를 준비 안쪽 뷰 하나 바깥 쪽 waveView 하나 바깥 쪽 waveView의 CGSize를 크게했다가, 줄였다가를 재귀적으로 계속 요청하여 반복되도록 설정 구현 원 형태로 그려지게 할것이므로, RoundView 준비 import UIKit class RoundView: UIView { override func layoutSubviews() { super.layoutSubviews() self.clipsToBounds = true self.layer.cornerRadius = self.bounds.height / 2.0 } } Wave Animation을 적용할 ViewController 준비 import UIKit class ViewController: UIViewCon..

구현 아이디어 - 뷰의 구조 레이아웃을 쉽게하기 위해서 뷰 2개를 사용 맨 아래에 깔린 뷰 - 터치 이벤트가 아래 뷰에 전달되는 PassThroughView를 사용 그 위에 UIView를 얹는 형태 (= bottomSheetView) BottomSheetView의 constraint left.right.bottom은 superview와 같도록 정의 top은 미리 정의해둔 yPosition만큼 top의 간격만큼 처리 // tip(아래쪽에 붙어있는 모드)과 full로 정하고, 각 yPosition을 계산 enum Mode { case tip case full } private enum Const { static let bottomSheetRatio: (Mode) -> Double = { mode in swi..

사용한 프레임워크 UI 레이아웃 구현에 편의를 위해 사용 SnapKit Then 구현 아이디어 동그란 뷰가 여기저기서 많이 사용되고 있으므로, RoundView, RoundImageView를 새로 만들어서 사용 동그란 뷰를 서브클래싱하여 구현 핵심은 온라인 상태를 암시해주는 초록색 뷰의 위치 가장 아래에 있는 UIView에 이미지가 들어갈 containerView와 온라인 상태를 암시하는 greenDotContainerView를 삽입 containerView에는 이미지가 들어가는 형태로 구현 바깥 테두리의 그라데이션 효과는, layoutSubviews()에서 CAShapeLayer를 통해 테두리의 radius, width값을 구해서 사용 구현 동그란 뷰 RoundView, RoundImageView //..

1. 스크롤 영역을 암시해주는 Carousel 구현 - (UICollectionView, 수평 스크롤 뷰, paging 구현) 2. 스크롤 영역을 암시해주는 Carousel 구현 - 포커스 영역 이펙트 첫번째 글에서 구현한 Carousel) 이번 글에서 알아볼, 셀에 효과가 들어간 Carousel) * 포커스 되는 영역이 아닐 경우, dimmed 처리 * 구현 전에 이전까지 구현된 코드 다운로드: https://github.com/JK0369/ExCarousel 모델 생성 iOS에서 셀은 항상 reuse 되므로, cell에 직접 접근하여 속성을 변경하는 것보다 dataSource에 속성을 지정해준 다음 reloadData하도록 설계할것 상태 관리를 dataSource에서만 하도록 구현 기존에 아래처럼 있..

1. 스크롤 영역을 암시해주는 Carousel 구현 - (UICollectionView, 수평 스크롤 뷰, paging 구현) 2. 스크롤 영역을 암시해주는 Carousel 구현 - 포커스 영역 이펙트 구현 아이디어 수평 스크롤 뷰 구현 방법은 FlowLayout+UICollectionView으로 구현하는 방법인 이전 포스팅 글 참고 양옆에 item이 보여서, 스크롤 할 수 있다는 암시를 주도록 paging이 되어야 하므로 이 것을 구현하는 것이 핵심 paging을 직접 구현 `isPagingEnabled = false` 스크롤이 페이징처럼 보여지기 `decelearationRate = .fast` 페이징을 scrollViewWillEndDragging에서 구현 (UICollectionViewDelega..