[Kotlin] 간단 앱 개발

 

Joyce님의 3강으로 끝내는 코틀린 강의를 들어보았다. 나중에 앱을 만들다가 궁금한 점이 있으면 영상을 보면 되지만 영상에 내가 원하는 파트를 딱딱 찾기가 쉽지 않으니까 기억을 살려서 중요한 뼈대 정도면 정리해보았다.

 

https://www.youtube.com/watch?v=M1e2tLnzVPo&t=11s

 

이 분의 강의를 참고했다. 강의는 총 3시간이었는데, 나는 왜 24시간은 걸린 것 같을까 ㅎㅎ

 

아무튼 Navigation component 를 이용해서 좀더 직관적으로 앱을 구성할 수 있다.

https://developer.android.com/guide/navigation/navigation-getting-started

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

위 사이트를 이용하면 사용가능하다.

 

 

1. 프로젝트 만들기

안드로이트 프로젝트는 다음과 같이 만들면 된다.

New Project >

일단 기초적인 앱을 만들 거니까 Empty Activity > Next

Name: 내 프로젝트 이름 만 넣어주면 나머지는 알아서 설정된다. Minimum SDK는 바꾸어도 되는듯

 

Finish 누르면 끝! 로딩하는데 꽤 걸리고, 다 로드되면 이렇게 만들어진다.

 

 

java 디렉토리 아래 myapplication222 디렉터리에 이제 소스 파일들을 넣어주면 되고, res 디렉터리에는 다른 리소스 파일들이 들어간다.

 

2. Navigation 이용 환경설정

네비게이션을 사용하기 위해서 build.gradle 파일에 종속항목을 추가한다. (그 navigation 사이트 보면 나와있음)

build.gradle 파일은 Gradle Scripts 폴더 아래에 있다. (Module:~) 이 파일에 dependencies 부분에 넣어주면된다.

 

3. Layout 만들기

이렇게 하고, res > layout 폴더 안에 메인 액티비티는 가만 놔두고, layout 폴더에 여러 xml 파일들을 만들다. (각 페이지별 레이아웃이다) 나는 그냥 열면 Design Mode로 바로 뜨는데 상단에 잘 보면 Code, Split, Design 이렇게 세 가지 중에 고를 수 있다. (노란 동그라미), 유튜브 강의에는 아래쪽에 있어서 아래 쪽만 뒤지다가 찾는데 한참 걸렸다 ^^

 

Design 창에서는 요소들을 드래그해서 배치할 수도 있고, Code 창에서는 코드로 입력해줄 수 있다.

 

 

A) 첫 줄에 constraintlayout을 사용하기 위해서

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

을

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

바꿔버린다. (FrameLayout 지우고 constraint 정도만 쳐도 자동완성 뜸)

 

 

B) 뒤에서 프래그먼트 파일들을 만들어줄 건데, 이 레이아웃과 연결하기 위해서 레이아웃에 코드를 변경해줘야 한다.

 

처음 만들어질 때는 아마

tools:context=".MainFragment">

 

이거 일텐데, 아래와 같이 경로 설정 다시 해주기 (우린 fragment 패키지를 쓸 거니까!)

tools:context=".fragment.MainFragment">

 

 

요소추가

화면에 여러 요소들을 빠르게 추가하기에는 팔레트를 이용하는게 좋다. 디자인 창에 왼쪽에 세로로 Pallette라고 적혀 있는 것을 볼 수 있는데, 여기서 요소들을 갖다가 드래그하면 코드창에도 컴포넌트가 생긴다. 막 움직여보면 코드들이 생기기도 한다.

이런식으로 만들면 되는데, 오른쪽 디자인 창에 파란색 창이 뜨듯이 직접 움직여 줄 수도 있다는 사실..!

지그재그 선은 수평 맞추는데 용이하다. 저렇게 지그재그선이 뜨도록 화면의 네 변에 맞춰주면 수평이 맞게 된다.

 

수평 안맞으면 그 컴포넌트에 빨간줄 뜨면서 나중에 흐트러질거라고 경고함.

// 위 화면과 다른 코드임!!
<TextView
        android:id="@+id/textView" // 1)
        android:layout_width="350dp"
        android:layout_height="100dp"
        android:fontFamily="sans-serif-black"
        android:text="@string/main_title" // 2)
        android:textColor="@color/white" // 2)
        android:textAlignment="center"
        android:textSize="35dp"
        app:layout_constraintBottom_toBottomOf="parent" // 3)
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.491"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.139" />

 

몇 가지 요소를 설명하자면,

1) id는 이 요소의 id값이다. 나중에 여기에 웹처럼 링크를 걸거나 할 때는 이름을 고유값으로 지정해주는 것이 좋다. 참고로 그냥 textView는 기본으로 들어간 아이디이다.

// QuestionFragment파일 내부 예시: 
    override fun onClick(v: View?) {
        when(v?.id) {
            R.id.btn_next -> { //btn_next가 fragment_question파일에 어떤 이미지의 id였음
                navController.navigate(R.id.action_questionFragment_to_selectionFragment)
            }
        }
    }

 

나머지는 거의 직관적으로 무슨 뜻인지 알 것 같고

2) @string/main_title과 @color/white 는 values 디렉토리에 있는 파일에서 참조를 하는 것이다.

3) layout_constraintBottom ~ 이런 것들은 내가 수평 맞추면서 자연히 생긴 것들

 

참고)

strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">LoveTest</string>
    <string name="main_title">Let\'s find out \nyour love type!</string>
    <string name="question">There were some of your favorite flowers \n in the flower base. \n As time goes, these flowers wither \n \n What would you do?</string>
</resources>

colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="hotpink">#E91E63</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>


</resources>

 

이렇게 만들어진 xml 파일들이 fragment의 레이아웃들이다.

+) 이미지 사용

추가로 내가 사용하는 소스 이미지들은 'drawable' 디렉터리에 드래그해서 집어넣는다. 이때 drawable-2.4인가 암튼 뒤에 뭐가 더 붙은 애 말고 깔끔한 drawable 디렉터리에 넣자.

 

4. Fragment 만들기

fragment를 만들어주기 위해서, com~myapplication222에 fragment 패키지를 만들고 (오른쪽 클릭 -> New -> Package) 안에 들어갈 kt 파일들을 만들어준다.

com~222 폴더 오른쪽 클릭 -> New -> 아래에 보면 Fragment -> Blank 누르면

이 창이 뜬다. 이제, 여기에 프래그먼트들을 만들어주면 된다.

 

 

 

처음엔 이렇게 코드들이 자동 삽입되어 있는데 기초니까, 거의 다 지운다.

남기는 건 import 파트, MainFragment 클래스 안에 onCreateView 함수.

 

그리고 이 상태에서 연결하는 작업들을 하면 되는 것이다.

5. 각 Fragment 연결해주기

여기에 onViewCreated 함수를 통해서 뷰가 생겨난 후에 작동하는 코드들을 작성해주면 되는 것이다. 이때 다음 페이지로 넘어가는데 navigation이 유용하게 쓰인다. 보면

 

navController.navigate(R.id.action_mainFragment_to_questionFragment)

 

부분이 있는데, action_mainFragment_to_questionFragment 이 부분은 mainFragment에서 questionFragment로 넘어가는 거고, 이 액션이 생성되기 위해서는 프래그먼트들끼리 연결시켜줘야 한다.

 

navigation 디렉토리의 nav_graph.xml 파일을 열자.

역시 Split을 하던가 Design모드로 보면 각 레이아웃들을 선으로 연결시킬 수가 있다. layout 디렉터리에 여러 xml 파일들을 만들어두면 아래와 같이 여러 레이아웃들이 떠있다. 한 레이아웃의 오른쪽 중간을 누르고 다른 레이아웃에 연결하면 두 프래그먼트 간 연결고리가 생긴다.

 

 

여기까지 안드로이드 앱개발 뼈대를 작성해보았다.