[Kotlin] 코틀린 3강으로 끝내기 - 3편 심리테스트 앱 만들기

코틀린 3강으로 끝내기 마지막 강의인 심리테스트 앱 만들기이다.

처음으로 만드는 앱이라 어려울 수도 있을 것 같다고 생각했는데 실제로 만들어보니 흥미를 느끼고 있는 나를 발견했다!

안드로이드를 배우게 돼서 다행인 것 같다. 풀스택으로 공부하고 있었는데 프론트로 확정하게 되는 걸까...?

역시 코드 결과가 바로 시각화되는게 재밌다!!

 

📌 준비 과정

일단 첫번째로 Empty Activity으로 프로젝트 파일을 생성해준다.

 

배경화면을 지정하기 위해 사진을 drawable에 넣어준다.

 

navigation

탐색 구성요소 시작하기  |  Android 개발자  |  Android Developers

프로젝트에 navigation을 포함하려면 앱의 build.gradle 파일에 다음 종속 항목을 추가한다.

오른쪽 상단의 Sync now을 통해 로딩을 해준다. 

 

res에 New Resource Directory을 하여 navigation을 생성해준다.

navigation 디렉토리에 New Resource File을 하여 nav_graph 파일을 생성해준다.

이로 인해서 탐색 그래프를 한 눈에 보기 가능해졌다!

nav_graph

 

XML을 통해 NavHostFragment를 추가한다.

아까 링크에서 복붙해온다!

 

fragment 패키지 생성하고, fragment blank 생성하기

그럼 res/layout에 xml 파일이 여러 개 생성되고 이제 xml 파일에서 작업을 진행할 것이다.

 

📌 main Fragment

메인 fragment 파일에 android:background를 설정해주면 배경이 적용된다.

 

글을 넣기 위해선 res/values 폴더에 strings.xml을 아래처럼 설정해주면 된다.

이와 같이 사진을 설정하기 위해선 colors.xml에 색상을 추가해주면 된다.

 

TextView를 통해 글자, 글자 크기, 글자 색상, 글자 속성, 글자 위치를 설정해줬다.

ImageView를 통해 이미지 크기와 이미지 위치를 설정해줬다.

wrap_content는 폭과 높이가 글자가 꼭 들어갈 정도로 설정되는 것이다.
match_parent는 자신의 부모의 폭이나 높이를 맞추는 것이다.

 

버튼까지 추가로 이미지 넣어주면 main Fragment 완성~

 

📌 question Fragment

다음으로 question Fragment를 만들어 볼 것이다.

main Fragment와 별 다를 것 없지만 text 중앙 정렬을 배웠다.

android:gravity="center"

 

📌 selection Fragment

❗LinearLayout

View를 수평 또는 수직 방향으로 배치할 수 있는 레이아웃이다.

orientation 속성을 통해 배치 방향을 결정할 수 있다. 

android:orientation = "vertical"  : 하위 뷰들을 수직방향으로 배치
android:orientation = "horizontal" : 하위 뷰들을 수평방향으로 배치

 

TextView 설정하면서 margin도 같이 설정해준다.

여기서 그림이 안 뜨는 오류가 있었는데 아래 코드 대신에 <Fragment라고 되어 있어서 오류가 났었다...

레이아웃에 대한 개념이 부족한 것 같은데 다음 강의로 들으면서 정리해야겠다!

<androidx.constraintlayout.widget.ConstraintLayout

 

text를 원래 strings.xml 파일에 넣어야 하지만 일단 하드코딩으로 넣어줬고 gravity로 가운데 정렬을 했다.

뒤로 가기 버튼을 이미지로 삽입하여 상하좌우 정렬을 함으로써 빨간 줄이 사라지는 것을 볼 수 있었다!

selection Fragment도 완성 ~

 

📌 result Fragment

위와 동일한 방식으로 text와 image를 넣어준다. 

 

⚒️ nav_graph

Fragment를 다 꺼내와서 mainFragment 홈 설정을 해주고, 화살표로 다음 페이지가 뭔지 설정해준다.

Fragment 코드를 보면 action 태그가 생긴 것을 볼 수 있다. 

main은 qeustion, question은 selection, selection은 result

⚒️ MainActivity

lateinit 지금 정의하는 것이 아니라 나중에 정의

navController 네비게이션 컨트롤러