android Insta app clone coding 5편 - Multi module compose navigation (멀티모듈에서 컴포트 네비게이션으로 화면전환)

멀티모듈에서 화면 전환 시 문제가 발생

 

문제 :

로그인 모듈에 있는 로그인스크린에서 로그인 버튼 클릭 시  앱모듈에 있는 Bottom Navigation에 피드로 진입해야하는데  어떻게 연결 해야하는지 몰랐다.

 

해결하기 위한 노력 :

 

1. 당연히 구글링 - 이때 찾아본건 ( compose navigation, nested graph , bottom navigation )

2. 그리고 적용 근데 안돼서 다시 검색 

3. 곰곰히 생각해보기 ㅋㅋㅋ

 

해결 방안 :

base module은 다른 모듈에서 모두 사용하니 base module 에 전체 화면에 대한 NavItem을 넣어두고

앱 모듈에  전체 Nav그래프를 만들때 그 안에 로그인, 회원가입, 페북로그인, 홈을 넣어둔다.

 

자세히 말하면

 

로그인 모듈에는

1. 로그인 화면

2. 가입 화면

3. 페이스북 로그인 화면 

3개의 화면이 있습니다.

 

---

 app 모듈에는

bottom navigation ( 바텀 네비게이션 ) 을 사용한 Home 화면이 있다.

 

 

HomeScreen()

 

---

Bottom navigation 에는

1 . 피드 모듈에 있는 피드 화면

2.  프로필 모듈에 있는 프로필 화면 

 

 

---

로그인 화면에서

1. 로그인 버튼 클릭 시 ( 아이디 비번 맞다 치면 ) -> 홈화면으로 이동  ->   피드 화면(바로 나오는 화면 ) or 프로필 화면 선택

2. 가입 버튼 누르면 가입 화면으로 이동

3. 페이스북 로그인 버튼 누르면 페이스북 로그인 화면으로 이동 

 

3개의 화면 이동이 있다.

 

고려해야하는 상황은 

1. 로그인 여부 O 로그인 화면을 건너뛰고 받아온 정보를 바로 홈화면에 띄워준다.

2. 로그인 여부 X or session fail 하면 회원가입을 하거나 or  아이디를 입력하고 로그인 버튼 클릭 후에 홈화면 진입해야함.

 

1번이든 2번이든 

로그인을 그리는 LoginScreen 에서 Login 버튼을 클릭 하면 홈 화면으로 넘어가야 하는데

멀티 모듈로 만들었기 때문에 

LoginScreen 에서 Bottom Nav (Feed 와 Profile) 로 navigate 할 수 없었습니다

왜냐 처음에 바텀그래프와 로그인그래프를 따로 만들었어서.

당연히 Bottom Nav 는 최상위 모듈 app 에 있었고, Login Screen 은 Login module 에 있었기 때문에 

로그인에서는 앱 모듈 그래프로 갈수도 쓸수도 없었습니다.

 

또 navcontroller를 홈그래프와 로그인그래프의 파라미터로 넘겨서

그걸 가지고 다시 그래프 안에 있는  화면들에 넘기면

하나의 그래프를 사용하려면 겹치지 않는 별도의 하나에 컨트롤러를 사용해야 해서 

오류가 생깁니다.

 

그럼 어떻게 해결했냐!

 

 

---

먼저  Base Module 에 

사용할 화면 items 을 만들어줍니다.

 

 

---

그리고 

app 모듈에 있는 전체 그래프에 

로그인, 회원가입, 페북 로그인, 홈 화면을 넣어주고

NavGraph

 

---

 

홈화면에 들어갈 그래프는 따로 만들어서

HomeGraph

---

 

홈화면에서

navController 를 만들어 SettingBottomNavigation( 바텀 네비게이션을 만드는 UI 입니다.) 에 매개변수로 넣어주면

---

바텀네비게이션에서는 세팅을 해주게 됩니다. 

여기서 navcontroller 는 NavGraph 에서 사용하는 navController랑 다릅니다. 

---

메인 엑티비티에서 

만약에 session 이 true 로 확인이 된다치면

홈으로 가서 홈 controller 를 만들고 그걸 HomeNav가 받아서 navHostcontroller로 사용하고

BottomNavigation에 연결된 feeds 와 profile을 사용할 수 있게 했습니다. 

 

---

 

만약에 session false 면 로그인으로 가서 

MainActivity 에서 만든 navController 가 들어오고 

로그인 버튼을 누르면  navigate(NavItems.Home.route) 로 가게 됩니다.

그럼 홈화면으로 가고 거기서 다시 navController 를 만들어서 사용합니다. 

---

이렇게 만드는게 가장 BEST 인지는 저도 잘 모르겠습니다...ㅎㅎ

 

혹시 더 간단하거나, 제가 틀린 부분이 있다거나, 이건 알려주고 싶다 하신게

있으시다면 기쁜 마음으로 경청하겠습니다 꼭 알려주시고 가르쳐주시면 감사하겠습니다ㅎㅎ

 

또한 설명이 부족하다거나 궁금하신게 있으시다면 댓글 달아주세요!

 

이상