본문 바로가기

728x90

🍎 iOS/UI59

[iOS/UI] 특정 부분만 투명하게 만들기 (feat. fillRule, evenOdd) 안녕하세요 Foma 입니다! 오늘은 프로젝트 진행 중에 특정 부분만 투명하게 해서 그 부분만 보이게 하는 기능을 만드는 법에 대해 정리해 보려고 합니다. 바로 시작할게요~ Preview Add a label 배경에 레이블을 하나 넣어 투명한지 아닌지 확인하기 쉽게 만들어 주겠습니다. let label = UILabel(frame: CGRect(x: view.center.x - 100, y: view.center.y - 100, width: 200, height: 200)) label.backgroundColor = .systemBlue label.textColor = .white label.font = UIFont.boldSystemFont(ofSize: 20) label.text = "Fomagran".. 2022. 7. 31.

[iOS/UI] UIBezierPath 쉽게 사용하기 (feat. EasierPath) 안녕하세요 Foma 💻 입니다! 오늘은 직접 원하는 모양을 그릴 수 있는 UIBezierPath를 더욱 쉽게 사용할 수 있는 EasierPath에 대해서 알아 보겠습니다. 바로 시작할게요~! UIBezierPath 평소에 원하는 모양을 직접 커스텀해서 그릴 때 UIBezierPath를 자주 사용 했었는데요. 먼저 UIBezierPath를 이용해서 항아리 모양을 그리는 코드를 작성해 보겠습니다. 1. UIBezierPath 인스턴스를 생성해 그려준다. let bezierPath:UIBezierPath = UIBezierPath() bezierPath.move(to: CGPoint(x: 100, y: 100)) bezierPath.addLine(to: CGPoint(x: 200, y: 100)) bezier.. 2022. 5. 30.

[iOS/UI] UIBezierPath 안을 Gradient 컬러로 채우기 (Fill a UIBezierPath with Gradient Color) 안녕하세요 Foma💻 입니다! 오늘은 UIBezierPath 안을 Gradient 컬러로 채우는 방법에 대해서 알아보도록 하겠습니다. 바로 시작할게요~ TestView 뷰를 아래와 같이 초기화 해줍니다. class TestView: UIView { override init(frame: CGRect) { super.init(frame: frame) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func draw(_ rect: CGRect) { } } UIBezierPath 이제 UIBezierPath를 draw 메서드 안에 그려보겠습니다. 타원형 경로를 아래와 같이 생성해 줍니다.. 2022. 5. 2.

[iOS/UI] UIBezierPath의 거의 모든 것 (feat. 모양,곡선,직선 그리기) 안녕하세요 Foma 💻 입니다! 오늘은 원하는 모양을 직접 그릴 수 있는 UIBezierPath에 대해서 알아보려고 합니다. 예전부터 다루고 싶은 주제였는데 드디어 정리하게 되네요..! 바로 시작할게요~ UIBezierPath란? UIBezierPath는 UIKit에서 그리기(Drawing)에 속해있는 클래스입니다. 그러므로 어떤 것을 그리기 위한 기능들이 속해있겠죠? 애플 공식 문서에는 아래와 같이 정의하고 있습니다. A path that consists of straight and curved line segments that you can render in your custom views. 해석하면 view에서 렌더링 할 수 있는 직선과 곡선으로 구성된 경로라고 하네요. Initializer Bez.. 2022. 3. 21.

[iOS/UI] CALayer란? (feat. 애니메이션 원리) 안녕하세요 Foma 💻 입니다! 저번 시간에 Core Animation에 대한 글을 작성했는데요. Core Animation을 공부하다 보니 Layer가 거의 전부라고 해도 되겠더라구요.. 그래서 따로 Layer에 대해 정리하는 글을 작성하게 되었습니다. (혹시 Core Animation에 대해 잘 모르시는 분들으 여기 에서 확인해주세요!) 바로 시작할게요~ CALayer란? Layer의 사전적 의미는 겹,막,층,단계를 뜻합니다. 사전적 의미와 같이 iOS에서도 아래와 같이 계층으로 사용되는 되는데요. 정확하게는 이미지 기반 컨텐츠를 관리하고 해당 컨텐츠에서 애니메이션을 수행할 수 있도록 하는 개체입니다. 즉, 배경색,테두리 및 그림자와 같이 설정할 수 있는 화면에 표시할 수 있는 시각적 속성을 관리하는.. 2022. 3. 17.

[iOS/UI] Core Animation이란? (feat. CALayer) 안녕하세요 Foma 💻 입니다! 오늘은 애니메이션이 작동되는 원리에 대해 더 깊게 이해하기 위해서 iOS에서 애니메이션 시스템을 담당하는 Core Animation에 대해서 알아보려고 합니다. 바로 시작할게요~ Core Animation이란? 뷰 및 기타 시각적 요소에 애니메이션을 적용하기 위한 범용 시스템 그래픽 렌더링 및 애니메이션 인프라 뷰와 통합되어 콘텐츠 애니메이션을 위한 더 나은 성능과 지원을 제공하는 기술 아래와 같이 UIKit 및 AppKit의 근간이 되는 기술로 iOS 및 OS X를 앱을 개발하고 있다면 무조건 Core Animation을 사용하는 것입니다. Core Animation을 직접 사용할 필요는 없지만 사용할 때 Core Animation이 어떠한 원리로 수행되는지 이해할 필요.. 2022. 3. 16.

[🧩 Creative Coding] 컬러풀한 물결 웨이브 만들기(feat. Interactive Developer) 안녕하세요 Foma 💻 입니다! 오늘은 저번에 줄에 매달려 흔들리는 상자 만들기 에 이어서 인터랙티브 디벨로퍼님의 튜토리얼 움직이는 웨이브를 Swift로 구현한 것을 정리해보려고 합니다! 바로 시작할게요~ 아래는 인터랙티브 디벨로퍼 김종민님의 튜토리얼 영상입니다. Preview 1. S자 곡선 그리기 S자 곡선을 그리기 위해서 시작과 끝을 정해주고 사이에 두 점이 필요합니다. 그리고 사이의 점을 위로 당기거나 아래로 당겨주면 아래와 같은 S자 곡선이 그려집니다. 2. 움직이는 웨이브 만들기 연결된 선의 사이 두 점을 위 아래로 이동시키면 웨이브가 움직이는 것처럼 보이겠죠? 3. 여러 웨이브 만들기 우선 시작과 끝을 아래와 같이 두 점으로 정해줍니다. 그리고 그 사이에 있는 점 4개를 1,2,3,4라고 부.. 2021. 12. 16.

[🧩 Creative Coding] 줄에 매달려 흔들리는 상자 만들기 (feat. Interactive Developer) 안녕하세요 Foma 💻 입니다! 오늘은 줄에 매달려 흔들리는 상자를 만들어 볼건데요. 이건 제가 존경하는 개발자이기도 한 인터랙티브 디벨로퍼 김종민님의 유튜브 채널에 올라온 튜토리얼 중 하나인데요. 예전부터 이런 창의적인 코딩, 예술적인 코딩을 하고싶은 욕심이 많았었는데 이번 기회에 김종민님을 따라서 구현해보려고 합니다. 위 영상을 보며 나름 제 방식대로 Swift를 사용해서 구현해보았습니다. 바로 시작할게요~ View 먼저 상자와 빨간 점을 UIView로 세팅해줍니다. (저는 상자 가운데에 제 이름을 넣어서 보여줄 거기 때문에 label도 넣었습니다.) let square:UIView = { let view:UIView = UIView() view.backgroundColor = .systemCyan .. 2021. 11. 23.

[iOS/UI] 이미지 줌으로 확대/축소하기(feat. 스크롤뷰) 안녕하세요 Foma 💻 입니다! 오늘 알아볼 것은 이미지를 확대하는 방법입니다. 바로 시작할게요~ Storyboard 레이아웃은 아래와 같이 스크롤뷰에 이미지뷰가 포함되게 해주세요. ViewController 먼저 이미지뷰와 스크롤뷰를 연결해주세요. @IBOutlet weak var imageView: UIImageView! @IBOutlet weak var scrollView: UIScrollView! 초기 세팅은 아래와 같이 해주세요. 1. 이미지뷰의 이미지를 원하는 것으로 세팅해줍니다. 2. 스크롤뷰의 딜리게이트를 현재 뷰컨트롤러로 설정해주세요. (아직 오류가 날거에요.) 3. 스크롤뷰의 처음 줌스케일을 정해줍니다. (따로 설정하지 않으면 1.0입니다.) 4. 스크롤뷰의 최소 줌스케일을 정해줍니다... 2021. 11. 3.

[iOS] UIKit에서 SwiftUI Preview 사용해보기 안녕하세요 Foma👟 입니다! 얼마 전에 유튜브에서 만화경 iOS 개발기를 보다가 (https://www.youtube.com/watch?v=W_1FoBtaV7A) UI를 개발하는데 스토리보드와 코드로 구현하는 장단점을 모두 이용할 수 있는게 UIKit에서 Preview를 사용하는 것이라고 하더라구요. Preview를 사용하면 코드로 화면을 구현하더라도 직관적으로 화면을 볼 수 있고 또한 스토리보드로 개발할 때 생기는 충돌 문제 등을 없애줄 수 있기 때문이죠! 그래서 오늘은 UIKit에서 Preview를 어떻게 적용하는지에 대해 알아보겠습니다~ UIViewController + Extension 아래와 같이 프리뷰 익스텐션을 만들어줘서 어떤 뷰컨트롤러에서든 쓸 수 있게 만들어줍니다. import Swif.. 2021. 7. 28.

[iOS] UI Test 간단하게 사용해보기 안녕하세요 Foma👟 입니다! 저번 포스팅엔 Unit Test에 대해서 다뤘는데요 오늘은 UI를 테스트 할 수 있는 UI Test에 대해서 정리를 해보려고 합니다 바로 시작할게요~ UITest Bundle 만들기 Project - General 탭으로 이동하셔서 왼쪽 하단 부분에 +버튼을 눌러주세요. 그리곤 ui를 검색하고 UI Testing Bundle을 만들어주세요. Storyboard 아래와 같이 회원가입 하는 뷰컨트롤러를 구성할건데요. 이메일 텍스트필드,비밀번호 텍스트필드,비밀번호 확인 텍스트필드,회원가입 버튼으로 구성해주었습니다. SignupViewController IBOutlet을 모두 연결시켜주고 signupButton을 눌렀을 때 비밀번호와 확인 비밀번호가 다르다면 경고창을 띄우도록 하였.. 2021. 7. 20.

[iOS/UI] 컬렉션뷰셀 자동으로 크기 조정하고 왼쪽 정렬하기 (CollectionViewCell Automaticsize & LeftAlign) 안녕하세요 Foma 👟 입니다. 오늘은 셀을 왼쪽으로 정렬시키고 셀 안에 있는 텍스트에 따라서 자동으로 크기가 조정되는 것을 알아보도록 할게요! (일반적으로 컬렉션뷰셀을 만들면 아래와 같이 될거에요!) 오늘은 아래와 같이 만들어 보겠습니다. 바로 시작할게요~ StoryBoard 스토리보드는 아래와 같이 설정해주세요. CollectionViewCell 컬렉션뷰셀에 레이블을 연결해줍니다. class CollectionViewCell: UICollectionViewCell { @IBOutlet weak var label: UILabel! } ViewController 뷰컨트롤러에 컬렉션뷰를 연결해줍니다. @IBOutlet weak var collection: UICollectionView! 컬렉션뷰 딜리게이트.. 2021. 6. 29.

이전 1 2 3 4 5 다음

728x90

티스토리툴바