안드로이드 멘토링-(1)

먼저 안드로이드 구조에 대해 봅시다.

안드로이드의 구조는 위 그림과 같은 요소들로 구성되며 위에서부터 차례대로 애플리케이션, 에플리케이션 프레임워크, 라이브러리, 안드로이드 런타임, 리눅스 커널의 총 5개의 계층으로 분류되어 있습니다.

그렇다면 과연 안드로이드로 어떻게 프로그래밍을 할까요?

안드로이드 애플리케이션에서 레이아웃 같은 리소스를 만드는 데는 XML을, 안드로이드 애플리케이션에서 동적으로 돌아가는 부분을 정의할때는 Java code를 사용합니다. 요즘에는 Kotlin으로 대체되기도 합니다.

Activity?
Activity란 안드로이드에서 화면을 나타내는 단위이고 Activity 간의 이동을 위해서는 intent라는 것을 사용합니다.



이제 기본 레이아웃에 대해서 알아봅시다.

1. LinearLayout

  

Linear는 선의 실 모양이라는 뜻으로 LinearLayout은 가로 또는 세로를 기준으로 요소들을 정렬하고 무게를 줘서 해상도가 다른 상황에서도 일정한 비율을 맞춰줍니다.

2. RelativeLayout

Relative는 상대적인이라는 뜻으로 RelativeLayout은 하나의 뷰를 기준으로 정렬하고 가장 많이 사용되는 레이아웃입니다.

3. ConstrainLayout

ConstrainLayout은 안드로이드 스튜디오 2.3 이후부터 제공되는 레이아웃이며 안드로이드 앱에서 화면 크기에 상관없는 반응형 앱을 만들기 위해서 사용됩니다. 위치를 상, 하, 좌, 우를 기준으로 상대적으로 정하기 때문에 초보자 입장에서는 어려울 수도 있습니다.

이제 소스코드를 보면서 위에 내용들을 더 정확하게 알아봅시다. 저는 프로젝트 Activity는 Empty Activity로 했습니다. 프로젝트를 생성하게 되면 XML과 Java code가 생기게 됩니다. XML로 레이아웃을 구성하고 Java code에서 레이아웃을 활용하는 것입니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="org.town.android.androidexample.MainActivity">

    <Button
        android:layout_width="wrap_content"   // 해당 가로 길이 자동 조정
        android:layout_height="wrap_content"   // 해당 세로 길이 자동 조정
        android:layout_centerHorizontal="true"   // 가로줄의 중심에 위치
        android:layout_centerVertical="true"   // 세로줄의 중심에 위치
        android:id="@+id/center"   // 해당 버튼에 id를 부여한 값으로 저장
        android:text="center"/>   // 버튼의 이름을 부여한 값으로 정의

    <Button
        android:layout_width="wrap_content"   // 해당 가로 길이 자동 조정
        android:layout_height="wrap_content"   // 해당 세로 길이 자동 조정
        android:text="left"   // 버튼의 이름을 부여한 값으로 정의
        android:id="@+id/left"   // 해당 버튼에 id를 부여한 값으로 저장
        android:layout_toLeftOf="@+id/center"   // 센터 버튼을 기준으로 왼쪽에 위치
        android:layout_centerVertical="true"/>   // 세로줄의 중심에 위치


    <Button
        android:layout_width="wrap_content"   // 해당 가로 길이 자동 조정
        android:layout_height="wrap_content"   // 해당 세로 길이 자동 조정
        android:id="@+id/right"   // 해당 버튼에 id를 부여한 값으로 저장
        android:text="right"   // 버튼의 이름을 부여한 값으로 정의
        android:layout_toRightOf="@+id/center"   // 센터 버튼을 기준으로 오른쪽에 위치
        android:layout_centerVertical="true"/>   // 세로줄의 중심에 위치


    <Button
        android:layout_width="wrap_content"   // 해당 가로 길이 자동 조정
        android:layout_height="wrap_content"   // 해당 세로 길이 자동 조정
        android:text="above"   // 버튼의 이름을 부여한 값으로 정의
        android:id="@+id/above"   // 해당 버튼에 id를 부여한 값으로 저장
        android:layout_above="@+id/center"   // 센터 버튼을 기준으로 위쪽에 위치
        android:layout_alignLeft="@+id/center"/>   // 센터 버튼과 왼쪽 라인 맞추기

    <Button
        android:layout_width="wrap_content"  // 해당 가로 길이 자동 조정
        android:layout_height="wrap_content"   // 해당 세로 길이 자동 조정
        android:text="below"   // 버튼의 이름을 부여한 값으로 정의
        android:id="@+id/below"   // 해당 버튼에 id를 부여한 값으로 저장
        android:layout_below="@+id/center"   // 센터 버튼을 기준으로 아래쪽에 위치
        android:layout_alignLeft="@+id/center"/>   // 센터 버튼과 왼쪽 라인 맞추기


</RelativeLayout>

위 XML 코드를 살펴봅시다. 레이아웃은 RelativeLayout을 사용했으며 모든 버튼들이 가운데를 기준으로 상대적으로 위치하고 있습니다. XML은 HTML과 같이 코드를 열고 닫을 때 </>(태그)를 사용합니다. Button을 만들기 위해서는 <Button~~/>의 형식으로 코드를 작성합니다.

package org.town.android.androidexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private Button center;
    private Button left;
    private Button right;
    private Button above;
    private Button below;

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

    private void init() {
        center = (Button) findViewById(R.id.center);
        left = (Button) findViewById(R.id.left);
        right= (Button) findViewById(R.id.right);
        above= (Button) findViewById(R.id.above);
        below= (Button) findViewById(R.id.below);
    }

    private void setListener() {
            center.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "가운데", Toast.LENGTH_LONG).show();
                }
            });
            left.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "왼쪽",Toast.LENGTH_LONG).show();
                }
            });
            right.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "오른쪽",Toast.LENGTH_LONG).show();
            }
            });
            above.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "위",Toast.LENGTH_LONG).show();
            }
            });
            below.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "아래",Toast.LENGTH_LONG).show();
            }
            });
            }
}

위 Java code를 살펴봅시다. 먼저 public class private 접근제어자를 가진 버튼 변수들을 선언하고 있습니다. onCreate()는 액티비티가 생성될 때 호출되며 사용자 인터페이스 초기화에 사용되는 메소드 입니다. setContentView()에서는 XML 코드로 구현한 화면을 보여줍니다. init()에서는 XML 코드에서 저장한 id 값을 Button으로 형변환 시켜 Button 변수들에 대입하고, setListener()에서는 각각의 버튼을 누르면 해당하는 메소드를 실행시켜 지정된 메시지를 출력해줍니다. Toast는 잠시 출력해주는 기능을 하는데 이 코드에서는 버튼을 누르면 지정된 메세지를 잠시 보여주는 기능을 합니다. 그리고 getApplicationContext()은 자기 자신을 가리킵니다. 그러나 우리가 이 모든 코드를 써도 show()를 써주지 않으면 아무것도 보이지 않습니다. 왜냐하면 show()는 사용자에게 메시지를 보여주는 메소드이기 때문입니다.

아래 사진은 제가 직접 스마트폰으로 앱을 실행시킨 모습입니다. 보이시는 것처럼 각각의 버튼을 누르면 그에 맞는 메시지가 나타납니다.