원피스 현상금 랭킹앱 만들기(5) - 디테일뷰 모달로 띄우기

 

이제 새로운 페이지를 만들어보자 

DetailViewController로 새롭게 생성

 

메인으로 들어가서  새롭게 뷰컨트롤러를 생성한다. 

 

이제 스토리보드에서 새로 만든 뷰컨트롤러를 우리가 만든 DetailViewController로 연결을 시켜주자

왼쪽 빨간색으로 표시한  버튼을 누르고 우측 빨간색 내용처럼 class이름을 DetailViewController로 수정한다. 

 

어시스턴트를 켠다.

 

close 버튼을 넣기 위해 UIbutton삽입

 

 

UIbutton을 누르고 우측에서  image부분을 누르면 내가 폴더에 넣어둔 이미지들을 볼수 있습니다.

그리고 바로 오토레이아웃 적용

UIbutton을 View로 드래그 해서  상단과 우측을 선택

Top 을 20 Trailling을 16으로 설정하고 가로 세로를 각각 50으로 설정한다. 

저는 여기서 문제가 한번 발생했습니다. 원래 강의에서는 가로세로를 수정할때 저렇게 왜곡이 돼야하는데 제껀 수치입력은 되는데 변하지가 않는 문제가 발생했습니다.

아래처럼 바뀌면서 순차적으로 가로세로를 적용해서 작아져야하는데 제꺼는 크기가 변화가 없었습니다.

 

 

 

구글링을 하고 찾은 해결방법

1. Asset - Image Set - Render As - Original Image로 변경해준다.

2. 버튼의 Inspector Area에 가서 Type은 Custom으로 하고 Style은 Default로 변경한다. 

 

그러면 변경가능해진다

 

 

 

UIbutton 코딩하기

 

버튼을 Assistant로 드래그해주면 새로운 창이 생긴다.

 

Connection은 이게 Action의 역할을 하는지 Outlet의 역할을 하는지 선택하는 부분이다.

여기서는 누르면 닫는 역할을 만들것이기 때문에 Action을 선택, 이름은 close로 설정 

 

자동으로 아래처럼 메서드가 생성된다. 

 

이 버튼을 누르면 사라지게 만들기 위해  dismiss를 사용한다. completion은 이 동작을 수행하고 나서 무엇을 할지 인데, 뒤에 올 동작이 없기 때문에 nil로 입력한다.

 

연결을 확인한다. 

아래처럼 동그라미에 손을 가져가면 UIButton이 같이 색이 파랗게 변한다.

혹은 Button을 누르고 우측링크창을 보면 알수있다.

이제 두 뷰컨트롤러를 이어야 한다.

왼쪽에서 오른쪽으로 드래그를 해준다.

 

우리가 오늘 사용할 것은 Present Modally 다. -> 화면전환시, 밑에서 위로 올라가는 동작

 

그러면 두 뷰컨트롤러 사이에 이런 선이 나타난다.

이런 세그웨이는 여러개를 설정할 수가 있는데 ID를 지정하면 특정 세그웨이를 지정할 수 가 있다.

두 뷰컨트롤러를 잇는 선을 누른후 우측 상단에서 Identifier에 입력을 하자. 

여긴 DetailView이기 때문에 showDetail이라는 ID를 넣었다.

이제 코드를 짜야한다.

다시 BountyViewController로 돌아와서 UITableViewDelegate를 수정하자.

셀을 클릭했을 때, 불러오는 곳이 이 부분 이었다.

 

이제 여기서 셀을 클릭했을 때, 세그웨이를 사용하도록 코드를 짜준다.

PerformSegue 선택

구분자 ID 는 아까 입력한 showDetail을 입력하고 

Sender는 세그웨이를 실행하는데 어떤 오브젝트를 함께 껴서 보낼 수가 있다. 하지만 오늘은 사용하지 않을 것이기 때문에 nil

이제 빌드를 하면 셀을 눌렀을 때, 번호가 나오는 것을 볼 수 있고,

클릭을 했을 때, Segue가 실행되는 것을 볼 수 있다.

 

 

참고로 셀을 클릭했을 때, 색이 바뀌는 것은 Main.storyboard에서 cell을 클릭하고 우측의 Selection에서 선택을 바꿀 수 있다.

색을 선택해도되고 None을 눌러서 클릭시 색이 바뀌지 않도록 할 수도 있다.