LiveData, MVVM, DataBinding, RecyclerView 예제

참고자료

developer.android.com/topic/libraries/architecture

androidwave.com/android-data-binding-recyclerview/

 

예제설계

• 앱 아키텍처는 MVVM을 따릅니다.
• 비동기적으로 수행되어 변경되는 데이타는 LiveData를 이용합니다.
• DataBinding을 이용해 소스코드를 간결하게 합니다.
• RecyclerView를 이용하여 리스트를 처리합니다.

위 설계 목표를 가지고 아래와 같은 예제를 직접 만들어보았습니다.

다수개의 항목들이 비동기적으로 로딩되고 로딩되는 항목들의 상태정보를 리스트로 보여주도록 해보겠습니다.

 

* 간단하므로 굳이 RecyclerView나 LiveData 등이 필요하지 않지만, 스터디 목적으로 끼워 맞춰보았습니다.

---

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private MainViewModel mainViewModel;
    private ItemAdapter itemAdapter;
    public ObservableBoolean isReadyToStart = new ObservableBoolean();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMainBinding activityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        activityMainBinding.setActivity(this);

        RecyclerView recyclerView = activityMainBinding.viewItems;
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setHasFixedSize(true);
        itemAdapter = new ItemAdapter();
        recyclerView.setAdapter(itemAdapter);

        mainViewModel = new ViewModelProvider(this).get(MainViewModel.class);
        mainViewModel.getMutableLiveDataItemsList().observe(this, (Observer<ArrayList<Item>>) items -> {
            itemAdapter.setItemsList((ArrayList<Item>) items);
            isReadyToStart.set(mainViewModel.isReadyToStart());
        });
    }

    public void onStartButtonClicked(View view) {
        mainViewModel.loadItems();
    }
}

• MVVM의 View에 속하는 구현입니다. ViewModel인 mainViewModel만을 참조하므로 모듈화가 되어 있습니다.
• DataBinding을 이용하여 activity_main.xml layout과 연결되어 있기 때문에 소스가 간결합니다. 대신, activity_main.xml과 함께 살펴봐야 상세한 구현 내용을 파악할 수 있습니다.
• LiveData로 제공되는 항목들의 데이타 변화를 감지하여 그에 따른 동작을 수행합니다. 변화가 감지되면 RecyclerView의 항목을 재설정하고 시작버튼의 활성/비활성화를 설정합니다.
• 시작버튼이 눌리면 항목들의 로딩을 시작합니다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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"
    >
    <data>
        <variable
            name="activity"
            type="com.jjjh.aacsample.MainActivity"/>
    </data>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        tools:showIn="@layout/activity_main">

        <Button
            android:id="@+id/buttonStart"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:enabled="@{activity.isReadyToStart}"
            android:onClick="@{activity::onStartButtonClicked}"
            android:padding="8dp"
            android:text="Start"
            tools:ignore="MissingConstraints" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/viewItems"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:padding="4dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/buttonStart"
            app:layout_constraintVertical_bias="0.0" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

• <data>...</data>를 이용하여 MainActivity와의 DataBinding을 표시합니다.
• 버튼의 android:enabled를 MainActivity의 isReadyToStart와 바인딩하여 isReadyToStart가 set되는 값에 따라 버튼의 활성/비활성 상태가 변경됩니다.
• 버튼의 android:onClick을 MainActivity의 onStartButtonClicked로 바인딩하여서 버튼이 클릭될 때마다 MainActivity의 onStartButtonClicked가 수행됩니다.

MainViewModel.java

public class MainViewModel extends AndroidViewModel {
    private final ItemRepository itemRepository;

    public MainViewModel(@NonNull Application application) {
        super(application);
        itemRepository = new ItemRepository();
    }

    public LiveData<ArrayList<Item>> getMutableLiveDataItemsList() {
        return itemRepository.getMutableLiveDataItemsList();
    }

    public void loadItems() {
        itemRepository.loadItems();
    }

    public boolean isReadyToStart() {
        return itemRepository.isReadyToStart();
    }
}

• MVVM의 ViewModel에 해당합니다. ItemRepository만을 참조하도록 모듈화되어 있습니다.

ItemRepository.java

public class ItemRepository implements Item.OnStatusChangeListener {
    private final ArrayList<Item> items = new ArrayList<>();
    private final MutableLiveData<ArrayList<Item>> mutableLiveDataItemsList = new MutableLiveData<>();

    public ItemRepository() {
        items.clear();
        items.add(new Item(this, "Item 1", "READY", 2));
        items.add(new Item(this, "Item 2", "READY", 5));
        items.add(new Item(this, "Item 3", "READY", 8));
        notifyItemsChanged();
    }

    @Override
    public void onStatusChanged(Item item, String status) {
        notifyItemsChanged();
    }

    public MutableLiveData<ArrayList<Item>> getMutableLiveDataItemsList() {
        return mutableLiveDataItemsList;
    }

    public void loadItems() {
        for( Item item : items ) {
            item.load();
        }
    }

    public boolean isReadyToStart() {
        for( Item item : items ) {
            if ( "DOING".equals(item.getStatus()) ) {
                return false;
            }
        }
        return true;
    }

    private void notifyItemsChanged() {
        if ( Looper.myLooper() == Looper.getMainLooper() ) {
            mutableLiveDataItemsList.setValue(items);
        } else {
            mutableLiveDataItemsList.postValue(items);
        }
    }
}

• 초기 항목들로 3개의 항목을 생성했고 각각 2초, 5초, 8초후 로딩작업이 끝나는 것으로 설정했고 로딩작업이 끝나면 onStatusChanged가 콜백되도록 구성했습니다.
• 많은 예제에서 이 부분은 Retrofit이나 Room의 콜백을 사용합니다만 예제를 간단하게 하기 위해 실제 로딩없이 지연시간만 설정하였습니다.
• 데이타의 중복 없이 예제 앱 전체에서 유일한 데이타가 ArrayList<Item> items 입니다.
• MVVM의 Model에 해당하는 부분입니다. 유일한 데이타를 LiveData로 감쌌고 이를 View에서 observe하여 데이타의 변화에 대한 처리를 수행하기 때문에 View에 대한 고민없이 데이타만을 신경쓰면 됩니다.
• 상태는 "READY", "DOING", "DONE"으로 설정했습니다.

Item.java

public class Item {
    private String title;
    private String status;
    private final OnStatusChangeListener listener;
    private final int fakeLoadingTimeSeconds;

    public interface OnStatusChangeListener {
        void onStatusChanged(Item item, String status);
    }

    public Item(OnStatusChangeListener listener, String title, String status, int fakeLoadingTimeSeconds) {
        this.listener = listener;
        this.title = title;
        this.status = status;
        this.fakeLoadingTimeSeconds = fakeLoadingTimeSeconds;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
        listener.onStatusChanged(this, status);
    }

    @BindingAdapter({ "statusIcon" })
    public static void loadStatusIcon(ImageView imageView, String status) {
        if ("DONE".equals(status)) {
            imageView.setImageResource(R.drawable.ic_baseline_done_24);
        } else if ("DOING".equals(status)) {
            imageView.setImageResource(R.drawable.ic_baseline_loop_24);
        } else {
            imageView.setImageResource(R.drawable.ic_baseline_block_24);
        }
    }

    void load() {
        setStatus("DOING");
        new Thread(() -> {
            try {
                Thread.sleep(fakeLoadingTimeSeconds * 1000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            setStatus("DONE");
        }).start();
    }
}

• 상태가 바뀌면 onStatusChanged 콜백을 호출해줍니다. 콜백이 되면 ItemRepository에서는 데이타가 변경되었다는 것을 LiveData set/post 하여 observer에게 알려줍니다.
• RecyclerView를 구성하는 각 항목에 대한 layout인 list_item.xml 과 DataBinding되어 있기 때문에 Item의 내부 값이 바뀔 때 마다 UI가 자동으로 변경됩니다.

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:bind="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <data>
        <variable
            name="item"
            type="com.jjjh.aacsample.model.Item"/>
    </data>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true">

        <androidx.cardview.widget.CardView
            android:id="@+id/cardViewItem"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:elevation="3dp"
            card_view:cardCornerRadius="1dp">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <ImageView
                    android:id="@+id/imageViewStatus"
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:layout_marginBottom="8dp"
                    android:layout_marginStart="8dp"
                    android:layout_marginTop="8dp"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:scaleType="fitXY"
                    bind:statusIcon="@{item.status}"
                    bind:layout_constraintBottom_toBottomOf="parent"
                    bind:layout_constraintStart_toStartOf="parent"
                    bind:layout_constraintTop_toTopOf="parent"
                    android:layout_marginLeft="8dp"/>

                <TextView
                    android:id="@+id/textViewTitle"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/imageViewStatus"
                    android:layout_marginEnd="8dp"
                    android:layout_marginStart="8dp"
                    android:layout_marginTop="8dp"
                    android:padding="4dp"
                    android:text="@{item.title}"
                    android:textSize="18sp"
                    bind:layout_constraintEnd_toEndOf="parent"
                    bind:layout_constraintStart_toEndOf="@+id/imageViewStatus"
                    bind:layout_constraintTop_toTopOf="parent"/>
            </androidx.constraintlayout.widget.ConstraintLayout>
        </androidx.cardview.widget.CardView>
    </LinearLayout>
</layout>

• RecyclerView를 구성하는 리스트 항목 하나에 대한 layout입니다.
• <data>...</data>를 이용하여 Item과의 DataBinding을 표시합니다.
• Item의 title과 status가 변경되면 그에 따라 변경된 ImageView와 TextView가 표시됩니다.

ItemAdapter.java

public class ItemAdapter extends RecyclerView.Adapter<ItemAdapter.ItemViewHolder> {
    private ArrayList<Item> items;

    @NonNull
    @Override
    public ItemViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        ListItemBinding listItemBinding =
                DataBindingUtil.inflate(LayoutInflater.from(viewGroup.getContext()),
                        R.layout.list_item, viewGroup, false);
        return new ItemViewHolder(listItemBinding);
    }

    @Override
    public void onBindViewHolder(@NonNull ItemViewHolder itemViewHolder, int i) {
        Item currentItem = items.get(i);
        itemViewHolder.listItemBinding.setItem(currentItem);
    }

    @Override
    public int getItemCount() {
        if ( items != null ) {
            return items.size();
        } else {
            return 0;
        }
    }

    public void setItemsList(ArrayList<Item> items) {
        this.items = items;
        notifyDataSetChanged();
    }

    static class ItemViewHolder extends RecyclerView.ViewHolder {
        private final ListItemBinding listItemBinding;
        public ItemViewHolder(@NonNull ListItemBinding listItemBinding) {
            super(listItemBinding.getRoot());
            this.listItemBinding = listItemBinding;
        }
    }
}

• RecyclerView adapter입니다. MainActivity에서 데이타의 변화를 observe하고 있다가 변화가 감지되면 setItemsList가 호출되어 RecyclerView가 업데이트됩니다.
• 데이타가 많은 경우 notifyDataSetChanged로 인한 비효율적인 동작이 예상되어 DiffUtil 적용이 필요해보입니다.

build.gradle (Module)

android {
    ...
    dataBinding {
        enabled = true
    }
}

dependencies {
    ...
    implementation "androidx.lifecycle:lifecycle-extensions:2.2.0"
}

• DataBinding을 사용하기 위해 android 부분에 dataBinding을 enable 하였습니다.
• ViewModel을 사용하기 위해 dependencies 부분에 관련 부분을 추가하였습니다.