[DSC] 안드로이드 스튜디오와 친해지기

DSC 2기 App Session 1주차

 

 

1. 안드로이드 스튜디오 설치하기

안드로이드 스튜디오를 시작하기 위해 다음 포스트를 참고해주세요!

 

[Android] - 안드로이드 스튜디오 설치하기

안드로이드 스튜디오 설치하기

 

---

2. 안드로이드란?

• 구글(Google)에서 만든 스마트폰용 운영체제(OS)

• 휴대용 단말기를 위해 만들어졌을뿐만 아니라

• 다양한 앱을 만들어 설치하면 실행될 수 있도록 구성된 앱 플랫폼(Platform)

 

안드로이드의 장점

• 오픈 소스

  안드로이드는 오픈 소스이고 아파치 2.0 라이선스를 사용합니다.

• 자바 언어 사용

  많은 학생들이 배우는 기본 언어가 자바이기에 안드로이드 앱 개발자가 많습니다.

  현재 안드로이드 스튜디오에는 Java와 Kotlin 개발 언어가 있습니다. 우선은 기초를 다지기 위해 자바로 안드로이드 앱을 만들어보고 시간이 남으면 코틀린도 배워봅시다.

• 쉬운 앱 간 연동

  다른 앱에서 제공하는 기능을 내가 만든 앱에서도 사용할 수 있습니다. 예를 들어, 사진 찍기 기능을 가진 앱을 만들기 위해 단말의 사진 앱을 연동하면 카메라 미리 보기 화면을 직접 만들지 않아도 됩니다.

• 다양한 기능 지원

  안드로이드는 리눅스 기반이라 새로운 하드웨어의 기능을 쉽게 연동할 수 있습니다.

 

 

---

3. Project 시작하기

안드로이드 스튜디오를 처음 실행하면 이러한 창이 뜹니다. (이전 프로젝트가 바로 뜬다면 Close Project를 하시면 이 창이 뜹니다.) 여기서 Start a new Android Studio Project를 누르시면 새 프로젝트를 생성할 수 있습니다.

 

 그러면 템플릿을 선택하라고 뜰 겁니다.. 이 대화 상자는 앱 안에 만들어질 첫 화면의 모양을 선택하는 거예요. Empty Activity가 화면 안에 아무것도 없는 거라 일단 Empty Activity를 선택해줄게요. Next를 눌러줍니다.

 

 여기서는 앱의 기본 정보를 입력하는 대화 상자가 나타납니다. Name에는 Project 이름 Week1, Package name에는 기본으로 사용하겠습니다. 둘 다 마음대로 입력해도 상관은 없지만 Name은 영어 대문자로 Package name은 영어 소문자로 시작해야 합니다. 그 점만 유의해주세요.

 저희는 첫 기초를 배우기 위해 Language는 Java로 하겠습니다. 그리고 Finish를 눌러줍니다.

프로젝트를 생성하는데 시간이 좀 걸릴 수도 있어요.

 

프로젝트를 만들면 activity_main.xml과 MainActivity.java 파일이 기본적으로 생성됩니다.

 

MainActivity.java

이 화면이 MainActivity.java 파일이고

 

이 화면이 activity_main.xml 파일입니다.

 

activity_main.xml

우선 activity_main.xml 파일부터 살펴보겠습니다. 

activity_main.xml은 우리가 스마트폰에 보여줄 화면을 구성하는 파일입니다. 이 화면은 위젯들을 드래그 앤 드롭 형식으로 꾸밀 수 있고 오른쪽 상단의 버튼을 클릭하면 코드로도 구현할 수 있습니다.

그리고 하얀색 화면은 스마트폰 화면에 나타날 디자인 화면(Design)이고 오른쪽 청록색 화면은 화면의 구성 요소만 보여주는 청사진 화면(Blue Print)입니다.

위의 파란색 버튼

을 클릭해서 Design을 고르시면 디자인 화면만 남을 거예요..

 보통은 디자인 모드로 작업하고 겹치거나 가려진 요소가 없는지 확인할 때 청사진 모드로 전환하여 사용하는 경우가 많습니다.

MainActivity.java

 MainActivity.java 파일은 방금 activity_main.xml파일에서 만든 화면을 어떤 식으로 동작하게 할 것인지 정해줄 수 있는 파일입니다.

 

 

두 파일의 위치는

MainActivity.java 파일은 app/java/com.example.week1 내부에 있고

activity_main.xml 파일은 app/res/layout 내부에 있습니다.

앱 실행하기

일단 기본적으로 Hello World!가 출력되는 앱을 실행시켜봅시다.

 

안드로이드 폰이 없으신 분들은 에뮬레이터로 실행해주세요.

[Android] - 안드로이드 스튜디오 에뮬레이터로 실행하기

안드로이드 스튜디오 에뮬레이터로 실행하기

 

안드로이드 폰이 있으시다면 안드로이드 폰으로 실행시키는 게 편하실 거예요.

[Android] - 안드로이드 스튜디오 안드로이드 폰 연결하기

안드로이드 스튜디오 안드로이드 폰 연결하기

 

앱을 실행하려면 

이 버튼을 눌러주시거나 Shift + F10을 눌러주세요.

 

이렇게 나온다면 나만의 앱을 만들 준비가 완료되신 겁니다!

 

---

4. MainActivity.java 이해하기

package com.example.week1;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

 

 프로그래밍을 해보신 분들은 알겠지만 원래 자바 파일이었다면 main 함수가 있었을 겁니다. 하지만 여기서는 main 함수가 없고 onCreate() 함수가 있습니다. onCreate()가 main() 역할을 한다고 생각할 수 있습니다.

그 안에 super는 onCreate() 함수를 호출합니다. super는 자바에서 상속받은 클래스에서 부모 클래스를 가리킬 때 사용하는 키워드입니다. 자바 모르시는 분들도 있으니 간단히 말하자면 화면의 메시지를 보여주는 기능과는 상관이 없습니다. 그래서 그냥 넘어가셔도 됩니다. 

그리고 setContentView하고 R.layout.activity_main이 있습니다. setContentView() 함수는 화면에 무엇을 보여줄 것인지를 설정해주는 역할을 하고 R.layout.activity_main은 처음에 보았던 activity_main.xml의 화면이라는 것만 알면 됩니다.

 

총 정리하자면 위의 코드는 activity_main.xml을 폰 화면에 보여주는 것이 전부입니다!

 

---

5. activity_main.xml 이해하기

 

저는

이 버튼을 누른 (오른쪽 상단에 위치해 있습니다.)

이 화면을 주로 사용하지만

 

 

지금은 우선 여기서

이 버튼을 눌러 Design을 선택한 화면인

이 화면으로 진행할게요.

 

Attributes를 클릭하고 (화면의 우측에 위치해있어요)

 

 

 

이 Hello World!를 클릭해주시면

 

이러한 화면을 볼 수 있습니다. 

 

여기서 Attribute의 text의 속성을 Hi, Android로 바꿔주세요.

그리고 다시 실행시키면

Hello World! 에서 Hi, Android로 바뀐 것을 확인할 수 있습니다!

1. Button 추가하기

이번엔 버튼을 추가해 볼까요?

 

우선 Hi, Android라고 적혀있는 TextView를 삭제해줍니다. (Hi, Android를 클릭하고 키보드의 Delete 버튼을 누르면 삭제가 가능합니다.)

 

그리고 이 자석 아이콘(Turn On Autoconnect)을 눌러주시면 요소를 쉽게 배치할 수 있습니다.

 

좌측의 팔레트(Palette)가 보이시나요?

팔레트에서는 화면에 추가할 요소(버튼, 메시지)들을 확인할 수 있습니다. 여기서 Button를 화면으로 드래그해주세요.

 

모두 이렇게 되셨나요?

이 상태로 앱을 실행시키면

버튼이 만들어진 것을 확인할 수 있습니다.

 

Button Click Event

이번엔 버튼을 클릭했을 때 메시지를 나타나게 해 봅시다.

이 개념이 이벤트를  처리한다는 개념인데 버튼을 누르는 행위는 안드로이드에서 클릭 이벤트라고 합니다.

 

Attribute의 onClick 속성에 onButton1Clicked라고 입력해주세요.

 

그리고 MainActivity.java파일로 가겠습니다.

 

우선 코드 작성을 편하게 하기 위해

File -> Settings 를 클릭해줍니다.

 

그리고 좌측의 Editor -> General -> Auto Import 를 클릭해주세요.

Java안의

Add unambiguous imports on the fly 와

Optimize imports on the fly (for current project) 항목을

체크해주시면 import 구문이 자동으로 입력될 거예요.

 

위 사진과 같이 onCreate()함수 하단에

public void onButton1Clicked(View v) {
    Toast.makeText(this, "버튼을 눌렀습니다.", Toast.LENGTH_LONG).show();
}

이렇게 입력해주시고 앱을 실행시키면

버튼을 눌렀습니다. 라는 메시지가 잠깐 떴다가 사라 질 겁니다.

 

이것을 Toast 메시지라고 합니다.

위 코드의 의미를 해석하자면

Toast.makeText( //Toast 메시지를 만들어라

this, //현재 Context에서

"버튼을 눌렀습니다.", //Toast에 나타낼 메시지

Toast.LENGTH_LONG) //Toast 메시지가 나타나는 시간, Toast.LENGTH_SHORT하시면 더 짧게 나타났다가 사라져요

.show(); //Toast를 보여줘라

가 됩니다.

 

Button Click Event 2

이번엔 버튼을 2개 더 추가하고 기능을 2개 더 만들어봅시다.

버튼을 추가하고 위 사진처럼 동그라미를 당겨서 버튼의 제약 조건을 걸어줍니다. 

안드로이드 스튜디오는 기본적으로 ConstraintLayout을 사용하는데 이 레이아웃은 각 요소마다 제약을 걸어줘야 하기 때문입니다.

 

세 버튼 다 제약을 걸어주시면 다음과 같은 화면이 될 겁니다.

 

두 번째 버튼의 onClick 속성에는 onButton2Clicked

세 번째 버튼의 onClick 속성에는 onButton3Clicked라고 입력해주겠습니다.

 

그리고 MainActivity.java에 

public void onButton2Clicked(View v) {
    Intent myIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://www.google.com"));
    startActivity(myIntent);
}

public void onButton3Clicked(View v) {
    Intent myIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("tel:010-1234-5678"));
    startActivity(myIntent);
}

위의 코드를 입력해줍니다.

 

여기서 Intent란 내가 하고자 하는 행위를 의미합니다. 인텐트를 사용하면 애플리케이션 구성 요소 간에 데이터를 전달하거나 실행하려는 기능이 무엇인지 안드로이드 플랫폼에 알려줄 수 있는 것이지요.

 

우선 앱을 실행시켜 봅시다.

첫 번째 버튼을 클릭하면 전에 했던 것과 같이 Toast 메시지가 뜨고

두 번째 버튼을 클릭하면

구글 홈페이지가

 

세 번째 버튼을 클릭하면

010-1234-5678에 전화걸 수 있는 화면이 나타납니다.

 

따라서 코드를 분석해보자면

Intent myIntent = //Intent 변수를 생성

new Intent( //새로운 Intent를 만듦

Intent.ACTION_VIEW, //화면에 보여주는 기능을 가진 Intent

Uri.parse(" ")); //Uri를 분석

    "https://www.google.com" 이면 사이트 접속

    "tel:010-1234-5678" 이면 전화 걸기
startActivity(myIntent); //방금 만든 Intent를 실행

 

---

[Android] - [DSC] 안드로이드 스튜디오와 친해지기 2

[DSC] 안드로이드 스튜디오와 친해지기 2

나머지는 다음 포스트에 이어집니다. :)