iOS - memo 앱 만들기 #6 메모 보기 화면 1

memo 앱 만들기  #6 메모 보기 화면 1 

 

앱 화면 이동시 오른쪽에서 화면이 오는건 push, 왼쪽에서 화면이 오는건 pop 이라고 한다.

 

NavigationController는 화면 전환을 처리해주는 객체

 

 

 

메모보기 화면에서 한개의 cell을 누르면 메모 보기화면을 push 해보자

 

또한, 보기화면 아래쪽에는 툴바를 추가하고 편집메뉴와 공유메뉴를 추가한다.

 

  

mainStroyBoard에서 ViewController를 하나 추가하고

 

기존의 cell을 선택후 ctrl + drag & drop 한다.

 

 

그리고 Show를 선택한다.

 

 

그러면 밑에 화면처럼 이전으로 돌아가기 버튼과 두개의 viewController가 segue로 연결되는 것을 확인할 수 있다.

 

지금처럼 cell을 선택했을때 새로운 화면이 push된다면 보통 cell 오른쪽에 indicator를 표시한다.

 

 

cell을 선택후 attribute indicator 에서 Accessory를 Disclsure Indicator로 바꾼다.

그러면 cell 오른쪽에 > 문자가 표시된다.

 

이제 목록화면에서 하나의 cell을 클릭하면 비어있는 새로운 화면이 출력된다. 

 

 

이제 ViewController 를 추가한다. 

 

Cocoa touch로 클래스를 만들고 scene과 controller를 연결해준다.

 

이전 화면에서는 tableViewController를 사용했는데 이렇게하면 tableView를 자동으로 배치해주고 dataSource와 delegate를 자동으로

 

연결해준다.

 

화면 전체가 tableView이면 문제가 없는데 다른 view를 추가할 수 없다는 단점이 있다.

 

이번 화면에서 상단에는 tableView를, 하단에는 툴바를 추가할 것이기 때문에 tableViewController를 사용할 수가 없다.

 

그렇기 때문에 이전화면에서 tableViewController가 자동으로 추가해준 기능을 직접 우리가 구현해야 한다.

 

우선 navigation bar에 title을 추가한다. 첫번째 화면에 large title을 적용하고 나머지는 적용을 하지 않겠다

 

 

 

그리고 하단에 툴바 추가

 

주의해야 할건 toolbar를 추가할때 home Indicator 영역이 동일한 색으로 채워져야 된다

 

밑에 화면처럼 파란색 점선이 생기면 맞춰서 생성을 해야한다.

 

 

 

 

나머지 부분에는 메모를 표시할건데 메모가 길면 scroll을 표시해줘야 한다.

 

구현하는 방법은 두가지가 있는데 

 

textView를 추가한 다음에 편집할수 없도록 설정할 수 있다.

 

그리고 tableView를 활용해서 표시하는 것도 가능하다.

 

여기에서는 tableView를 활용해서 구현하겠다.

 

 

밑의 화면에서 노란색으로 표시되는 아이콘은 ViewController인데 이런거는 새로운 화면을 추가할때 사용한다.

 

 

이번에는 첫번째의 tableView를 추가한다

그리고 나머지 영역 전체를 채우도록 수정

 

보통은 Navigation bar에 맞춰 채워야 한다고 생각하는데 그러면 Navigation bar가 자연스럽게 animation되지 않기 때문에

 

끝까지 올려서 밑에 화면처럼 맞춰 줘야 한다. 네비게이션 바 높이만큼 여백이 자동으로 추가되기 때문에 저렇게 해야 한다.

 

 

그리고 제약을 추가 하자 

 

밑에 이렇게 제약을 추가하면 

 

 

밑의 화면처럼 위아래로 빨간색 선이 생기는데 이는 toolbar에 제약을 추가하지 않아서 제약 오류가 발생하는 것!

 

그럼 이제 toolbar를 선택해서 제약을 추가하자

 

이번엔 top 을 빼고 추가하자 toolbar는 높이를 설정하는 부분이 없기때문에 height 제약을 추가할 필요 없고

 

tableView에서 bottom 제약을 추가했기 때문에 top 제약을 추가할 필요가 없다.

 

 

그럼 이제 제약 에러가 다 없어지고 파란색으로 표현된다.

 

그럼 아무 에러가 없다는 뜻