안녕하세요. 이번 글에서는 저번 글에서 만든 Image View(버튼)를 클릭하면 화면전환이 이루어지도록 해보겠습니다.
먼저 다음 화면이 있어야 화면전환이 가능하겠죠? 다음 화면을 간단하게 만들어보겠습니다.
fragment 디렉터리에 FirstQuestionFragment 라는 이름의 Fragment(Blank)를 추가해주겠습니다. 그러면 자동으로 layout 폴더에 fragment_first_question.xml이 생성되는 것을 확인하실 수 있습니다. 혹시 까먹으신 분들은 아래 링크로 가셔서 참고하시면 될 것 같습니다.
la-bontoo.tistory.com/5?category=926571
생성을 하셨으면 layout 폴더의 xml 파일로 가보겠습니다.
기존의 FrameLayout 으로 감싸져 있던 코드를 ConstraintLayout으로 수정을 해주시고 TextView도 수정을 해주겠습니다.
이제 Navigation을 수정해보겠습니다.
만들어놓은 res->navigation 디렉터리의 nav_graph.xml로 가셔서 두 번째 화면을 추가해주겠습니다.
추가를 해주셨으면 이제 action을 만들어야 하는데요 기존에 만들어놓은 mainFragment를 클릭하시면 Constraint를 설정하시는 것처럼 오른쪽에 원이 생기시는 것을 확인하실 수 있습니다. 그것을 드래그하여 추가해준 두 번째 Fragment와 연결을 해주시면 됩니다. 그러면 밑에 그림의 오른쪽 화면처럼 연결된 모습을 확인하실 수 있고 왼쪽 화면에 action이라는 태그의 코드가 추가되신 것을 확인하실 수 있습니다. 저 action의 id를 통해서 다음 화면을 넘어가는 것을 시도해보겠습니다.
fragment 디렉터리의 MainFragment.kt로 가주신 다음 아래의 코드를 onCreateView 함수 밑에 적어주시면 됩니다. 밑에서 코드를 설명하겠습니다.
lateinit 은 늦은 초기화를 뜻합니다. 보통은 선언과 동시에 초기화를 해줘야 하지만 언제 쓸지 모르는 데이터를 먼저 초기화를 하지 않아 성능향상에 도움이 됩니다. 초기화를 해주지 않으면 컴파일 오류가 나기 때문에 이렇게 lateinit 을 붙여준 다음 원하는 곳에서 초기화를 해주었습니다.
navController : NavController 는 저희가 만든 nav_graph.xml 를 호출하기 위해 만든 변수입니다.
그다음 onViewCreated 라는 함수를 선언해주겠습니다. onv까지만 타자를 치면 밑에 자동완성으로 나오시는 것을 확인하실 수 있습니다. 선택하신 후 엔터를 눌러주시면 자동완성이 됩니다. 편하죠?
onViewCreated 함수 안에서 저희가 만든 navigation 변수 navController를 초기화를 해주시면 됩니다.
navController = Navigation.findNavController(view);
여기서 view는 onCreateView 에서 return 된 view라고 생각하시면 됩니다. 제일 위에있는 onCreate 는 Fragment가 처음 생성될 때 호출되는 부분이고 onCreateView 는 onCreate 후에 화면을 구성할 때 호출되는 부분입니다.
그다음 저희가 만든 버튼의 아이디 기억하시나요? 저는 btn_next로 만들었습니다. 버튼의 아이디가 기억이 안 나시면 fragment_main.xml 파일로 가셔서 확인하시면 됩니다.
버튼의 아이디를 찾으셨다면 이제 버튼에 이벤트를 등록해보겠습니다. 저희가 원하는 것은 클릭을 했을 때 다음 화면으로 넘어가는 것이니까 클릭 이벤트를 넣어보겠습니다.
btn_next.setoncl 까지 타자 치면 밑에 자동완성으로 나오는 것을 보실 수 있습니다. 두 번째 { } 괄호로 돼 있는 것을 선택하시면 됩니다. 정말 편하죠? ㅎㅎ
그다음 괄호 안에 아래 코드를 적어주시면 됩니다.
navController.navigate(R.id.action_mainFragment_to_firstQuestionFragment);
R.id.ac 까지 타자 치면 짠하고 나옵니다. ㅎㅎ 편합니다. 정말!!
여기까지 하셨으면 이제 준비는 끝났습니다. 다음 글에서 이제 AVD Manager을 통해 가상장치를 만들어서 직접 테스트를 진행해보겠습니다. 오늘도 부족한 글을 끝까지 읽어주셔서 감사합니다.
'안드로이드 공부 > Food App' 카테고리의 다른 글
코틀린 안드로이드 앱 개발(7) AVD 로 앱 실행해보기 (0) | 2020.11.23 |
---|---|
코틀린 안드로이드 앱 개발(5) Main 화면 디자인 Part 2 (Constraintlayout) (0) | 2020.11.17 |
코틀린 안드로이드 앱 개발(4) Main 화면 디자인 Part 1 (Vector Asset, Constraintlayout) (0) | 2020.11.16 |
코틀린 안드로이드 앱 개발(3) Main 화면 설정 (Fragment, Constraintlayout) (0) | 2020.11.15 |
코틀린 안드로이드 앱 개발(2) Navigation 설정 (0) | 2020.11.14 |