일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- tableView
- uiscrollview
- 애니메이션
- swiftUI
- SWIFT
- 리펙터링
- Clean Code
- MVVM
- HIG
- Refactoring
- 클린 코드
- 리팩토링
- Protocol
- 스위프트
- RxCocoa
- ribs
- UITextView
- uitableview
- combine
- swift documentation
- rxswift
- collectionview
- Xcode
- ios
- UICollectionView
- Human interface guide
- Observable
- clean architecture
- 리펙토링
- map
- Today
- Total
목록UI 컴포넌트 (swift) (66)
김종권의 iOS 앱 개발 알아가기
Nested Scroll이란? * more, less 스크롤 방향의 기준: 새로운 콘텐츠로 스크롤링하면 more, 이전 콘텐츠로 스크롤링하면 less ex) more scroll 한다는 의미: 손가락을 아래에서 위로 올려서 새로운 콘텐츠를 확인한다 1.outer scroll을 more 스크롤 만약 outer scroll을 more scroll 다 했으면, child scroll을 more scroll 2.outer scroll을 less 스크롤 만약 inner scroll이 less 스크롤 할게 남아 있다면 inner scroll을 less 스크롤 3. inner scroll을 less 스크롤 inner scroll을 모두 less scroll한 경우, outer scroll을 less scroll 4...
1. 상단 탭과 하단 수평 스크롤 UI 구현 방법 - 상단 TabHeaderView 구현 (UICollectionView) 2. 상단 탭과 하단 수평 스크롤 UI 구현 방법 - 하단 콘텐츠 구현 (UIPageViewController) right 스와이프 하기 직전 호출 (다음 화면은 무엇인지 리턴) func pageViewController( _ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController ) -> UIViewController? { guard let index = contentViewControllers.firstIndex(of: viewController) else { re..
1. 상단 탭과 하단 수평 스크롤 UI 구현 방법 - 상단 TabHeaderView 구현 (UICollectionView) CGSize { items[index].title.size(OfFont: .systemFont(ofSize: 18)) } } 데이터소스 selectedPublish를 사용하여 내부에서 탭 이벤트를 방출하고, Reactive extension으로 클라이언트 코드에게 탭 이벤트를 제공(아래에서 계속) extension TabHeaderView: UICollectionViewDataSource { func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { items...
1. Sticky Header 구현 - 스크롤 시 상단 해더 숨기는 방법 2. Sticky Header 구현 - 스크롤 시 상단에 뷰 붙이는 방법 구현 아이디어 sticky할 뷰와 동일한 형태 뷰 준비 + 숨김 상태로 초기화 sticky 뷰는 scroll 안에 넣지 않고 맨 상단에 보이도록 scrollView보다 위에 있도록 addSubview scrollView의 top은 topView의 하단에 붙이기 (topView의 하단에 sticky도 붙일것) sticky 뷰는 topView하단에 붙이기 + stikcy의 높이는 sticky할 뷰의 높이와 동일하게 설정 스크롤 뷰의 델리게이트 메소드인 scrollViewDidScroll에서 stikcy 타이밍을 계산하여 stikcyHeaderView를 hide/s..
nested scrollView 안쪽과 바깥쪽 스크롤 뷰 모두 isScrollEnabled가 on인 경우, 아래처럼 안쪽 스크롤이 활성화되어 있는 상태 단, 안쪽 스크롤이 상단까지 스크롤된 경우, 더 이상 스크롤 할 내용이 없다면 아래처럼 자동으로 바깥쪽 스크롤이 되는 형태 스크롤 뷰 안에 또다른 스크롤 뷰가 있을 경우, 바깥쪽 스크롤이 어느정도 스크롤 되었을 때 안쪽 스크롤 뷰가 스크롤 되도록 하는 방법? 1) 안쪽 스크롤의 isScrollEnabled를 false로 초기화 2) scrollViewDidScroll()델리게이스 메소드에서 contentOffset을 보고 스크롤을 상단 뷰의 길이만큼 한 경우 스크롤 활성화 구현 방법 * 예제에는 코드로 오토레이아웃 정의에 편리한 SnapKit 사용 Vie..
Custom TabBar 구현 아이디어 StackView의 distribution을 fillEqually로, alignment를 center로 설정하고 각 버튼을 삽입하여 구현 distribution을 filleEqually로 설정하면 스택뷰안의 아이템들이 동일한 크기로 배치 Custom TabBar 구현 구현에 사용된 extension UIControl에 추가한 addAction은 버튼의 이벤트 처리를 할 때, addTarget 방식이 아닌 클로저 처리 방식으로 사용 UIImage에 추가한 alpha 메소드는 이미지에 alpha값을 부여하는 메소드 // https://ios-development.tistory.com/1237 public extension UIControl { func addAction..
1. Sticky Header 구현 - 스크롤 시 상단 해더 숨기는 방법 2. Sticky Header 구현 - 스크롤 시 상단에 뷰 붙이는 방법 Sticky Header 개념: 스크롤 뷰 상단에 마치 붙어있다가 아래로 스크롤하면 뷰가 떼어진다고 하여 Sticky Header라고 명칭 구현 아이디어 UIScrollView가 가장 하위에 있고, 그 위에 StickyHeaderView가 존재 UIScrollView의 델리게이트 메소드 중 scrollViewDidScroll(_ scrollView: UIScrollView)를 사용하여 스크롤 offset에 따라 StickyHeader뷰의 alpha값만 조정하면 구현 완료 Sticky Header 구현 * 코드로 오토레이아웃 정의에 편리한 SnapKit 사용 레..
커스텀 버튼 구현 아이디어 UIButton을 상속하여 사용 hilighted 애니메이션 처리? UIButton에서 제공해주는 isHighlighted와 setImage를 오버라이딩하여 사용 커스텀 버튼 구현 UI 준비 - stackView하나와 imageView, label 준비 class MyButton: UIButton { private let stackView: UIStackView = { let view = UIStackView() view.axis = .vertical view.alignment = .center view.distribution = .fill view.spacing = 12 view.isUserInteractionEnabled = false view.translatesAutore..