따라하며 공부하기 2.4 - 인스타그램 홈 화면 구성

Udemy 강의 중 '누구나 따라 할 수 있는 ios 클론코딩 - 컴공선배' 강의를 보고 커스텀과 정보전달을 했다

 

지난 시간에 이어 아래의 3개 화면이 추가되었다

 

인스타그램에 있는 피드를 표현하기 위해 셀을 사용했다

 

위와 같이 그룹을 생성한뒤 그 아래 2개의 파일이 생성된다

 

화면에 있는 컨트롤 바를 없애기 위해 위 사진처럼 2개 모두 체크 해제했다

 

위 사진은 셀을 적용했을때의 모습이고 선택하면 오른쪽과 같이 변한다

 

홈화면 구성이 완료된 모습이다

 

 

공부내용 정리

TableViewCell을 만들 때 XIB file을 체크하고 만들어야 위와 같이 파일이 생성된다
Indicators아래 2가지를 체크 해제하니 스크롤 시 보이면 스크롤바가 삭제되었다

인스타그램에 보이는 게시글 1개를 위해 셀 1개를 할당했다
사진은 1:1의 비율로 하고 스토리에 보이는 기본 인물 사진은 CollectionViewCell을 사용하여 만들었다
CollectionViewCell을 사용할때 초기상태에서 바로 생성하지 말고 view를 기본배경으로 한 다음 그 위에 꾸미기를 실시한다

HomeViewController는 Feed, Story TableViewcell의 존재를 모르기 때문에 Nib를 사용해서 존재를 알려줘야 한다

CollectionViewCell은 반드시 높이와 너비 설정해줘야 한다

클릭시 색이 변하게 하려면 State Config를 Selected로 변경 후 클릭 시 이미지를 다시 설정해줘야 한다

IBOutlet으로 가져올때 클릭 시 하트의 색이 빨간 하트로 변하게 하려면 Action으로 가져와야 한다
마찬가지로 북마크 표시 역시 Action으로 가져와야 클릭 시 검은색 북마크로 변한다

 

 

 

 

참고자료

https://www.udemy.com/course/comgongbro_ios_clonecoding/