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

* 이미지를 이용한 방법은 이전 포스팅 글 참고 구현 아이디어 UIBezierPath를 통해서 동그란 layer 그리기 layer의 lineWith를 1보다 크게하여 테두리를 만들고 이 테두리의 색상(strokeColor)은 blue, 내부에 채워지는 색상(fillColor)은 clear로 설정 테두리가 꽉차 있으면 안되고 중간이 뚫려 있어야 하므로 strokeStart를 0.2정도로 설정하여 20%는 비어지도록 설정 이 뷰를 CABasicAnimation의 transform.rotation을 사용하여 효과를 주면 완성 구현 LoadingView 정의 final class LoadingView: UIView { init() { super.init(frame: .init(origin: .zero, size..

ProgressButton 특정 기능을 수행하고난 후 특정 시간내에 취소할 수 있는 카운트 다운을 시각적으로 보여주는 버튼 기능에 사용 구현 아이디어 원의 둘레는 CAShapeLayer와 CABasicAnimation을 통해 그리게끔 구현 애니메이션 끝난 경우 이벤트 수신은 CAAnimationDelegate를 통해 알림 안의 x 이미지는 UIImage 사용 구현 사용하는쪽 ProgressButton을 초기화하고, progress를 돌리고 싶은 경우 animate(startRatio:) 사용 class ViewController: UIViewController { private var progressButton: ProgressButton! override func viewDidLoad() { super..

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..

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

마스킹 구현 아이디어 파란색 UIView의 layer.mask에 CAShapeLayer() 인스턴스를 주입하여, 안에가 비어지도록 구현 CAShapeLayer 인트선스의 path에는 와인딩 룰을 가지고 있는 UIBezierPath를 주입 사전 지식) UIBezierPath의 성질 - 와인딩 룰 Winding Rules: path의 외부와 내부를 파악하는 방법 중 하나이며, path의 방향에 따라 내부를 칠하거나 비우는 규칙 UIView의 path값을 UIBezierPath인스턴스로 만든 후, UIView의 mask에 넣으면 와인딩 룰에 의하여 안쪽 color를 채워주는 방법 path가 겹치는 부분들의 내부 색상은 CAShapeLayer의 "fillColor"프로퍼티, path의 색상은 "strokeCol..

View 사용하여 구현 (가장 간편) 사각형 View위에 작은 tip 추가 topView에 path와 layer설정하여 구현 좀더 구체적인 예제, 커스텀 뷰로 만드는 방법은 말풍선 뷰 구현 포스팅 글 참고 import UIKit import SnapKit class ViewController: UIViewController { private let width = 120.0 private let height = 120.0 private let someView = UIView() override func viewDidLoad() { super.viewDidLoad() self.someView.backgroundColor = .systemOrange self.view.addSubview(self.someVie..

UIBezierPath란 Bezier(베지에 곡선 할 때 베지에): 선분을 그릴 때 사용 CAShapeLayer란 CoreAnimation이라 하여 CAShapeLayer 객체를 이용하여 UIBezierPath의 색깔들을 바꿀 수 있고 view.layer에 추가될 수 있는 객체 원리 UIBezierPath객체로 선분을 그려줌 CAShapeLayer의 path에 위에서 만든 UIBezierPath객체.cgPath를 등록 CAShapeLayer로 스타일을 지정해준 뒤, view.layer.addSublayer(CASharpeLayer객체)로 추가 예제) UITextField 밑에 선분 그리기 UIBezierPath의 move(to:) 함수: 그려지는 시작 점 정의 UIBezierPath의 addLine(to..