일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- UICollectionView
- HIG
- swift documentation
- clean architecture
- Clean Code
- 리펙토링
- Refactoring
- Protocol
- Human interface guide
- collectionview
- 클린 코드
- 애니메이션
- uiscrollview
- Xcode
- swiftUI
- ios
- 스위프트
- Observable
- MVVM
- tableView
- SWIFT
- RxCocoa
- UITextView
- rxswift
- uitableview
- ribs
- combine
- 리펙터링
- 리팩토링
- map
- Today
- Total
목록UI 컴포넌트 (swift) (66)
김종권의 iOS 앱 개발 알아가기
1. 스크롤되는 PagerView 구현 방법 - 상단 TabView 구현하기 2. 스크롤되는 PagerView 구현 방법 - 하단 PagerView 구현하기 v 3. 스크롤되는 PagerView 구현 방법 - Tab과 Pager 스크롤 싱크 맞추기 PagerView 형태 상단에는 TabView UIScrollView안에 UIStackView를 넣어서 구현하고 각 tap 이벤트는 뷰의 tag를 사용하면 인덱스를 구할 수 있음 하단에는 PagerView 페이지 기능을 쉽게 사용하기 위해서 UICollectionView를 사용하여 구현 주의) UIPageViewController를 사용하지 않음 - UIPageViewController안에 내장된 UIScrollView의 형태는 내부 content 크기만큼 있..
1. 스크롤되는 PagerView 구현 방법 - 상단 TabView 구현하기 v 2. 스크롤되는 PagerView 구현 방법 - 하단 PagerView 구현하기 3. 스크롤되는 PagerView 구현 방법 - Tab과 Pager 스크롤 싱크 맞추기 PagerView 형태 상단에는 TabView UIScrollView안에 UIStackView를 넣어서 구현하고 각 tap 이벤트는 뷰의 tag를 사용하면 인덱스를 구할 수 있음 하단에는 PagerView 페이지 기능을 쉽게 사용하기 위해서 UICollectionView를 사용하여 구현 주의) UIPageViewController를 사용하지 않음 - UIPageViewController안에 내장된 UIScrollView의 형태는 내부 content 크기만큼 있..
커스텀 팝업 ViewController * UIView 를 이용한 커스텀 팝업은 이전 포스팅 글 참고 커스텀 팝업 사용하는 쪽에서 present로 접근하여 사용할 수 있게끔 UIViewController를 상속받아서 구현되어야 하는 형태 팝업을 오픈하면 아래에서 위로 올라오는 애니메이션이 있는 형태의 팝업 구현 아이디어 UIViewController를 상속받아서 구현 modalTransitionStyle을 .coverVertical로 하면 아래에서 위로 올라오는 애니메이션이 적용되는데 이걸 그대로 사용 modalTransitionStyle 관련 개념은 이전 포스팅 글 참고 dimmed시키는 기능은 viewWillAppear에서 UIView를 추가하고, viewWillDisappear에서 UIView를 제..
탭바 컨트롤러 구현 아이디어 탭바 컨트롤러를 사용하는쪽(ClientCode)에서 TabBarController를 의존하고, TabBarController에서는 TabBar를 의존하는 형태 핵심: ClientCode에서는 TabBar의 존재 유무를 몰라도 되게끔 구현하여 결합도를 줄이는 방향 TabBarController 구현 핵심: ViewController 간 부모-자식 구조 사용 addChild를 사용 (addChild가 아닌 addSubView만 하면 부모 자식 관계가 성립하지 않으므로 주의) addChild 후에 addSubview로 뷰도 추가 마지막으로 didMove(toParent:) 호출 // A가 부모이고 B가 자식인 상황 A.addChild(B) A.view.addSubview(B.vie..
* 구현에 앞서, 수평 스크롤 뷰 준비 (UIScrollView와 UIStackView 이용) 구현 방법 및 코드는 이전 포스팅 글 참고 scrollRectToVisible 이해하기 rect 영역이 보이게끔 스크롤하는 것 open func scrollRectToVisible(_ rect: CGRect, animated: Bool) 파라미터인 rect는 스크롤 뷰 영역에 포함되어 있지 않으면 동작 x rect 영역이 이미 보이고 있다면 동작 x 만약 화면의 반인, 6부터 보이도록 스크롤하게 하는 방법? scrollRectToVisible에 사용될 rect 구하기 스크롤 되었을때 시작점은 CGPoint로 생각 스크롤의 시작점으로부터 얼마만큼 스크롤 될 것인지는 CGSize // 사각형의 영역을 그릴려면 필요..
구현 아이디어 Cell의 UI가 복잡하거나 여러가지의 타입이 있는 경우 보통 UITableView나 UICollectionView를 사용하지만, 위처럼 단순한 수평 스크롤 뷰는 UIScrollView와 UIStackView로 쉽게 구현 가능 주의할점은 UITableView, UICollectionView는 Cell을 재사용하여 UI성능에 이점이 있으므로, 데이터가 많을때는 UITableView나 UICollectionView를 사용 구현 핵심 부분은 데이터를 선택했을때 해당 데이터의 index를 알아내는 것인데, 이것또한 UIView의 tag를 활용하면 쉽게 구현이 가능 구현 * UI를 코드로 구현할 때 편의를 위해 아래 라이브러리 사용 pod 'SnapKit' pod 'Then' 수평 스크롤 뷰인 My..
UI 구현 시 주의할 점 최대한 constraint를 적게하고, UIKit에서 기본적으로 주어진 프로퍼티들을 이용하여 최대한 단순하게 만드는 것 constraint를 적게하는 이유: Commit Hitches가 줄어들어 UI 성능에 도움 (관련 글은 이전 포스팅 글 참고 추가적인 뷰 없이 내부적으로 있는 proprety를 이용하여 구현하면 뷰의 복잡도가 줄기 때문에 장황하지 않고 단순하게 구현이 가능 UIButton에 텍스트가 있는 버튼 위 UI는 UIButton한개로만 구현 다른 방법은, UIStackView + UIImageView + UILabel로 만들 수도 있지만 코드가 장황해지고, 타이틀을 눌렀을 때도 터치 반응을 해야하므로 gesture도 따로 등록해줘야 하는 번거로움이 있으므로 UIButt..
Thumbnail이 나열된 뷰 트위터에서 프로필이 나열된 형태의 뷰가 존재 이 뷰에서 동그란 썸네일이 나열된 형태이며, 얼핏 보기에 어려워 보이지만 UIStackView를 사용하면 쉽게 구현이 가능 구현 아이디어 1. stackView의 spacing 프로퍼티에 음수값을 대입 2. 안에 넣는 뷰들은 나중에 추가되는 뷰가 아래로 가야하므로 layer.zPosition을 통해 제어 3. 안에 넣는 뷰들의 borderWidth와 color를 배경 색과 같게하여, 마치 썸네일이 겹치는 부분은 배경색으로 표현되게끔구현 구현 상수값 color 준비 import UIKit class ViewController: UIViewController { private let color = UIColor.lightGray } ..