iOS) 스토리보드 없이 인스타그램 레이아웃 그리기 & ActionSheet

피드화면 만들기

우선 스위프트 패키지 매니저에서 스냅킷을 추가하였습니다.

 

 

스토리보드를 삭제하고 

main을 검색하여 plist의 스토리보드 정보를 삭제합니다.

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?


    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
      
        guard let windowScene = (scene as? UIWindowScene) else { return }
        
        window = UIWindow(windowScene: windowScene)
        window?.backgroundColor = .systemBackground
        window?.rootViewController = ViewController()
        window?.makeKeyAndVisible()
    }

    이제 인스타그램의 탭바컨트롤러를 구현하기 위해서 

파일을 새로 만들어줍니다.

앱이 시작되었을 때 루트 뷰 컨트롤러를 탭바컨트롤러로 변경해줍니다.

이제 탭바컨트롤러로 돌아가서 탭바들을 추가합니다.

각 탭에 들어갈 뷰 컨트롤러를 임시로 기본 UIViewController를 추가해줍니다.

UITabbarController가 기본적으로 가지고 있는 controllers변수에 필요한 뷰 컨트롤러 두개를 넣어줍니다.

마지막으로 각 뷰 컨트롤러의 탭바 아이템을 설정합니다.

탭바의 tint Color를 설정하기 위해 SceneDelegate에서 추가해줍니다

앱을 실행시키면 검은 아이템 탭바가 생긴 것을 확인할 수 있습니다.

탭바가 완성되었으니 내부 피드 뷰 컨트롤러를 만들어보겠습니다.

피드 뷰 컨트롤러는 UINavigationController에 인베디드 되어있기에 네비게이션 바가 활용되고 있습니다.

탭바에 임시로 추가한 뷰 컨트롤러를 네비게이션 컨트롤러에 인베디드 하여 피드 뷰 컨트롤러를 rootViewController로 초기화 해줍니다. 

이제 네비게이션 바의 타이틀과 버튼을 추가합니다.

이제 리스트화면을 구현하겠습니다. 

리스트는 셀 높이가 글의 길이에 따라 달라질 수 있게 됩니다.

셀의 높이가 가변.

UITableView의 스타일을 구분선을 숨기는 설정으로 CollectionView처럼 사용하며 Dynamic Height Cell에 대한 고민을 덜 할 수 있음.

 

우선 FeedViewController에 테이블 뷰를 선언합니다.

이제 테이블 뷰의 커스텀 셀을 만들겠습니다.

커스텀 셀을 위한 파일을 새롭게 만들어줍니다.

그리고 셀을 테이블뷰에 register합니다.

데이터소스도 추가합니다.

아직은 화면을 구분할 수 없어서 시뮬레이터에 티가 안 나지만

해당 버튼을 누르면 레이아웃 구조를 잘 보실 수 있습니다.

이제 테이블 뷰의 설정이 끝났으니 테이블 뷰의 레이아웃을 설정합니다

우선 셀의 필요한 프로퍼티를 정의합니다.

이제 cellForRowAt에서 레이아웃을 설정하는 setup메소드를 추가하여줍니다.

이제 앱을 실행시키면 아래와 같이 어느정도 모습을 갖춘 것을 볼 수 있습니다.

헬퍼 메소드를 이용해서 버튼의 사이즈를 조절해보겠습니다.

아래와 같이 UIButton 익스텐션을 만들어서 메소드를 추가해주고 각각 이미지를 설정하는 메소드를 해당메소드로 변경해줍니다.

이제 프로필 뷰 컨트롤러를 구현하겠습니다.

프로필화면 만들기

프로필 화면에 들어가는 뷰 컨트롤러를 만들어주고

임시로 만든 탭바에 들어가는 뷰 컨트롤러를 수정해줍니다.

이제 프로필 뷰 컨트롤러에서 네비게이션 아이템을 설정합니다.

테스트해보면 네비게이션 바가 나오는 것을 확인할 수 있습니다.

프로필 화면에 필요한 컴포넌트들을 변수로 만들어주겠습니다.

 

이제 컴포넌트들의 레이아웃을 설정합니다.

테스트하면 아래와 같이 나옵니다.

이제 팔로워 팔로잉 게시물 수를 나타내는 데이터 뷰를 만들겁니다.

하나의 서브 커스텀클래스 이름을 데이터 뷰로 만들겠습니다.

이제 프로필 뷰 컨트롤러에서 사용하도록 설정하겠습니다.

데이터뷰를 스택뷰를 사용해서 설정.

테스트해보면 데이터 뷰들이 잘 보이는 것을 확인할 수 있습니다.

이제 하단의 리스트를 구현합니다.

 

데이터 소스를 만들어줍니다.

 

컬렉션뷰의 레이아웃을 설정합니다. 

앞서 설정하였던 컴포넌트들과 나란히 추가합니다.

 

컬렉션뷰의 사이즈를 설정합니다.

다음은 컬렉션뷰 셀이 간격을 설정

 

딜리게이트 또한 셀프로 추가해주고 마무리합니다. 

커스텀셀을 위한 파일을 만들어줍니다.

이제 만든셀을 뷰 컨트롤러의 컬렉션뷰에 register시켜주고

변경해줍니다.

다음은 바버튼 아이템을 눌렀을때 올라올 액션시트를 만들어보겠습니다.

UIAlertController를 사용하여 구현할 것이며

프로필 뷰컨트롤러에서 nil이었던 Right BarButton의 액션을 추가해줍니다.

이제 액션시트가 나오는 것을 볼 수 있습니다.