Toy Project 81

10. Animation

Animation 시간에 따라, View의 값 또는 상태가 바뀌는 것 Animation 3요소 : 시작, 끝, 시간 우리는 UIView에서 제공해주는 API를 사용할 것이다. 이것은 두 가지로 구분되며 애니메이션이 진행되는 시간과 애니메이션 클로져로 구성 : 애니메이팅 시킬 component를 넣어주면 된다. DetailViewController에서 애니메이션 작업을 시작해보자 우리는 ImageView를 한바퀴 돌리고, Label을 오른쪽에서 왼쪽으로 가게하는 애니메이션을 구현할 것이다. Label에 애니메이션 넣기 우선 label에 설정되어 있는 constraint를 살펴보면 NameLabel의 constraint를 클릭하여 코드에 연결시킨다. bountyLabel 또한 연결시킨다. 그렇다면 애니메이션..

9. CollectionView: UICollectionViewDelegateFlowLayout

CollectionViewDelegateFlowLayout 해당 데이터가 이렇게 나오는 이유는 CollectionView 하나가 열에 2개를 넣기 힘들다고 판단을 한 것이다. But, 이 사이즈를 우리가 custom하게 계산해서 넣어줄 수 있다. 우리가 지금 생각 할 것은 각 Cell 간의 간격이다. 행에서 보여지는 데이터 2개의 horizontal space는 10, 열의 2개는 vertical space 10. 그렇게 되면 1행의 열 길이에서 10을 빼고 나누기 2를 하게 되면 하나의 cell 크기가 나올 것이다. 그리고 그 넓이에 따라서 imageView는 aspect ratio가 7:10 으로 나타나고, 밑의 label 2개가 들어간 곳은 고정적으로 65 정도 높이를 줄 예정이다. 이 정보를 코드..

8. Collection View: 여러개의 아이템을 보여주는 View

CollectionView: 여러개의 아이템을 보여주는 View List를 구현하기 위해 TableView를 사용했었다. TableView의 경우 표현의 한계가 존재한다. 하나의 Column만 존재하기에 여러개의 아이템을 넣고 싶으면 사용할 수 없다. 위의 어플에서는 한 행안에 다양한 데이터들이 존재한다. CollectionView의 특징 Column을 한개 이상 가질 수 있다. 각 데이터의 나열을 수직 혹은 수평으로 지정할 수 있다. CollectionView의 데이터는 CollectionViewCell 을 통해 표현이 되며 다양한 스타일로 표현될 수 있다. UITableView에 비해 데이터의 나열이 자유롭기 때문에, 많은 데이터를 보여주는 경우 CollectionView를 커스터마이징하며 사용한다...

7. MVVM 실습: 코드 구현

목차 1. MVVM 코드구현 계획 2. MVVM 패턴 적용 전 3. MVVM 패턴 적용 후 4. 내가 이해하고 느낀 MVVM 패턴 MVVM 코드구현 Refactoring(리펙터링): 우리가 기술부채를 줄이고, 재사용 가능하며 유지보수와 관리가 잘 되도록 코드를 수정하는 과정 소프트웨어 공학에서 '결과의 변경 없이 코드의 구조를 재조정함'을 뜻한다. 여기서 사용자는 서비스의 이용의 변화는 생기지 않는다. 중복제거 : 똑같은 코드 제거 단일 책임 갖기 : 어떤 데이터, 기능이 여러가지 일을 하면 자신의 역할이 아닌 곳을 건드리거나 유지보수 및 관리가 힘들어진다. 10, 200 rule —> 메소드는 10줄 안에, 클래스는 200줄 안에 (최대한 그렇게 해보자) 그렇다면 우선 이전에 완성했던 코드에서 어떤 문..

6. 데이터 넘기기: ViewController간의 데이터를 넘기는 방법

정확하게는 Segueway 로 연결된 두 ViewController 간의 전환 시, 데이터 넘기는 방법 우선 DetailView 구조를 만들어보자. 이제 데이터를 받게 되었을 때를 셋팅하면 다음과 같다. 그럼 이제는 BountyViewController에서 name과 bounty에 해당하는 데이터를 DetailViewController에 던져주면 된다. 그럼 그것은 변수 name, bounty에 받으면 끝나는 작업이다. 어떻게 던지는가..?? Segueway를 수행하는데는 perform이 사용된다. Segueway를 수행하기 전 준비하는 단계에서 호출되는 함수가 있다: prepare(준비하다) IndexPath는 row와 section으로 보낼 수 있는데 우리는 단일 섹션 이기에 row 로 보내면 몇번째..

5. Present View Controller: 새로운 View Controller 띄우기

우리가 만든 TableView의 Cell을 클릭했을때 상세페이지가 뜨도록 할 것이다. 우리는 DetailViewController을 만들려고 하는데 그럼 코드를 작성해보자! File을 생성해서(커맨드+N) DetailViewController을 생성하자. 그리고 StoryBoard에 DetailViewController에 대응되는 것을 하나 만들자. Object library에서 새로운 ViewController을 가져오서 DetailViewController과 연결시킨다. 이제 object library에서 button가져와서 close_ic 이미지를 넣어보자. 글자빼기 그리고 Auto Layout 바로 적용. 자신에게 끌고와서 넓이높이 만들고, 상단우측과 연결. (상단 우측은 View에 가져다 대야한..

4. Custom Cell

애플에서는 충분히 활용가능하고 디자인 잘 된 Cell을 제공하고 있지만 실제 앱을 만들때는 제공하는 다양하고 자신의 서비스에 맞는 데이터 표현이 각각 다르기에 Cell로 데이터 표현시 어떻게 하면 사용자 정의가 가능한지를 살펴보자. 우리는 이렇게 생긴 Custom Cell을 만들어 보려고 한다. Custom Cell의 경우 ViewController 외부에 또다른 Class로 선언되며, 당연히 이름은 알아서 지정하고, UITableViewCell을 상속받아 사용된다. 이렇게 필요한 것들을 변수로 선언하고 타입이 각각 어떤 UI 기능 인지를 지정해주면 된다. 왜 weak 키워드를 사용했는지? 왜 타입 젤뒤가 !가 되었는지? 대충 조사해보면 weak는 optional로 선언되야 한다고 했는데 !가 되었는지 ..

3. TableView 실습

Assistant를 누르면 ViewController 화면과 코드를 동시에 볼수있다. TableView를 사용하려면 UITableDataSource, UITableViewDelegate를 상속받고 알맞은 protocol을 지켜야한다.(질문에 대한 답을 해야한다.) 구조는 다음과 같다. 여기서 위 tableView는 몇개의 Cell을 보여줄것인지를 결정하는 것이다. UITableViewDataSource에 해당한다. 아래의 tableView는 cell들이 어떻게 표현되는지, 보여지는지를 정의하게 되는 것이다. TableView는 Cell을 통해서 데이터를 출력하게 되는데, 이때 이 Cell들은 재활동되어 화면에 보이는 것만큼의 Cell만 필요하게 된다. 재활용되는 셀을 가져오는 것이 tableView.de..

2. TableView를 위한 Protocol(규약, 약속)

TableView는 왜 쓰는가? 여러 데이터를 리스트형식으로 보여주고 싶을 때 사용한다. 현재 TableView를 ViewController에 추가했는데, 여기서 TableView를 사용하려 하면 TableView는 데이터를 보여주기전에 어떤 질문을 하게된다. TableView의 Cell은 몇개인가? TableView를 어떻게 보여줄까? 어떤 셀을 이용해서 보여줄것인가? TableView를 클릭하면 어떻게 할까? 등 여기서 1,2는 필수로 답을 해줘야한다. 서비스를 이용하는데 있어서 해야할 일 —> Protocol: 규약, 약속 그렇다면 TableView를 이용하기 위한 Protocol에는 어떤것이 있을까? 상속받는 UITableViewDataSource, UITableViewDelegate에서 지정해주..

1. List -> UITableView

우리는 앱을 사용하면서 데이터가 리스트형식으로 보이는 View를 많이 봐왔다. 맞다. 그거 만드는 거 배우려한다. UITableView는 여러 아이템을 리스트 형태로 보여주기 위한 View이다. column이 한 개로 구성된 특징이 있다. (하나의 데이터가 하나의 행을 차지한다는 의미이다.) 데이터들을 여러 행에 걸쳐서 보여줄 수 있다. 각 데이터들은 TableView Cell이라는 녀석을 통해 표현이 된다. TableViewCell은 다양한 스타일로 표현될 수 있다. 이미 시스템에서 제공해 주는 것이 있는가 하면, 개발자가 직접 커스텀마이징을 통해서 만들 수도 있다. TableView는 TableView Cell을 통해서 데이터를 표시하게 되는데 여기서 중요한 것은 TableView은 Cell을 재활용..

6. Styling, Auto Layout

Styling Image and Labels Styling Button Auto Layout : 다양한 해상도의 디바이스 대응하는 방법 App Icon and Display name … Image 아이폰은 3가지 사이즈의 이미지를 받아서 사용할 수 있다. 1x, 2x, 3x 는 해상도를 의미한다. 해당 사진이 어떤 해상도를 갖는지 알려줄 수 있다. @2x 이렇게 사진을 넣게되면 해상도에 맞게 사진이 지정된다. Image view에서 가볍게 GUI로 지정해서 사진을 선택할 수 있다. Assets.xcassets에 넣은 사진이나, 애플에서 제공하는 아이콘들을 사용할 수 있다. 여기서 사진이 꽉 차지 않을 경우 View에서 Content mode를 Aspect Fit이 아닌 Aspect Fill로 하면 사이즈..

5. Swift를 배우기전 알아야할 코딩지식

string는 “ ”안에서 변수를 사용할 수 있다. “가격은 \(variable) 입니다.” —> 변수에 해당하는 값이 적절히 출력된다. arc4random_uniform(10000) : 0~9999 까지의 수를 랜덤하게 반환한다. 단, 해당 반환된 수는 UInt32 type 이기에 연산시 Int로 type cast를 실행하자. var를 이용해서 만드는 변수를 variable라고 한다. let를 이용해서 만드는 변수를 constant라고 한다. var 은 변수를 담고, let은 const와 같이 변하지 않는 문자열, 상수 등을 이용한다. —> 될수 있으면 오류를 방지하지 위해 let을 많이 사용하도록 하자. let을 이용해서 constant를 생성하고, 변경이 필요한 경우에 키워드를 바꿔서 사용하는 것을..