글그리 블로그

지금까지는 화면을 만들 때 view의 내용을 코드에 직접 기입해서 만들었다. 예를 들어 이름을 표현하기 위해서 UILabel을 이렇게 만들었다. let nameLabel = UILabel(frame: CGRect(x: 0, y:0, width: 200, height: 50)) nameLabel.text = "사나" // asset name 위처럼 만드는 것은 빠르게 화면을 구성할 때는 좋지만 나중에 화면의 내용이 바뀌거나 추가될 때 코드를 직접 수정해야 한다. 그래서 "사나" 와 같은 데이터는 따로 저장을 해 두고 데이터로 부터 화면을 구성할 수 있도록 구축하면 좀 더 유연하게 유지보수 할 수 있다. 그 유명한 MVC(Model View Controller) 패턴이다. MVC Pattern 디자인 패턴은..

프로필 화면이 너무 허전하니까 뭔가 좀 더 꾸미고 싶은데, 샘플로 트와이스 사나님의 프로필을 사용했기 때문에 나머지 내용도 참고했다. 먼저 지난 포스팅에 프로필 사진이 네모로 그려지는 상태로 끝냈기 때문에 이걸 어떻게 동그랗게 자르는지 알아보자. CALayer UIView는 layer라는 인스턴스를 가지고 있어서 이것을 통해 화면에 내용을 그린다. view는 화면에 자리하기 위한 논리적인 사각형 범위와 속성들을 가지고, layer는 이 범위를 실제로 화면에 그리는 역할을 수행하는 것으로 분리되어 있다. 그리고 외곽선, 그림자 등 몇가지 렌더링 효과를 쉽게 설정할 수 있게 property를 제공한다. cornerRadius 이 옵션은 모서리의 곡률을 지정한다. 적용해 보기 위해서 화면 구성을 좀 바꾸자. ..

SwiftUI가 나왔지만 아직 많은 개발자들이 UIKit을 사용해서 개발하고 있기 때문에 UIKit도 공부할 필요가 있다. 프로필을 보여주는 메인 ViewController를 만들어 보자. XCode12부터 SwiftUI를 사용해서 개발할 수 있게 되었기 때문에 프로젝트를 만들 때 두가지를 선택할 수 있다. 여기에서는 Storyboard를 활용해서 만들 것이기 때문에 storyboard를 선택하고 넘어간다. 언어는 swift를 선택한다. 프로젝트를 만들면 AppDelegate, SceneDelegate, main storyboard가 자동으로 생성되어 있는 것을 볼 수 있다. AppDelegate : 애플리케이션의 생명 주기에 따라 발생하는 이벤트를 처리한다. SceneDelegate : IOS13부터 ..

ViewController구현하고자 하는 cell의 개념은 이렇다.main view에서 card를 하나 선택한다.해당 카드가 화면 전체로 확장되는 듯한 애니메이션이 재생되며, 그 동안 카드를 구성하는 내부 view들의 constraints도 동적으로 적용된다. 즉, snapshot이미지를 사용하는 것이 아니라 실제 그 view가 화면 전체로 확장되는 효과를 주는 것이다.transition이 끝나면 카드를 구성하던 view가 그대로 news view로 전달되어 사용된다.되돌아 오는 것은 반대로 이루어진다.이러한 동작을 위해서 main view와 news view가 사용할 protocol을 정의해야한다. 먼저 메인화면을 구성하는 MainViewController 부터 살펴보자. UICollectionView..

개요Pinterest나 AppStore같은 어플에 사용되는 CardView를 collection view를 사용해서 구현해보자.보통 카드 형태로된 뉴스피드를 보여주는 어플리케이션에서 주로 사용하기 때문에 예제 어플리케이션을 구현할 때도 관련된 이름을 사용한다. Storyboard 구성먼저 어플리케이션을 구성하는 전체적인 Storyboard를 보자. NavigationController를 사용하기 때문에 기본화면으로 MainViewController와 cell을 선택했을 때 진입하게 될 NewsViewController를 추가한다.main view에는 선택할 수 있는 cell들이 보여지도록 만들것이다. 먼저 UICollectionViewController를 상속받는 MainViewController 클래스..

흐름코드를 보기전에 먼저 Navigation Controller가 어떻게 동작하는지 살펴보자.Navigation Controller는 자신의 Root VC가 segue를 통해 다른 view를 보여주려고 하면 미리 정의된 특정 delegate함수를 통해 이 작업을 수행하도록 되어있다. 그리고 view transition(view전환)이 수행될 때 UIViewControllerAnimatedTransitioning이라는 프로토콜에 정의된 동작을 수행하는데 이 프로토콜을 override해서 우리가 원하는 동작을 수행하도록 변경할 수 있다. 2, 3번 동작을 override해서 우리가 원하는 모습으로 바꿀 것이다. 코드(SpreadTransitionDelegate)TransitionDelegateTransiti..

개요튜토리얼에서 배운 것을 바탕으로 간단한 프로그램을 만들어보자.프로그램은 무지개 색깔을 가진 cell들로 구성되며 해당 cell을 터치하면 그 색깔을 배경색으로 가지는 화면으로 전환된다. 이 때 선택한 cell 화면으로 전환되는 것을 자연스럽게 보여주기 위해 해당 cell이 확장되어 화면을 덮는 것처럼 보이는 시각효과를 추가한다. 준비cell을 확장한 view에서 다시 collectionView로 되돌아오는 기능은 이 포스팅의 주된 논점이 아니므로 NavigationController를 사용하여 간단하게 준비한다. 우선 Single View App으로 프로젝트를 생성하고 storyboard를 다음처럼 만든다.NavigationController를 Initial View Controller로 설정한다.C..

ios Application을 만들기위해 xcode에서 제공하는 여러 도구 중에서 UICollectionViewController에 대해 알아보자. UICollectionViewController CollectionViewController를 재사용할 수 있게 하기위해 UICollectionViewController를 제공한다. 이 클래스는 UIViewController, UICollectionViewDataSource, UICollectionViewDelegate를 상속받는 클래스로 CollectionView를 구현하기 위해 필요한 필드와 메소드들이 정의되어있다. UICollectionViewDataSource CollectionView를 구성하기 위해 필요한 데이터들을 정의한다. section의 갯수..