[Android] 앱 만들고 실행하기

앱 만들고 실행하기

이번 포스팅에서는 앱을 만들고 실행하는 방법에 대해 알아보겠습니다.

앱을 만들어 실행하는 과정은 크게 4단계로 진행됩니다.

1. 프로젝트 생성하기

   Android Studio를 실행하고 새 프로젝트를 생성합니다.

   Welcome 화면에서 Create New Project를 선택하고 [Empty Activity]를 선택합니다.

   • Welcome 화면 열기

     안드로이드 스튜디오는 프로젝트 실행 시 마지막 프로젝트를 여는 옵션이 기본으로 설정되어 있는데, 여러 프로젝트를 동시에 진행할 경우 오히려 불편하기 때문에 설정을 바꿀 수 있습니다.

     안드로이드 스튜디오를 실행한 상태에서 [File] -> [Settings] -> [Apperance & Behaivor] -> [System Settings] 를 선택하여 우측의 화면에서 [Reopen last project on startup]의 체크를 해제하면 Welcome 화면을 볼 수 있습니다.

   Configure Your Project 창이 뜨면 적절한 설정을 한 후 [Finish] 버튼을 눌러 프로젝트를 생성합니다.

2. 레이아웃 편집하기

   언어로 코틀린을 선택하여 프로젝트를 생성한 경우, ‘.kt’ 파일에서는 코드 편집기가 열리고, ‘.xml’ 파일에서는 레이아웃 편집기가 열립니다.

   • 화면을 그려주는 함수 setContentView

   ‘,kt’ 파일의 코드를 보면 다음과 같은 코드가 있을 것입니다.

     super.onCreate(savedInstanceState)
     setContentView(R.layout.activity_main)
   

   위 코드는 ‘콘텐츠를 화면에 표시하기 위해서 res/layout 디렉터리 아래에 있는 activity_main.xml 파일을 사용한다’라는 의미입니다. 그런데 실제로는 ‘뷰 바인딩’을 사용하기 때문에 실제 코드에서는 레이아웃 파일이 아닌 안드로이드가 생성한 바인딩을 전달합니다.

   • 컴포넌트 올리기

     디자인 모드 아이콘 -> [Design] -> [Palette] -> [Common]

   • Constranit 편집기

     컴포넌트의 위치를 조절할 수 있는 편집기.

     • 컨스트레인트의 세 가지 모드

       1. Wrap Content: 위젯 안쪽의 내용물(주로 텍스트)에 크기를 맞춘다.

       2. Fixed: 가로세로 속성 필드에 입력된 크기에 맞게 가로세로를 고정한다.
       3. Match Constraint: 크기를 제약 조건을 Constraint 연결부에 맞춘다.

3. 소스 코드 연결하기

   • 뷰 바인딩 사용 방법

     1. build.gradle (Module: 프로젝트명.app) 파일에 viewBinding 설정을 추가한다.

        android{} 코드 영역 맨 앞에 다음 코드를 추가합니다.

        ```kotlin buildFeatures{ viewBinding true }

     2. 안드로이드 스튜디오 상단에 나타나는 [Sync Now]를 클릭해서 설정을 적용한다.

     3. activity_main.xml 레이아웃 파일을 작성한다.

     4. viewBinding이 설정되어 있기 때문에 안드로이드가 레이아웃 파일을 바인딩으로 생성한다.

        • 자동변환 공식: 레이아웃 파일명(첫 글자와 언더바 다음 영문을 대문자로 변환) + Binding

          예) activity_main.xml = ActivityMainBinding

     5. MainActivity.kt 파일에 있는 코틀린 코드에서 클래스로 변환된 바인딩의 inflate 함수로 초기화하고 변수에 저장한다.

        onCreate() 함수 코드 블록{} 안에서 setContentView() 줄 위에 작성한다.

        val 변수 = ActivityMainBinding.inflate(layoutInflater)
        

        이어서 변수에 저장된 바인딩의 root 뷰를 setContentView에 전달한다.

        setContentView(변수.root)
        

        바인딩을 도트 연산자(.)러 뷰/컴포넌트의 id에 접근 후 사용한다.

        변수.textView = "Hello"
        

        • 참고: 리스너 함수의 역할은 컴포넌트 클릭 시 내부의 코드를 동작시키는 것입니다.

        ```kotlin 변수.뷰아이디.setOnClickListener{}

4. 앱 실행하기

   에뮬레이터를 실행하면 앱이 실행되는 모습을 테스트 해 볼 수 있습니다.

그럼 안녕!