일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- combine
- 리팩토링
- MVVM
- uiscrollview
- tableView
- ribs
- Observable
- Human interface guide
- 리펙토링
- rxswift
- ios
- uitableview
- Protocol
- SWIFT
- clean architecture
- Clean Code
- swift documentation
- 리펙터링
- map
- Xcode
- HIG
- collectionview
- 스위프트
- 클린 코드
- 애니메이션
- swiftUI
- Refactoring
- UICollectionView
- UITextView
- RxCocoa
- Today
- Total
목록UI 컴포넌트 (swift) (66)
김종권의 iOS 앱 개발 알아가기
Custom View (xib) 기본 개념 custom view 인스턴스를 사용하기까지의 개념 이해 xib -> nib -> instance (아래 구현부에서 계속 상세히 설명) instance는 UIView를 상속한 커스텀 뷰를 만들때 필요하고, UITableViewCell과 같은 커스텀 셀에서는 불필요 > tableView.register(nib, forCellReuseIdentifier:)할 때 nib파일을 넣어주므로 커스텀 셀에서는 불필요 Custom Cell 준비 Cocoa Touch Class로 UITableViewCell 생성 cf) cell이 아닌 일반적인 view를 만들때는 .swift파일과 .xib파일 생성 주의) UITableViewCell을 아래처럼 swift, views 파일 따로..
구현 아이디어 UICollectionView 사용하고 layout은 IUCollectionViewFlowLayout 인스턴스 사용 UITextView를 갖는 커스텀 cell을 만든 후, 말풍선의 tipView는 CGMutablePath를 통해 그려주는 방식 커스텀 채팅 Cell 구현 class ChatMessageCell: BaseCollectionViewCell { // 구현 } 필요한 모델을 nested로 정의 enum ChatType: CaseIterable { case receive case send } struct Model { let message: String let chatType: ChatType } var model: Model? { didSet { bind() } } UI 컴포넌트 초..
Horizontal Scroll View 단순히 인터렉션이 없고 보여주기만 한다면 해당 Horizontal Scroll View 사용해도 무방하지만, Interaction이 필요한 경우 해당 클릭된 셀이 어떤 셀 이벤트인지 확인할 수 있는 ViewPager 글 참고 구현 아이디어 imageView를 scrollView에 추가할 때 xOffset값을 horizontalWidth값에 비례하여 삽입 후, scrollView의 contentSize.width값을 horizontalWidth * imageViews.count만큼 설정하면 완료 구현 BaseScrollView 정의 class BaseScrollView: UIScrollView { var model: Model? { didSet { if let mo..
아이디어 stackView가 있고, stackView 안에 Button들이 존재 해당 Button들은 for문으로 정해준 개수만큼 생성되며, 배열로 참조되고 있는 형태 버튼들의 tag를 설정하여, 어떤 버튼이 눌렀는지 tag로 체크 후 tag이하를 갖는 인덱스들을 선택된 처리 BaseView 정의 class BaseView: UIView { override init(frame: CGRect) { super.init(frame: frame) configure() } @available(*, unavailable) required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } func configure() {} fu..
구현 아이디어 상단에는 CollectionView를 통해 수평 스크롤뷰 생성 아래에는 PageViewController를 통해 다수의 ViewController 존재 두 인터렉션을 연결하여 하나의 ViewPager를 사용하는 경험을 주는 UI 사용되는 Component 참고 * PageViewController 참고: https://ios-development.tistory.com/623 [iOS - swift] PageViewController (페이지 뷰 컨트롤러) PageViewController 구현 원리 ViewController가 들어있는 배열을 준비 첫번째 ViewController를 PageViewController에 set 초기화 나머지 ViewController 전환은 DataSourc..
* CollectionView 3번 내용 참고 1. CollectionView (컬렉션 뷰) - UICollectionViewFlowLayout 2. CollectionView (컬렉션 뷰) - UICollectionViewFlowLayout을 이용한 CarouselView (수평 스크롤 뷰) 3. CollectionView (컬렉션 뷰) - custom layout (grid, pinterest 레이아웃 구현) 4. CollectionView (컬렉션 뷰) -실전 사용 방법 (FlowLayout, CustomLayout, binary search, cache)
GradientView UIView를 상속받아서 구현 layer.addSublayer로 CAGradientLayer 객체를 추가한 형태 특정 layout 또는 특정 component위에 gradientView 객체를 올려서 사용 isUserInteractionEnabled = false인 상태로 터치 이벤트는 responder chain을 통해 sublayer에 넘기도록 설정 GradientView 구현 BaseView 정의 class BaseView: UIView { override init(frame: CGRect) { super.init(frame: frame) configure() } @available(*, unavailable) required init?(coder: NSCoder) { fa..
UI 포인트 leftView, rightView padding 설정 eftViewRect 설정, rightViewRect 설정 textRect(bounds:): 입력중이 아닌 resignFirstResponder 상태일 경우의 입력된 text 위치 editingRect(bounds:): 입력중의 텍스트 위치 placeholderRect(bounds:): placeholder의 위치 delegate를 통해 특정 타이밍에 leftView, rightView 사라지게 하는 방법 textFieldDidBeginEditing(:): 포커스를 얻은 경우 textFieldDidEndEditing(:): 포커스를 잃은 경우 textField(:shouldChangeCharactersIn:replacementString..