[Android 기초] 2. 개발 도구 IDE, AVD실행, XML 기본 구조

 

 

---

1 안드로이드 스튜디오 설치/시작

 

 

파일 다운로드 및 설치하기

• https://developer.android.com/studio?hl=ko 에서 다운로드 및 설치

 

 

 

안드로이드 스튜디오 익숙해지기

 

 

• 툴바: 앱 및 에뮬레이터 실행, SDK 다운로드 등 다양한 작업을 수행
• 도구창 모음: 안드로이드 스튜디오 창의 둘레에 있으며 개별 도구 창을 펼치거나 접을 수 있음
• 도구 창:  윈도우의 탐색기나 맥의 파인더처럼 프로젝트에 필요한 소스 파일, 설정 파일, 이미지 파일 등과 디렉터리를 관리할 수 있음. 또한 로그 보기, 버전 관리, 터미널 실행 등의 특정 도구를 사용할 수 있으며 도구 창 아래쪽의 탭을 클릭하면 해당 도구를 열 수 있고, 오른쪽 위의 닫기 버튼을 클릭하면 창을 닫을 수 있음
• 편집기 창: 코드를 작성하고 수정할 수 있음 (파일 유형에 따라 편집기가 바뀔 수 있음)
• 상태 표시줄: 프로젝트와 안드로이드 스튜디오의 상태를 표시하며 경고 또는 기타 필요한 메시지도 표시

 

 

 

 

안드로이드 SDK 기본 설정 확인하기

 

 

• 안드로이드 스튜디오는 편집을 편하게 해주는 도구일 뿐, 실제 컴파일러와 같은 개발 환경은 모두 SDK에 있음
• 안드로이드 스튜디오는 이 SDK를 사용해서 최종 설치 파일을 만들어줌
• (윈도우) File - Settings - Languages & Frameworks - Android SDK를 클릭
  Android SDK Location에서 설치 경로를 확인 가능

 

 

 

SDK Platforms

• File - Settings - Languages & Frameworks - Android SDK - SDK Platforms 탭
  소스 코드를 빌드할 때 사용하는 플랫폼이 버전별로 표시된 것을 확인 가능
• 컴퓨터에 설치된 플랫폼은 Status 부분이 "Installed"로 표시되어 있으며
  "Not Installed"로 표시된 플랫폼 중 설치를 원하는 플랫폼 이름 앞의 체크박스를 체크해서 설치 항목 선택 가능

 

 

 

SDK Tools

 

 

• File - Settings - Languages & Frameworks - Android SDK - SDK Tools 탭
  안드로이드에서 사용할 수 있는 도구(에뮬레이터, 디버거 등)의 목록을 확인
• Android SDK Build-Tools
  : 리소스 아이디를 가지고 있는 R 파일을 생성하고 설치 파일인 APK 파일을 최적화 하는 도구
    자바 바이트코드(Java Bytecode)를 달빅 바이트코그(Dalvik Bytecode)로 변환하는 도구도 포함
• Android Emulator
  : 가상의 스마트폰 환경으로 앱을 설치하고 테스트
• Android SDK Platform-Tools
  : 에뮬레이터와 스마트폰에 연결하기 위한 ADB(Android Debug Bridge)라는 도구와
    성능 분석 도구인 Systrace가 제공
• Intel x86 Emulator Accelerator(HAXM installer)
  : 에뮬레이터의 처리 속도를 빠르게 해주는 하드웨어 가속기
    설치되어 있지 않으면 에뮬레이터를 사용할 수 없을 정도로 느려질 수 있음

 

 

 

SDK Update Sites

 

 

• File - Settings - Appearance & Behavior - System Settings - Android SDK - SDK Update Sites 탭
• 필요한 도구를 다운로드할 수 있는 웹 사이트 주소가 등록되어 있으며, 다른 주소를 등록 가능
• 수정이 있으면 Apply를 클릭하고 없으면 OK를 클릭해서 창을 닫음

 

 

 

프로젝트 구조 이해하기

 

 

• 프로젝트(Project) : 소스 코드와 이미지, 음악, 텍스트 파일 등의 리소스를 체계적으로 관리하는 최상위 디렉터리
• 대부분의 통합 개발 환경은 필요에 따라 프로젝트 내부에 생성되는 실제 디렉터리 구조를 재배열해서 보여주는데,
  안드로이드 스튜디오도 동일한 기능을 제공
• 안드로이드 스튜디오에 보이는 디렉터리 구조 ≠ 실제 탐색기 상의 파일 구조
  ∴ 필요에 따라 실제 디렉터리 뷰(Project뷰), Android 뷰 전환하면서 사용

 

 

 

 

Android 뷰의 구조

 

 

• Android 뷰 : 안드로이드 개발을 편하게 하기 위해 재배치한 가상의 디렉터리 구조
• Project 뷰보다 훨씬 간단하므로, 보통 작업할 때는 Android로 보는 것을 추천
• 크게 app과 Gradle Scripts로 구성
  app에는 코딩하면서 생성한 모든 파일이 저장되고, Gradle Scripts에는 빌드에 필요한 설정 정보들이 저장
• manifest: 설치 관련 정보 디렉터리
  kotlin+java: 소스 코드 디렉터리
  res: 이미지, 레이아웃, MP3 등의 리소스 디렉터리
  Gradle Scripts: 빌드 관련 설정 정보 디렉터리

 

 

 

Project 뷰의 구조

 

 

• Project 뷰 : 실제 디렉터리의 구조
• 이미지를 추가하거나 다양한 화면 크기를 처리하는 작업 등 리소스를 변경할 때 추천
• app: 앱과 관련된 모든 소스(코드, 라이브러리, 이미지 등) 디렉터리
  src: 내가 만든 소스(코드, 레이아웃, 이미지 등)가 있는 디렉터리
  app>src>main>java: 소스 코드가 있는 디렉터리(아직 java로 되어 있습니다.)
  res: 이미지, 레이아웃, MP3 등의 리소스 디렉터리
  AndroidManifest.xml: 설치 정보 파일
  build.gradle: 빌드 정보 파일
  
  

 

 

 

---

 

2 앱을 만들어 실행하기

 

 

에뮬레이터 생성 및 실행하기

• 에뮬레이터 : 한 시스템에서 다른 시스템을 복제해서 복제된 시스템이 원본 시스템을 그대로 재현해주는 것(가상환경)
• 안드로이드 스튜디오에도 에뮬레이터가 있어서 스마트폰이 없어도 작성한 코드를 테스트 할 수 있음
• Device Manager - Create Device (+버튼) - 원하는 기기 선택 - Android 버전 선택 - Finish
• 설치가 완료되면 목록에서 재생 버튼으로 실행

 

 

스마트폰 설정 및 연결하기

• 스마트폰의 개발자 옵션 활성화 (빌드 번호 클릭 후 활성화)
• 개발자 옵션에 들어 USB 디버깅 활성화, USB 케이블을 이용해 연결 뒤 기기 목록에서 선택하여 실행

 

 

앱 만들어 실행하기

 

앱을 만들어 실행하는 과정 (4단계)

1. 프로젝트 생성하기
2. 레이아웃 편집하기
3. 소스 코드 연결하기
4. 앱 실행하기

 

1단계: 프로젝트 생성하기

• "New Project" - Empty Views Activity 클릭
• Name에는 원하는 프로젝트 이름, Package name은 소문자로, Language는 Kotlin으로 설정합니다.
  Name: 프로젝트명
  Package name: 패키지명 (패키지명은 애플리케이션 ID이며 나중에 변경할 수 있음, 반드시 소문자)
  Save location: 프로젝트를 저장할 위치 
  Language: 프로젝트에 사용할 언어를 선택
  Minimum SDK: 최소 지원 SDK. 98% 이상 되는 거 선택하면 좋음
  ​

💡 패키지명(Package name)에 example을 포함할 경우 플레이 스토어에 업로드 할 수 없음
→ 반드시 com.회사명 또는 본인이름.앱이름 형태로 작성해야 함

 

 

2단계: 레이아웃 편집하기

• 레이아웃 : 텍스트나 이미지 등을 화면에 배치할 수 있는 도구
• 프로젝트가 생성 뒤 기본화면에서 편집기 창 상단에 보이는 파일명으로 된 탭을 선택하면 레이아웃 편집기로 이동
• 파일의 확장자에 따라서 .kt 파일은 코드 편집기가 열리고, .xml 파일은 레이아웃 편집기가 자동으로 열림

 

💡화면을 그려주는 함수 setContentView

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

기본으로 생성된 MainActivity에서 보면 setContentView(R.layout.activity_main)라는 코드가 있음
이는 '콘텐츠를 화면에 표시하기 위해서 res/layout 디렉터리 아래에 있는 activity_main.xml 파일을 사용한다'라는 의미

 

• activity_main.xml를 클릭하면 편집기 창이 레이아웃을 편집할 수 있는 형태로 바뀜
• 우측 상단에 있는 모드 버튼을 클릭 - [Code], [Split], [Design] 모드로 변경되면서 각각의 모드에서 편집이 가능
  
  
• [Design] 모드로 들어간 뒤, 좌측 상단의 팔레트(Palette) - 커먼(Common) - 버튼(Button)을 드래그
  화면 중앙의 'Hello World!'라는 글자 아래에 가져다 놓음
  컨스트레인트 편집기 위쪽의 + 아이콘을 클릭하면 'Hello World!'가 쓰여 있는 TextView에 버튼의 레이아웃이 연결됨

 

💡 Constraint 편집기 숫자의 의미

편집기에서 클릭한 + 위의 숫자는 현재 연결된 요소와의 거리를 나타냄
ex)  "44"라는 숫자는 44dp(Device independence Pixel)만큼 떨어져 있다는 의미

 

💡  Constraint 3가지 모드

• Wrap Content: 위젯 안쪽의 내용물에 크기를 맞춤
• Fixed: 원하는 값(위 그림에서 위쪽 컨스트레인트 값을 44로 설정)을 입력하여 가로 세로 속성 필드에 입력된 크기에 맞게 가로세로를 고정
• Match Constraint: 0dp로 설정하여 크기를 제약 조건인 Constraint 연결부에 맞춥니다.

 

 

 

코틀린 코드와 레이아웃 연결하기

• 뷰(View) : 레이아웃이나 사용자에게 보이는 것들을 통칭
• 뷰에서 버튼 같은 요소를 동작시키기 위해서는 먼저 뷰와 소스 코드를 연결해야 함
• 안드로이드는 findViewById라는 함수를 제공하고 있으며 이를 조금 효율적으로 사용하기 위해서 코틀린에서는 코틀린 익스텐션(Kotlin Extensions)이라는 부가 기능을 제공해 왔음. 그러나, 코틀린 익스텐션은 다음과 같은 이유로 최신 버전의 안드로이드 스튜디오에서는 사용을 추천하지 않음
                - 코틀린에서만 제공하므로 자바에서는 사용할 수 없음
                - 일부 상황에서 뷰를 찾을 수 없는 오류가 발생
                - 어디서나 뷰를 호출할 수 있기 때문에 잘못된 참조로 인해 앱이 강제 종료될 수 있음
                  예를 들어 activity_main.xml과 fragment_sub.xml에서 동일하게 button 아이디를 사용하면
                  실수로 다른 XML의 아이디를 참조하여 앱이 강제로 종료될 수도 있음
                - 모듈화를 추천하고 있는데 코틀린 익스텐션을 사용할 경우 다른 코드에서 뷰에 대한 접근이 불가능
• 따라서 뷰 바인딩 방식을 사용하여 뷰와 코드를 연결하는 방법을 추천
  
  

 

💡 뷰 바인딩을 사용하는 방법

 

(1) build.gradle(Module: app) 파일에 viewBinding 설정을 추가

 

(2) 파일 상단에 나타나는 [Sync Now]를 클릭해서 설정을 적용
(3) activity_main.xml 레이아웃 파일을 작성
(4) viewBinding이 설정되어 있기 때문에 안드로이드가 레이아웃 파일을 바인딩으로 생성

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

 

(5) MainActivity.kt 파일을 다음과 같이 작성 (예시)

package com.example.myfirstapplication
​
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.myfirstapplication.databinding.ActivityMainBinding
​
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
    }
}

 

 

[주요 변경사항]

 

val binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)

• 바인딩 변수를 통해 뷰에 미리 작성해두었던 버튼의 id에 접근할 수 있음

 

binding.button.setOnClickListener { }
package com.example.myfirstapplication
​
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.myfirstapplication.databinding.ActivityMainBinding
​
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        
        binding.button.setOnClickListener { 
            
        }
    }
}

• 버튼의 id에 리스너(Listener)를 설정
• 리스너의 역할은 버튼을 클릭 했을 때 내부의 코드를 동작시키는 것

 

binding.button.setOnClickListener{
    binding.textView.text = "Hello Kotlin!!!" // 버튼을 클릭하면 TextView의 문구가 변경됩니다.
}

• 버튼을 클릭하였을 때 TextView의 문구를 바꾸는 코드
  
  

 

[최종 코드]

package com.example.myfirstapplication
​
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.myfirstapplication.databinding.ActivityMainBinding
​
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
​
        binding.button.setOnClickListener {
            binding.textView.text = "Hello Kotlin!!!"
        }
    }
}

Button을 눌렀을 때 오른쪽과 같이 출력

 

 

앱 실행하기

• 에뮬레이터를 설정하고, 플레이 버튼을 눌러 실행

 

 

---

 

3 XML 기본 문법

 

• LinearLayout, FrameLayout, RelativeLayout 컴포넌트 특징 및 속성 이해, 활용
• 레이아웃, 위젯, 뷰 이해

 

액티비티와 인텐트

• 일반적으로 안드로이드의 한 화면(페이지)은 하나의 액티비티로 구성
• 화면 전환은 인텐트로 구현

 

버튼 작동

// activity_main.xml
<Button
	android:text="네이버 접속하기"
	android:onClick="onButton1Clicked" />
<Button
	android:text="전화 걸기"
	android:onClick="onButton2Clicked" />


// MainActivity.kt
fun onButton1Clicked(View){
	val myIntent = Intent(Intent.ACTION_VIEW, uri.parse("http://m.naver.com"))
    startActivity(myIntent) // 웹뷰를 띄우는 인텐트를 만들어 호출
}
fun onButton2Clicked(View){
	val myIntent2 = Intent(Intent.ACTION_VIEW, uri.parse("tel:010-1234-5678"))
    startActivity(myIntent2) // 전화를 거는 인텐트를 만들어 호출
}

• 버튼을 만들고, onClick 속성의 값에 원하는 함수명을 쓰면 버튼을 눌렀을 때 해당 함수가 실행됨
• 코틀린 파일에 해당 이벤트를 처리하는 함수를 추가하면 완료
• 참고로 작성 도중 import가 필요한 부분이 있다면, 갖다대고 ctrl + enter하면 자동 생성