자바 안드로이드 앱개발 강좌, 제트팩을 이용해 화면 만들기

안드로이드 앱 개발은 그 어느 때보다도 많은 관심을 받고 있습니다. 특히, 구글의 제트팩(Jetpack) 라이브러리는 안드로이드 애플리케이션의 개발을 보다 쉽고 효율적으로 만들어 주는 강력한 도구입니다. 이번 강좌에서는 자바를 사용하여 제트팩을 기반으로 화면을 만드는 방법에 대해 자세히 알아보겠습니다.

1. 제트팩의 이해

제트팩은 안드로이드 개발을 위한 수많은 라이브러리와 아키텍처 구성 요소의 집합으로, 앱의 개발, 테스트 및 유지보수를 더 쉽고 빠르게 할 수 있도록 돕습니다. 제트팩은 다음의 핵심 구성 요소들로 이루어져 있습니다.

앱 아키텍처 (Architecture Components): Lifecycle, LiveData, ViewModel와 같은 UI 관련 라이브러리
UI 컴포넌트: Jetpack Compose 등의 최신 UI 툴
데이터 관리: Room, DataStore 등 데이터 저장소
행동: Navigation, WorkManager 등 앱의 행동을 관리

2. 환경 설정

안드로이드 스튜디오를 사용하여 제트팩을 활용한 프로젝트를 설정하는 방법을 알아보겠습니다. 아래의 단계를 차례로 따라해 주세요.

안드로이드 스튜디오를 실행하고, 새로운 프로젝트를 생성합니다. “Empty Activity”를 선택하고 프로젝트의 이름을 입력합니다.

Gradle 파일(Build.gradle)에 제트팩 라이브러리 의존성을 추가합니다. 필수 라이브러리들은 다음과 같습니다:

dependencies {
    implementation 'androidx.appcompat:appcompat:1.3.0'
    implementation 'androidx.activity:activity-ktx:1.2.3'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.4.0'
    implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.4.0'
}

Gradle 파일을 동기화(Sync) 합니다.

3. 기본 화면 구성하기

이제 기본적인 화면을 구성하기 위해 XML 레이아웃과 자바 코드를 작성해 보겠습니다.

3.1 XML 레이아웃 파일 생성하기

프로젝트의 res/layout/activity_main.xml 파일을 열고, 다음과 같이 수정합니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, Jetpack!"
        android:textSize="24sp"
        android:layout_centerInParent="true" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        android:layout_below="@id/text_view"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp" />

</RelativeLayout>

3.2 MainActivity.java 작성하기

MainActivity.java 파일을 열고, 다음과 같이 코드를 작성합니다. 이 코드에서는 버튼 클릭 시 텍스트를 변경하는 기능을 구현합니다.

package com.example.myapplication;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private TextView textView;
    private Button button;

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

        textView = findViewById(R.id.text_view);
        button = findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setText("Button Clicked!");
            }
        });
    }
}

4. ViewModel과 LiveData 활용하기

제트팩의 ViewModel과 LiveData를 활용하면 UI 데이터를 효율적으로 관리할 수 있습니다. ViewModel은 UI 관련 데이터를 유지하고, LiveData는 데이터의 변경을 감지하여 UI를 자동으로 업데이트합니다.

4.1 ViewModel 클래스 생성

새로운 클래스를 생성하여 ViewModel을 구현합니다. MyViewModel.java 파일을 생성하고 다음 코드를 입력합니다.

package com.example.myapplication;

import androidx.lifecycle.LiveData;
import androidx.lifecycle.MutableLiveData;
import androidx.lifecycle.ViewModel;

public class MyViewModel extends ViewModel {
    private final MutableLiveData text = new MutableLiveData<>();

    public MyViewModel() {
        text.setValue("Hello, Jetpack with ViewModel!");
    }

    public LiveData getText() {
        return text;
    }

    public void updateText(String newText) {
        text.setValue(newText);
    }
}

4.2 MainActivity에서 ViewModel 사용하기

이제 MainActivity에서 ViewModel을 사용하여 텍스트를 업데이트 해보겠습니다. 코드를 아래와 같이 수정합니다.

package com.example.myapplication;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.lifecycle.Observer;
import androidx.lifecycle.ViewModelProvider;

public class MainActivity extends AppCompatActivity {
    private MyViewModel myViewModel;

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

        myViewModel = new ViewModelProvider(this).get(MyViewModel.class);
        TextView textView = findViewById(R.id.text_view);
        Button button = findViewById(R.id.button);

        myViewModel.getText().observe(this, new Observer() {
            @Override
            public void onChanged(String s) {
                textView.setText(s);
            }
        });

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myViewModel.updateText("Button Clicked!");
            }
        });
    }
}

5. 네비게이션을 통해 화면 전환

제트팩 네비게이션을 통해 앱의 다양한 화면 간에 쉽게 전환할 수 있습니다. 네비게이션 구성 요소를 이용해 화면을 전환하는 방법을 알아보겠습니다.

5.1 Navigation 그래프 만들기

새롭게 Navigation 그래프 파일을 생성합니다. res/navigation/nav_graph.xml파일을 만들고 다음과 같이 구성합니다.

<?xml version="1.0" encoding="utf-8"?>
<navigation 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"
    app:startDestination="@id/firstFragment">

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.example.myapplication.FirstFragment"
        android:label="First Fragment"
        tools:layout="@layout/fragment_first">
    </fragment>

    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.myapplication.SecondFragment"
        android:label="Second Fragment"
        tools:layout="@layout/fragment_second">
    </fragment>

</navigation>

5.2 Fragment 클래스 생성하기

네비게이션을 구현하기 위해 Fragment 클래스를 두 개 추가합니다. 먼저 FirstFragment.java를 생성합니다.

package com.example.myapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;

public class FirstFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_first, container, false);
    }
}

그 다음으로 SecondFragment.java 파일을 생성합니다.

package com.example.myapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;

public class SecondFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_second, container, false);
    }
}

6. 결론

제트팩을 활용한 안드로이드 앱 개발에서는 UI 컴포넌트, 데이터 관리, 프래그먼트 네비게이션 등 다양한 기능들을 효율적으로 활용할 수 있습니다. 본 강좌에서는 자바를 사용하여 기본적인 화면을 구성하고, ViewModel 및 LiveData를 활용하여 상태 관리를 구현했습니다. 또한, 네비게이션 구성 요소를 통해 화면 전환을 쉽게 구현하는 방법도 알아보았습니다.

보다 복잡한 앱을 개발하기 위해서는 더 많은 구성 요소와 라이브러리를 활용할 수 있으며, 제트팩의 다양한 기능을 통해 코드의 재사용성과 유지보수성을 높일 수 있습니다. 계속해서 연습하고, 실제 프로젝트에 적용해보면서 경험을 쌓아 보세요.