Java에서 LiveData 및 ViewModel을 사용하는 앱 만들기

Android 아키텍처 구성 요소 사용

Unsplash에 Anders Jildén의 사진.

Android Jetpack과 함께 출시 된 다양한 도구 중에서 Android 아키텍처 구성 요소, LiveData 및 ViewModel이 특히 유용합니다. 저는 이러한 아키텍처 구성 요소를 Google Firestore와 통합하는 예가 거의 없다고 표현한 Ashton Jones 에 대한 응답으로이 튜토리얼을 작성하고 있습니다 .

이 자습서에서는 이러한 모든 요소가 상호 작용하여 Google 기술을 기반으로 백 엔드 (Firestore) 및 프런트 엔드 (Android 앱)가있는 완전한 기능의 앱을 만드는 방법을 배웁니다.

이 첫 번째 부분에서는 Android 프로젝트를 빌드하는 것으로 시작합니다. LiveData 및 ViewModel 사용을 설명하기 위해 쇼핑 식료품 목록을 시뮬레이션하는 앱을 만듭니다.

내 웹 사이트에서 시작 프로젝트 다운로드합니다 .

이것은 간단한 Android Java 프로젝트입니다. MainActivity.java파일과 해당 레이아웃 만 포함 됩니다. Gradle 동기화가 완료되면 앱을 실행하면 아래 이미지 1과 같은 HelloWorld 화면이 표시됩니다.

이미지 1 : 앱의 초기보기.

프로젝트의 아키텍처 설정

이 작업이 완료되면 앱의 폴더 구조를 만듭니다. 모바일 아키텍처는 널리 논의되지만 Android가 아키텍처 구성 요소를 도입 한 이후 MVVM을 가리키는 가이드 라인을 제공했습니다. 프로젝트의 첫 번째 부분에서는 View 및 ViewModel에 중점을 둡니다.

왼쪽 패널의 Android 프로젝트보기에서 두 개의 새 패키지를 만듭니다. 하나는 'View'이고 다른 하나는 'ViewModel'입니다. 그런 다음 MainActivity.javaView 패키지 내부로 드래그 하십시오. 결과 프로젝트 구조는 아래 이미지 2에 표시된 것과 유사해야합니다.

이미지 2 : View 및 ViewModel 패키지를 추가 한 후 결과 구조.

다음 단계는 ViewModel을 만드는 것입니다. ViewModel 패키지를 마우스 오른쪽 단추로 클릭하고 새로 작성> Java 클래스를 선택하십시오. 가급적이면 접미사 ViewModel과 함께 이름을 지정합니다 MainActivityViewModel.java. 이름을 . 이 두 파일을 사용하여 LiveData와 ViewModel을 모두 사용할 수 있습니다.

Unsplash에 Thomas Grillmair의 사진.

ViewModel 생성

ViewModel을 생성하여 시작하십시오. 가장 먼저해야 할 일은 Android 아키텍처 구성 요소 ViewModel 라이브러리를 확장하는 것 입니다. 클래스 정의는 다음과 같아야합니다.

public class MainActivityViewModel extends ViewModel {

import androidx.lifecycle.ViewModel;

보다 현실적인 시나리오에서는 "모델"패키지 (우리가 만들지 않은) 아래에 ShoppingItem 개체가 있고이 항목의 속성을 가져올 수 있지만 최소한의 예제를 만들려고합니다. MainActivityViewModel클래스 내부에 다음 코드 줄로 목록을 만듭니다 .

private MutableLiveData<List<String>> shoppingList;

LiveData를 비동기 적으로 가져 오기

프로젝트의 첫 번째 부분에서는 타이머를 사용하여 데이터의 비동기 호출을 시뮬레이션합니다. 가장 먼저해야 할 일은 목록을 검색 한 다음 shoppingList이전 단계에서 만든 변수에 추가하는 것 입니다. MainActivityViewModel.java클래스에 다음 함수를 추가하십시오 .

이 코드는 shoppingList이 비어 있는지 여부를 확인하고, 이 경우 새 개체를 만들고 여기에 쇼핑 목록을로드합니다.

목록을로드하려면 다른 기능이 필요합니다. 아래 getShoppingList()코드와 함께 아래에 추가하십시오 .

약간 길기 때문에 위의 코드를 별도로 검토해 보겠습니다.

  1. 핸들러를 만듭니다. 이 핸들러의 목적은 일정 시간 후에 실행되도록 함수에 코드를 보유하는 것입니다.
  2. 두 번째 매개 변수 (6 행)의 초 수만큼 실행을 지연하도록 핸들러에 지시합니다.
  3. 이 줄에서 타사 서비스 인 Firestore로 채워질 샘플 쇼핑 목록을 만듭니다.
  4. 셔플의 목적은 데이터가 언제라도 새로 고쳐 지는지 확인하는 것입니다. LiveData의 한 가지 중요한 측면은 다른 유형의 데이터와 달리 특정 작업이 발생할 때 (예 : 방향 변경이 발생할 때) 손실되지 않는다는 것입니다.
  5. 이 코드 줄은 "다운로드 된"(시뮬레이션 된) 데이터를의 로컬 객체에 할당합니다 MutableLiveData.
  6. 2 번 지점에서 언급했듯이 이것은 데이터가 "로드"되는 데 5k 밀리 초의 지연을 설정합니다.
Unsplash에 Drew Saurus의 사진.

위 단계를 수행 한 후 프로젝트에서 오류가 발생하면이 부분을 읽고 문제를 해결하십시오. 그렇지 않으면 다음 섹션으로 건너 뛸 수 있습니다.

이것이 가장 일반적인 문제입니다.

프로젝트는 Java 8로 설정되어야합니다.

에서 loadShoppingList()포인트 # 2, 당신은 우리가 (화살표를 알 수 있습니다 ->). 이를 람다 표현식이라고하며 Java 8에서만 지원됩니다.이 문제를 해결하려면 파일> 프로젝트 구조로 이동하여 소스 호환성 및 대상 호환성 필드에서 Java 1.8을 선택하십시오.

이미지 3 : 프로젝트를 Java 1.8로 설정.

잘못된 종속성 가져 오기

Android와 Java에서는 기능이 서로 다른 유사한 종속성을 갖는 것이 일반적입니다. Android Studio가 종속성을 자동으로 가져올 때 때때로 잘못된 종속성을 가져옵니다. 수입품이 다음과 같은지 확인하십시오.

여전히 문제가있는 경우 아래 ViewModel 코드를 살펴보십시오.

이미지 4 : 전체 ViewModel 클래스.
Unsplash에 Matt Milton의 사진.

앱 테스트

위의 코드를 추가하면 앱에 변경 사항이 없어야합니다. 성공적으로 컴파일되고 실행되지만 HelloWorld 빈 화면이 계속 표시됩니다. 이는 Model과 View 간의 통신 인 ViewModel 만 구현했지만 여전히 View 자체에 바인딩하지 않았기 때문입니다.

이미지 5 : ViewModel을 추가 한 후의 앱.

ViewModel에보기 연결

위에서 언급했듯이 이제 ViewModel에서로드 된 데이터가 올바르게 표시되도록 View로 작업 할 것입니다.

보기의 XML 구성

activity_main.xml앱> 해상도> 레이아웃에있는 열기 . "Hello World"텍스트보기를 제거하고 아래 코드를 추가합니다.

이 코드에는 두 개의 XML 항목이 있습니다.

  1. 진행률 표시 줄은 일반적으로 "스피너"로 알려진 것으로, 정보로드가 지연되는 동안 화면에 표시됩니다 (이미 코딩 한 항목의 경우 5k 밀리 초).
  2. 로드 된 쇼핑 목록 항목을 표시하는 ListView.
이미지 6 : 진행률 표시 줄이 회전하는 화면.

Android 수명주기 종속성 추가

ViewModel이 작동하려면 수명주기 확장 종속성을 build.gradle(Module: app)다음에 추가해야합니다 .

implementation 'androidx.lifecycle:lifecycle-extensions:2.0.0'

데이터 표시

이제를 열고 MainActivity.javaView 폴더로 이동했습니다. 줄 onCreate아래 의 메서드에 다음 setContentView()코드를 추가합니다.

다시 한 번 각 줄을 검토해 보겠습니다.

  1. ListView를 초기화하고 XML에서 가져옵니다.
  2. 진행률 표시 줄도 마찬가지입니다. 초기화하고 XML에서보기를 가져옵니다. 그런 다음 데이터가로드되는 동안 표시되도록 표시되도록 설정합니다.
  3. 다음 ViewModelProvider으로 Android Jetpack 에서 제공하는을 사용하여 ViewModel을 초기화합니다 . 즉, ViewModelProviderViewModel을 저장하고 필요한 모든 클래스가 정보에 액세스 할 수 있도록 앱 전체에서 사용할 수 있도록하는 클래스입니다.
  4. ViewModel이 있으면 getShoppingList()메서드 를 호출합니다 . 기억 하시겠지만이 메서드는 비동기식입니다. 5 초가 걸리고 데이터가 반환됩니다. 그것이 당신이 반응을 관찰하는 이유입니다.
  5. 쇼핑 목록을 받으면 어레이 어댑터를 만들어 목록보기를 만듭니다. 당신이 사용하게 될 layout.simple_list_item_1안드로이드 OS의 일부의 ListView에 대한 사전 제공 XML은 .
  6. 그런 다음 이전 단계에서 만든 어댑터를 ListView에 할당합니다.
  7. 마지막으로 진행률보기를 숨기고 데이터를 표시합니다.

이 코드가 작동하려면 일부 가져 오기가 필요합니다. 일부는 Android Studio에서 자동으로 수행되며 나머지는 수동으로 추가해야합니다. MainActivity.java가져야 하는 모든 수입품은 다음과 같습니다 .

이 모든 것이 작동하면 앱을 테스트하고 5 초 동안 기다린 후 목록이 나타나는 것을 볼 수 있습니다.

이미지 7 : 화면에 표시된 쇼핑 목록.

결론

큰! 이제 LiveData 및 ViewModel을 구현하는 앱이 있습니다. 다음 부분에서는 데이터가 원격 소스에서로드되도록 Firestore를이 앱에 통합합니다. 프로젝트가 완료되었을 때 어떻게 작동하는지 확인하려면 내 웹 사이트에서 완성 된 프로젝트 다운로드 할 수 있습니다 .

궁금한 점이 있으시면 언제든지 의견을 남겨 주시면 최대한 빨리 답변 드리겠습니다.

다음 시간까지 읽어 주셔서 감사합니다!

Suggested posts

Express.js 시작하기

Express.js 시작하기

Express는 웹 및 모바일 앱을 만드는 경험을 즐겁게 만드는 기능 세트가 포함 된 Node.js 프레임 워크입니다.

Jetpack Compose로 IntelliJ IDEA의 스플래시 화면 모방

Jetpack Compose로 IntelliJ IDEA의 스플래시 화면 모방

IntelliJ IDEA의 최신 버전 (이 출판 당시 2021.1)에는 아래와 같이 다양한 색상의 모양을 포함하는 그리드를 기반으로하는 멋진 스플래시 화면이 있습니다.이 게시물의 목표는이 패턴을 모방 한 Jetpack Compose 컴포저 블을 구현하는 것입니다.

Related posts

Kotlin을 사용하여 Android RecyclerView 항목을 다시 정렬하려면 드래그하세요.

Android 앱에서 멋진 맞춤형 목록 작성

Kotlin을 사용하여 Android RecyclerView 항목을 다시 정렬하려면 드래그하세요.

이 기사에서는 항목을 다시 정렬 할 수있는 기능을 제공하는 RecyclerView를 구현하는 방법에 대해 알아 봅니다. 타사 라이브러리를 사용하지 않고이 작업을 수행 할 것입니다.

Google Play 인앱 리뷰

Google Play 인앱 리뷰

Google Play Core 라이브러리는 인앱 리뷰에 대한 지원을 추가하여 사용자가 앱이나 게임을 떠나지 않고도 평점과 리뷰를 제출할 수 있도록합니다. 이 문서는 메모장 앱 연구 사례를 통해 Android에서이 기능을 구현하는 방법과 Google Play 스토어에서 사용자의 가시성에 미치는 영향을 보여줍니다.

Android에서 나만의 AR 애플리케이션 만들기

Android에서 나만의 AR 애플리케이션 만들기

이 기사에서는 카메라에서 얼굴에 효과를주는 Android 애플리케이션을 실시간으로 작성하는 방법을 설명합니다. 여기서는 카메라 작업, 얼굴 찾기, 얼굴의 포인트 찾기 및 결과 그리기 등 모든 핵심 사항을 살펴 보겠습니다.

Gradle 종속성 : 메시 🤯

Gradle 종속성을 현명하게 관리하세요 !!

Gradle 종속성 : 메시 🤯

종속성이 증가 할 때마다 Gradle 파일을 관리하기가 어려워집니다. 이 블로그에서는 종속성을 다른 파일로 이동하고 유사한 종속성을 그룹화하여 관리하려고합니다.