란희의 바깥드로이드 모험기

'버튼을 누르면 서버에서 랜덤 텍스트를 받아와서 화면에 뿌리는' 앱이다.

구글에서 적극적으로 권장하는 AAC를 이용한 MVVM 패턴을 구현하였다.

AAC는 뭐고 MVVM은 무엇인가!

....는 다른 블로그에서 열심히 설명해주니 그림 한 장으로 땡치겠다.

▼AAC를 이용한 아키텍처 도식화

아.. 위의 그림에는 Observer를 통해 LiveData를 관찰(구독)하라고 되어있는데

나는 하는 김에 DataBinding으로 대체하였다.

위의 방식까지만 하고 싶으면 DataBinding은 하지 말고 액티비티에 아래처럼 해 주면 된다.

viewModel.fact.observe(new Observer<String>() {
    void onChange(String s) {
       //갱신 시 할 작업
    }
}

findViewById(R.id.button).setOnClickListener(new OnClickListener() {
    void onClick(View v) {
        viewModel.getData();
    }
}

작동 방식은 사실 MVP랑 뭐가 다른지.. 잘 모르겠다 ㅜ.ㅜ

MVP는 '야 해줘 => 야 해줘 => 했어 => 했어 => ㅇㅋ'였고

MVVM은 '야 해줘 => 야 해줘 => (다했다) => ㅇㅇ봤음 => ㅇㅇ봤음' 인 것 같기도..?

전체 소스는 아래 참고

https://github.com/YelanJeon/PatternTest/tree/aac_mvvm

사실 이게 MVVM 패턴에 맞게 개발한건지 모르겠다.

MVVM 패턴의 ViewModel과 AAC의 ViewModel은 다른 거라고 들었기 때문이다.

음 좀 더 공부해서 pure MVVM을 구현하도록 해야겠다 ㅜㅜ

이번에는 MVP 패턴을 구현한 예제를 가지고 왔다.

MVP가 뭐냐!

...는거는 다른 블로그에도 많으니 나는 생략하기로 함.

예제는 '버튼을 누르면 서버에서 랜덤한 텍스트를 받아서 화면에 뿌려주는' 간단한 앱이다.

JAVA 언어로 되어있고 DataBinding이나 ViewBinding은 사용하지 않았다!

전체 소스는 아래 링크 참조!

https://github.com/YelanJeon/PatternTest/tree/mvp

MVP 1번이 있고 2번이 있는데,

1번 방식으로도 할 수 있고 (모델에서 서버 통신)

2번 방식으로도 할 수 있다 (프레젠터에서 서버 통신)

MVP를 예를 들자면...

뷰 : 야 뭐 해줘

프레젠터 : ㅇㅇ.. 모델아 이거 해

모델 : 했어

프레젠터 : 뷰야 여기

뷰 : ㄳㄳ

이런 식이라고 볼 수 있다고...

추가로 궁금한 점 있으면 댓글 달아주세요 :)

페이징3 기본 기능을 구현했다.

한 번에 열 개씩 String 리스트를 불러와서 화면에 리스트로 뿌려주는 프로그램이다.

세 번 따라해보니까 이제 뭐가 뭔지 감이 온다.

근데 아직 혼자서는 못하겠음.. ㅜ-ㅜ

https://github.com/YelanJeon/Paging3Study.git

LoadStateAdapter를 구현하고, 맨 처음 데이터를 불러왔을 때 실패하면 Empty View를 보여주도록 코드를 추가하였다.

참고 링크 

https://leveloper.tistory.com/202

https://leveloper.tistory.com/207

이번에 RecyclerView를 쓸 때 StaggeredGridLayoutManager를 썼는데

한 쪽으로만 몰리는 이상한 현상이 발생하였다.

알고보니 아이템 뷰로 쓰는 뷰의 크기가 match_parent, match_parent로 설정되어있어서 그런 것이었다.

난 카드뷰 안에 이미지 뷰가 들어있는 방식이고, 그 이미지 뷰의 가로 세로 크기만큼 카드뷰 크기가 결정되게 되어있었는데

카드뷰 - wrap_parent, wrap_parent

이미지뷰 - match_parent, match_parent

이렇게 되어있어서 결과적으로는 둘 다 match_parent로 된 거나 다름없이 된 것..

이미지를 웹에서 불러온 뒤 이미지뷰에 넣고

이미지 뷰의 layoutParams의 width와 height를 불러온 이미지의 width와 height로 설정해주니 

정상적으로 나왔다.