개발자의 공간

이번 편에서는 레이아웃과 코틀린 코드사이의 연결에 대해서 알아보겠습니다. 레이아웃에 만들어둔 도구(컴포넌트)에 동작을 입히는 과정입니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:gravity="start|top"
        android:inputType="textMultiLine"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintTop_toBottomOf="@+id/editText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintTop_toBottomOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

위와 같이 3개의 컴포넌트들을 생성해두었었지요. EditText, Button, TextView 각각의  id 는 "editText", "button", "textView"입니다.

번역기를 개발해보겠다고 하였었지요? EditText에는 번역하고자 하는 단어(예: LOVE)를 적을 것이고, Button 을 누르면 번역작업을 거쳐 TextView 에 변역된 결과(예: 사랑)가 보여지도록 할 예정입니다. 다만 번역하는 부분은 구글의 API 를 사용해야해서 다음 편에서 진행해보도록 하겠습니다.

1. button 에 대해서 동작을 정의하고 싶으면 아래와 같이 해주면 됩니다.

그런데 button이 빨간색으로 표시되네요. 에러가 있다는 것인데요. 마우스를 가져다대면 아래와 같은 설명이 표시됩니다. MainActivity.kt 코드에서는 button 이라는 것이 어디서 왔는지 알지 못합니다. 그래서 button이 무엇인지 어디서 왔는지 알려줄 필요가 있습니다. 그게 바로 Import 입니다. 파란 "Import"버튼을 눌러도 되고, Mac 단축키(ALT + SHIFT + ENTER) 를 입력해줘도 됩니다.

아래와 같이 한줄이 추가되었습니다. activity_main.xml 레이아웃 파일내의 모든(*) 컴포넌트들을 import 하겠다는 것입니다. 이제 button 코드부분의 빨간색이 사라졌네요.

그러면 button 이 눌렸을 때, EditText의 내용을 TextView에 작성되도록 해볼까요? 아래와 같이 작성하면 됩니다. 간단하지 않습니까. 저도 Java로 개발하다 Kotlin 접하니 이렇게 간결할수가 없습니다. 

Java로 개발하였다고 하면 아래와 같이 작성해주었어야 했을텐데, 확연하게 짧은 것을 알 수 있습니다. Kotlin 인정!

EditText edit = findViewById(R.id.editText);
Button btn = findViewById(R.id.button);
TextView text = findViewById(R.id.textView);

btn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        text.setText(edit.getText());
    }
});

그러면 그 결과를 확인해보도록 하겠습니다. Button을 눌렀을 때, EditText의 내용이 TextView 에 잘 표시되는 것을 확인할 수 있었습니다.

다음편에서는 구글 번역 API를 이용해서 번역된 결과를 TextView에 적어보도록 하겠습니다.

감사합니다.

이번 편에서는 안드로이드 프로젝트의 기본 구성에 대해서 알아보겠습니다.

안드로이드 프로젝트는 수많은 컴포넌트들로 구성되어 있지만, 이제 갓 안드로이드에 입문하였다면 크게 2가지로 구분된다는 것을 알면됩니다. 코드 부분 그리고 레이아웃 부분입니다. 

1. "MainActivity.kt" 코드 부분을 간단하게 확인해보도록 하겠습니다.

package com.devkim.mytranslater

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

	// onCreate함수는 앱을 실행했을때 불리는 함수부분입니다.
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // activity_main.xml 레이아웃 파일을 읽어와서 화면에 적용해주는 코드입니다.
        setContentView(R.layout.activity_main)
    }
}

2. 그러면 "activity_main.xml" 레이아웃 부분은 어떻게 생겼는지 확인해보도록 하겠습니다. 

activity_main.xml 을 더블클릭해보면 아래와 같이 레이아웃 형태로 앱 구성을 할 수 있는 화면이 보여집니다.

왼쪽의 Palette에서 도구들을 끌어다가 앱을 구성할 수 있는데, 눈에 보이는 레이아웃이 어떤 코드 형태를 가지는지 확인하면서 진행하는 것이 차후 메뉴가 많아졌을때 관리가 수월하기 때문에, 코드 형태도 확인해보도록 하겠습니다. 아래 버튼을 클릭하면 코드 형태로 확인할 수 있습니다.

대략 ConstraintLayout 안에 TextView 가 포함되어 있다는 것을 확인할 수 있습니다.

Layout 구성 방식 중에는 LinearLayout, RelativeLayout, ConstraintLayout ... 등등 여러가지가 있습니다. 제가 이전에 안드로이드 앱 개발을 할 당시에는 LinearLayout을 베이스로 개발하였으나, 지금은 default 레이아웃이 ConstraintLayout인 만큼 ConstraintLayout만의 장점이 있을 것을 기대하며 ConstraintLayout 을 베이스로 진행해보도록 하겠습니다.

도구들은 EditText, Button, TextView, .... 를 주로 많이 사용하는데, 이를 레이아웃에 한번 배치해보겠습니다.

Text > Multiline Text 도구를 드래그하여 레이아웃에 올려둡니다.

(기본 EditText는 "Plain Text"를 사용하면 되지만, 번역앱을 만들어보기로 하였으니 여러줄 입력 가능한 컴포넌트를 사용하겠습니다.)

Button과 TextView도 각각 드래그해서 올려둡니다.

그런데 코드 에디터로 와서 확인해보니 각 도구들마다 빨간줄이 그어져 있네요 

"This view is not constrained. It only has designtime positions, so it will jump to (0,0) at runtime unless you add the constraints" 

각 뷰는 디자인 시점의 위치만 가지고 있고, 제약을 가하지 않으면 runtime에서 (0,0) 에 위치할 것이라고 하네요.

실제 앱을 실행해보면 모든 도구들이 (0,0)에 위치한 것을 확인할 수 있습니다.

아래와 같이 레이아웃을 수정해보도록 하겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:gravity="start|top"
        android:inputType="textMultiLine"
        // EditText의 상단 parent의 상단과 맞춤
        app:layout_constraintTop_toTopOf="parent"
        // EditText의 시작(왼쪽)을 parent의 왼쪽과 맞춤
        app:layout_constraintStart_toStartOf="parent"
        // EditText의 끝(오른쪽)을 parent의 오른쪽과 맞춤 (좌우 각각 맞추면 가운데 정렬이 됨)
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        // Button의 상단을 editText의 하단과 맞춤
        app:layout_constraintTop_toBottomOf="@+id/editText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintTop_toBottomOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

아래와 같이 레이아웃 구성된 것을 확인할 수 있고, 실제 앱 실행했을 때도 이와 동일하게 구성되는 것을 확인할 수 있습니다.

기본적인 프로젝트 구성에 대해서 알아보았고, 다음 편에서는 각 도구들에 동작을 입히는 방법에 대해서 알아보도록 하겠습니다.

감사합니다.

앞 편에서는 애뮬레이터 사용법에 대해서 알아봤습니다. 애뮬레이터는 실제 기기대비 제약이 존재하기 때문에, 안드로이드 폰을 갖고있지 않은 경우만 사용하는 것을 추천합니다. 그럼 이번 편에서는 안드로이드 기기에서 앱을 실행하는 방법에 대해서 알아보겠습니다. (LG V40 기기를 기준으로 작성되었습니다.) 

0. 맥은 드라이버가 자동으로 설치되어 Windows처럼 드라이버를 별도로 설치해주지 않아도 됩니다.

1. 기기의 개발자 옵션에서 USB  디버깅 옵션을 켜주어야 합니다.

휴대폰 설정 > 휴대폰 정보 >  소프트웨어 정보

"빌드 번호" 메뉴를 5회 클릭해주면 휴대폰 설정의 "개발자 옵션" 메뉴가 나타납니다.

개발자 옵션에서 "USB 디버깅" 옵션을 체크해주면 이제부터 Mac 에서 안드로이드 폰에 개발자용 작업들을 수행할 수 있게됩니다. 

2. 안드로이드 기기 및 PC에 USB 케이블을 연결하면 해당 PC에서 USB 디버깅이 가능하도록 허용할지 확인 팝업이 발생합니다. 확인을 눌러주면 되며, 케이블 연결때마다 확인을 요청할 것이므로 "이 컴퓨터에서 항상 허용"을 체크하여 항상 허용하도록 할 수 있습니다.

3. Android Studio 에서 안드로이드 기기로의 앱 설치해보도록 하겠습니다.

안드로이드 기기가 연결되면, Android Studio 에 자동으로 "LGE LM-V409N" 과 같이 인식되어 있는 것을  확인할 수 있습니다.

애뮬레이터에서 실행하고 싶다면 "Pixel 2 API 24" 를 선택하여 변경해주면 되며, 안드로이드 기기에서 실행하고 싶다면 그대로 두고 재생버튼 눌러주면 되겠습니다.

아래와 같이 안드로이드 기기에 앱이 자동 설치되며 실행까지 잘되는 것 확인할 수 있습니다.

다음 편에서는 안드로이드 프로젝트의 간략한 설명을 진행해보도록 하겠습니다.

감사합니다.