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

쉽게 레이아웃을 구현하기 위해 사용한 프레임워크 SnapKit Then 구현 아이디어 UICollectionView를 사용하여 수평 스크롤 뷰 구현 UICollectionViewFlowLayout을 이용하여 스크롤 뷰 구현 포스팅 글 참고 하단에 사용할 IndicatorView는 UIView를 서브클래싱하여 커스텀으로 구현 IndicatorView는 trackView와 trackTintView 두 개의 UIView로 구현 trackView - IndicatorView에서의 배경 UI trackTintView - 스크롤 될 때 표시될 진행사항 UI final class IndicatorView: UIView { // MARK: UI private let trackView = UIView().then { $..

예제에 사용한 프레임워크 코드로 레이아웃 정의를 편하게 하기 위해서 SnapKit 사용 구현 아이디어 point, beginTracking, continueTracking, endTracking을 통해서 터치 이벤트 획득 superview에서 위 4개의 메소드를 사용하기 위해서, subview들의 제스쳐를 비활성화 (isUserInteractionEnabled = false) 커스텀 뷰에서 value가 바뀔때마다, valueChanged 메소드로 알려주어야 하기때문에 UIControl를 서브클래싱 frame을 알아서, autolayout으로 update 시켜주면 완성 사전 지식 1) point(inside:with:) 메소드 해당 메소드로 터치 이벤트를 막을지, 실행할지 결정이 가능 frame.conta..

사용하는 쪽 class ViewController: UIViewController { private let jkSwitchOne: JKSwitch = { let view = JKSwitch() view.translatesAutoresizingMaskIntoConstraints = false return view }() private let jkSwitchTwo: JKSwitch = { let view = JKSwitch() view.barTintColor = .red view.circleColor = .orange view.translatesAutoresizingMaskIntoConstraints = false return view }() override func viewDidLoad() { super...

Cell안에 UICollectionView를 넣는 구현 아이디어 UITableViewCell 안에 UICollectionView가 있어야하므로, UITableViewCell을 서브클래싱한 커스텀 셀에 UICollectionView를 정의 UITableViewCell의 커스텀셀에서 dataSources를 처리하도록 구현 UITableViewCell에서 items들을 들고 있도록 구현 구현 - 모델링 셀에 표시할 타입 정의 thumbnail 케이스는 위 사진에서 MyTableViewCellOne에서 사용할 타입 collection 케이스는 위 사진에서 MyTableViewCellTwo에서 사용할 타입 (이 셀에는 collectionView가 존재하므로, collectionView에서 사용할 데이터도 포함) ..

Pulse 애니메이션 구현 아이디어 CABasicAnimation와 CAKeyframeAnimation 사용 크기를 키우는 애니메이션은 단순히 시간에 따라 일정한 방향으로 키우면 되므로 CABasicAnimation사용(keyPath: transform.scale.xy) 투명도가 밝아졌다가 다시 투명해져야 하므로, 값이 프레임에 따라 다르게 적용되어야하는 CAKeyframeAnimation사용 (keyPath: opacity) 위 애니메이션이 동시에 적용되어야 하므로, CAAnimationGroup을 사용 애니메이션 구현 클래스 준비 import UIKit class ViewController: UIViewController { } 뷰 준비 private let sampleView: UIView = { ..

* 이 글보다 더 깔끔하게 UI를 구현하고, 온라인 상태를 암시해주는 썸네일을 구현한 포스팅 글은 이 링크 참고 구현 아이디어 원에 강아지 넣기 UIView안에 UIImageView를 넣고, UIImageView의 autolayout을 통해 superview와 일정 간격 떨어뜨려서 흰색 여백을 생성 테두리 그라데이션 UIImageView의 superview인 containerView.layer에 CAGradientLayer()를 넣어서 그라데이션 입력 그라데이션 색상은 CAGradientLayer()에서 설정하고, 테두리 윤곽선을 따라서 그려지는 레이아웃은 CAShapeLayer()를 통해 레이아웃을 구해서 사용 원에 강아지 넣기 VC 준비 import UIKit class ViewController: ..

구현 아이디어 UIGestureRecognizer를 사용하여 제스쳐 이벤트를 감지 제스쳐 이벤트가 발생하면, 애니메이션 실행 애니메이션은 UIViewPropertyAnimator를 사용하여 구현 애니메이션은 다음 뷰가 점점 보여지도록 설정 UIViewPropertyAnimator를 사용하면 현재 진행되고 있는 진행률에 따라 애니메이션을 진행시킬 수 있고, 다시 reversed 시키는 기능이 편하므로 사용 드래그하면 뷰가 따라서 이동되게끔 하는 구현 아이디어 animator 정의 (transform 사용하여 뷰가 왼쪽으로 이동되는 애니메이션) gesture의 began상태 - animator를 생성 gesture의 changed 상태 - 현재까지 swipe된 x좌표와, width를 구하고 비율을 구하여 U..

사전 지식 1) CAGradientLayer gradation을 주어서 뷰의 테두리까지 발산되게 해야하므로, conic gradation을 사용 gradation의 종류(axial, radial, conic) 포스팅 글 참고 사전 지식 2) UIBezierPath, CAShapeLayer UIBezierPath는 선을 그리는 역할 CAShapeLayer에 UIBezierPath 인스턴스를 주입하고, CAShapeLayer에서 선에대한 속성을 부여 뷰가 있을 때 뷰의 테두리만 접근하여 테두리에만 특정 애니메이션을 적용시키고 싶은 경우, CAShapeLayer 인스턴스를 통해 테두리만에만 접근가능 테두리만 접근하여, 테두리의 width값이나 색상 값등을 추가가 가능 보통 CALayer 인스턴스의 mask 프..