Solution 해결 과정
화면의 레이아웃을 구성하는 방법을 학습하기 위해서 기존에 많이 사용하는 애플리케이션 하나를 선정하여 해당 애플리케이션의 뷰와 레이아웃을 정의하였다.
*본 게시글은 학습을 위한 글으로 내용 상 오류가 존재할 수 있습니다.
- To Do Mate 앱을 선정
뷰 정의
먼저 뷰를 정의해보았는데, 다음으로 화면 좌측 상단에서부터 확인을 해보도록 한다.
프로필이 ImageView(청록색)로 나타나 있는 것을 확인할 수 있다.
바로 아래 작은 글씨로 나타난 사용자 이름은 TextView(보라색)로 나타나 있는데 사용자 이름의 첫 글자가 이미지 뷰 안에 텍스트 뷰로 겹쳐져 있는 모습이다.
프로필을 기준으로 아래쪽에는 어플의 로고와 사용자의 이름, 자기소개가 각각 ImageView와 TextView로 나타난다.
이때, 사용자의 이름과 자기소개는 클릭을 통해 다른 화면으로 넘어가므로 setOnClickListener를 설정해 주어야 한다.(클릭 이벤트는 형광펜으로 표시)
사용자의 이름과 자기소개를 기준으로 아래쪽에는 날짜와 완료된 체크리스트의 개수가 TextView, 체크 표시가 ImageView로 나타나 있으며, 오른쪽에는 스티커를 부착할 수 있는 ImageButton(파란색)과 그 아래 달력을 넘길 수 있는 이미지 버튼 2개가(<, >) 존재한다.
이 이미지 버튼들에도 클릭 이벤트를 부여한다.
그 아래에는 달력을 볼 수 있는 CalendarView가 존재하며, 캘린더 뷰 아래에는 '할 일'과 '일기' 이미지 버튼이 각각 존재한다.
다음으로는 화면 우측 상단을 확인해 보자.
화면 가장 위에는 3개의 ImageButton과 그 아래에는 'Feed'라는 TextView가 존재하며, 그 아래에는 크게 ScrollView가 나타난다.
스크롤 뷰 내부를 살펴보면 Button(회색)과 RecyclerView(진한 회색)가 반복적으로 나타난다. 이때, 버튼에는 사용자가 작성한 텍스트와 이미지가 함께 출력이 돼야 하므로 각각 버튼의 drawableLeft, text, drawableRight 속성들을 부여한다.
리사이클러뷰로 설정을 해준 이유는 할 일 목록을 길게 눌러서 위아래로 드래그하면 목록 전체가 움직이기 때문에 리사이클러뷰가 적합할 것 같다고 생각하였다.
(이외에도 목록을 나열할 때 리사이클러뷰가 효과적이기 때문에 리사이클러뷰를 사용한다고 판단하였다.)
리사이클러뷰 내부, 각각의 아이템 뷰는 CheckBox(연보라색)와 EditText(하늘색), ImageButton 그리고 TextView로 구성이 되어있다. 이때, EditText와 ImageButton에는 클릭 이벤트를 부여한다.
'데베응 문제 풀기'와 같은 글자를 텍스트 뷰가 아니라 에디트 텍스트로 지정한 이유는 상단의 'STUDY'라고 적힌 버튼을 누르면 리사이클러뷰에 바로 할 일을 적을 수 있는 목록이 나타나기 때문이다.
레이아웃 정의
다음으로는 레이아웃을 정의해보았다. 전체 레이아웃은 ConstrainLayout으로 나타내었고 그 안에 크게 4개의 레이아웃이 match_parent 형태로 존재한다고 생각하였다. 이에 따른 각각의 레이아웃을 화면 상단에서부터 확인을 해보도록 한다.
가장 상단의 영역은 내부에 이미지 버튼 3개가 같은 크기로 연달아서 출력되기 때문에 LinearLayout이나 ConstrainLayout을 쓰면 좋을 것 같다고 생각했다.
그 아래 좌측 부분은 여러 View들이 다양한 크기로 존재하기 때문에 ConstrainLayout으로 나타냈으며, 사용자 프로필은 이미지 뷰와 텍스트 뷰가 겹쳐져서 존재하므로 FrameLayout을 사용하였다.
우측 부분의 상단은 'Feed'라는 뷰 하나를 담고 있어서 여러 레이아웃 중 ConstrainLayout을 사용하였고, 그 아래 레이아웃은 여러 View들이 다양한 크기로 존재하기 때문에 ConstrainLayout으로 나타냈는다.
(수직 방향인 LinearLayout을 사용해도 될 것 같다.)
아이템 목록은 외부와 내부 모두 LinearLayout/ConstrainLayout으로 구성을 하였다.
