위에 빨간색으로 표시한 부분을 보면 이벤트 관련 UI가 나온다. 간단히 보면 리사이클러뷰에 GridLayoutManager의 SpanCount를 5로 설정해서 보여주는 것 같다.
또한, 안의 아이템은 이미지뷰와 텍스트뷰가 각각 1개씩 있는데 가장 겉을 감싸는 부모 레이아웃안에 이미지뷰와 텍스트뷰를 넣고 부모 레이아웃에 layout_marginBottom을 10dp 정도 주고 부모 레이아웃의 layout_height를 wrap_content로 준 후 하단 TextView의 layout_marginTop을 이미지 높이만큼 준 것 같다.
또한 리사이클러뷰의 양쪽 사이드에 margin을 설정해줬다. 정리해보자면 다음과 같다.
1. 준비물
- RecyclerView, RecyclerView 안의 Item은 ImageView, TextView, 기타 등등
2. 요건
- 리스트 한 줄 당 5개씩 노출
위 1번과 2번을 보게 되면 아주 간단하다고 느낄 수 있지만 처음하는 분들이나 신입 개발자 분들에겐 부담이 될 수도 있고 여러 시행착오가 생길 수 있다. 또한, 저 UI의 디자인을 받았을 때 디바이스에 따라서 동일한 비율로 나올 수 있도록 해야 현업 또는 검수 담당자 분이 검수를 통과시킬 수 있다.
다음 게시물에서 xml파일과 어떻게 UI를 노출시켜야 하는지 알아보자.
※ 해당 게시물의 이미지는 앱을 보고 캡처했습니다. 저작권 문제가 있다면 다른 이미지로 대체하겠습니다. 직접 소스를 보고 하는 것이 아닌 테스트로 만들어 보는 것이기에 실제와 많이 다를 수 있습니다. 또한, 제 나름대로 변형도 시킬 수 있는 코드로 만들었습니다. 질문과 피드백은 언제나 환영입니다. 감사합니다.
댓글