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

1. CALayer 마스킹 활용 - 마스킹하는 기본 방법 (mask, .evenOdd) 2. CALayer 마스킹 활용 - 특정 뷰 음영 효과 주는 방법

1. CALayer 마스킹 활용 - 마스킹하는 기본 방법 (mask, .evenOdd)

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

구현 아이디어 테두리에 관한 윤곽 레이아웃을 구하기 위해서 UIBezierPath를 사용 이 UIBezierPath의 cgPath값을 밑에 CAShapeLayer에서 사용 테두리에 도는 애니메이션을 적용하기 위해서 2가지의 CAShapeLayer를 사용 회색 선을 타나내는 CAShapeLayer 파란색으로 색상이 채워지는 CAShapeLayer CAShapeLayer 준비 회색 선 layer의 strokeEnd 값은 1.0으로 놓으면 원으로 칠해져 있는 상태 파란색 색상 layer의 strokeEnd 값의 초기값은 0으로 놓고, CABasicAnimation의 "strokeEnd" 애니메이션을 통해서 1초마다 strokeEnd값이 채워지도록 구현 커스텀뷰 필요한 요소 준비 윤곽 레이아웃 path 상태를 ..

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

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