Swift 프로젝트 FestaGram 03/ 메인(피드)화면 01

이번엔 UI들을 넣어서 일단은 그럴듯하게 보일 수 있도록 코드와 스토리보드를 작업할겁니다.

카메라와 반대편 메뉴로 보이는 UI는 둘다 UIButton입니다 저는 navigationBar를 Hidden처리해서 직접 버튼을 넣었어요!

일단 스토리 보드에 이 UI들을 넣기 전에 저 전체를 감쌀 UIView를 넣고 그 안에 저 UI들을 넣어주세요

UIcollectionView안에 이 UICollectionCell을 넣어주세요

ㅅ

UICollectionView에 UIImageView와 UILabel을 넣어주세요

카메라는 UIbutton으로 해주세요!

UIcollectionView 왼쪽에 남은 공간에도 UIImageView, UILabel을 넣어주시면 상단의 팔로우/카메라/사용자를 넣었습니다

반대편의 옵션버튼은 코드로 구현될 거라서 넣지 않았어요 그 외의 사진에서 보이는 설명에 없는 UI는 무시하셔도 됩니다.

팔로우용 UICollectionView 바로 밑에 UITableView를 넣어주세요

그 다음 UIActivityIndicator도 가운데 배치하시면 됩니다.

그리고 실행시 UIActivityIndicator를 보이게 하려면 왼쪽의 항목을 나타내는 메뉴에서 테이블뷰보다 아래에 위치시켜야 가려지지 않고 잘 보인답니다.

UITableViewCell은 조금 색다른 방법으로 편집하기 쉽게 분리해서 작업할 것이라 넣지 않았습니다.

~~UI설치하는데만도 이렇게 스크롤을 잡아먹으니 이 화면만 포스팅 10개넘개할듯;;ㅜㅠㅠㅠㅠㅠ~~

그리고 @IBOutlet연결을 해줘야 하는데 카메라나 UIcollectionview 사용자용 UIImageView/UILabel 품고 있는 UIView도 전부 다 연결해주세요.

해당 파일에 오른쪽들에 써있는 delegate/datasouce를 상속해주세요

저는 코드가 많아 extension으로 해당 클래스를 확장시켜 상속해 주었습니다. class에 바로 쓰셔도 괜찮아요!

ViewDidLoad()에 UITableview/UICollectionView delegate, dataSource설정을 꼭해주세요!

이렇게 프로토콜 필수 함수들을 설정해주셔야 빨간불을 피할 수 있읍니다.

이제 UITableCell을 만들건데요 우리가 swift파일을 만들듯 아무 파일이나 선택한 상황에서 마우스 오른쪽 버튼이나 터치패드 두손가락 터치를 하면

이런 메뉴가 나오고 NewFile을 선택해주세요

다양한 항목중 View를 골라주세요 그럼 파일 이름 짓는 항목이 나오는데

저는 FeedTableViewCell이라 지어줬습니다.

다음을 누르면

UIView하나가 띄워져 있는 파일이 생성됩니다.

그걸 지워버리고 UItableViewCell을 하나 화면에 배치해주세요

그 다음 이번엔 Swift파일을 만들어서 UITableCell을 상속하는 클래스를 하나 만들어주세요

이제 원래 팔로우/피드화면을 만들었던 class 파일로 돌아와서

viewdidload()에 이 메소드를 넣어주세요

nibName은 ""를 감싸서 아까만든 xib파일 이름을 forcell..에는 UITablecell의 아까 지어준 identifier를 입력하셔야 합니다

그럼 tableview에 cell이 들어가게 되었습니다.

그리고 xib파일로 돌아와 UI를 배치해줄건데...cell이 엄청 작을텐데 가장자리에 커서를 들이대면 크게 늘릴 수 있습니다.

아니면 아래 사진처럼 메뉴에 들어가서 width height로 설정할 수 있습니다.

자아 이렇게 하나하나연결을....

이렇게 일단 스토리보드와 클래스간의 UI배치/연결은 무사히 되었으니 다음에는 UI기능부분 코드를 다루겠습니다.

백원보단 오백원