[TIL] Android 앱 개발 입문 : UI 클론 코딩 1

✏231217 일요일 TIL(Today I learned) 오늘 배운 것

📖당근마켓 UI 클론 코딩 1

[코드 전문은 Android_ch3_CloneUI[branch:CloneUI-1](클릭 시 연결) 깃허브 참조 ]

• 당근마켓 UI 클론 코딩.. 이라기엔 민망하게도 당근마켓의 "홈" 페이지 한장만 겨우 카피했다. 그것도 일단 UI 코딩이라는 핑계로 페이지가 넘어가거나 각 버튼의 기능들에 대해선 전혀 관여하지 않고 오로지 보여주는 것만 비슷하게 하는데에 초점을 맞췄다.

• 큰틀은 ConstraintLayout을 그대로 사용하고, 그 안에 Toolbar, ScrollView, BottomNavigation이 순서대로 나오도록 했다.

1. Toolbar는 activity_main에 바로 적었는데, Material Design(App bars: top)을 참고하여 가져온 코드를 베이스로, res>menu에 menu_toolbar.xml을 만들어서 연결해 주었다. menu_toolbar안에는 검색과 알림에 대한 item이 각각 들어있어서 그에 관한 아이콘들이 보여지도록 했다. 마지막으로, navigationIcon(당근마켓에서 ㅇㅇ동 선언되어있는 부분)을 선언해서 앱바의 맨 앞에 누르면 이벤트를 발생시킬 수 있는 아이콘을 추가해주었다.

2. 툴바 밑에는 중고거래 할 물품들이 주르륵 나올 수 있도록 ScrollView를 선언해주었다.
   스크롤뷰 안에는 전체적으로 LinearLayout으로 감싸서 거래목록들이 수직 정렬되어 나올 수 있도록 선언해주었다.

   2.1 상단 부분에는, LinearLayout을 한 번 더 선언해서 다른 상세페이지로 넘어갈 수 있는 버튼들을 수평정렬될 수 있게 만들어주었다. chips 대신 그냥 버튼으로 만들어준 이유는, 당근마켓 안에서도 다른 상세 페이지로 넘어가는 역할만 하고 필터 등의 역할은 없는 것 같아서 그냥 버튼으로 만들었다. 버튼 안에는 전체메뉴로 넘어가는 맨 처음의 메뉴버튼만 아이콘 단독으로 나올 수 있도록 만들어주고, 나머지는 아이콘과 텍스트가 같이 나오도록 android:drawableStart(텍스트를 기준으로 시작 위치에 이미지 출력)와 android:text를 같이 선언해주었다.

   2.2 그 밑에는 본격적으로 거래 물품 목록이 나오도록 layout_item.xml을 include로 연결해주었다. 지금은 끌어올 데이터가 없기 때문에 일단, layout_item.xml을 따로 만들어서 constraintlayout을 사용하여 거래물품의 (ImageView) 이미지와 (TextView) 글 제목, 동네와 작성일자, 가격이 나오도록 위치를 조정해주었다. 여기서 ImageView에는 모서리가 둥글게 나올 수 있도록 drawable에 iv_radius.xml라는 이름으로 모서리를 둥글게 만드는 이미지를 생성하여 background로 연결해주고, android:clipToOutline="true"을 선언해줬다. 각 텍스트에도 강조의 대비를 위하여 textSize와 textColor, textStyle등을 조정해주었다.

3. 스크롤뷰 밑에는 따로 만들어준 layout_bottom.xml을 include로 연결해주었는데,

   3.1 툴바와 마찬가지로 Material Design(Bottom navigation)을 베이스로, ConstraintLayout을 통해 BottomNavigationView이 하단에 자리잡을 수 있도록 app:layout_constraintBottom_toBottomOf="parent"을 맞춰준 후, res>menu에 menu_navigation.xml을 만들어서 각 5개의 메뉴들에 맞춰 id와 icon,title을 선언해주었다. 여기서 선언한 icon과 title은 layout_bottom.xml에 돌아와서 BottomNavigationView부분에 app:labelVisibilityMode="labeled"를 적용하면 아이콘과 타이틀텍스트 두개가 동시에 보여질 수 있다.

   3.2 플로팅버튼도 만들어주었다. 역시 Material Design(Buttons: floating action button)을 참고하였고, 다만 내가 사용하는 Material은 3버전이라서 플로잍버튼이 동그랗지않고 둥근사각형 모양이였기 때문에, res>values>themes에 있는 themes.xml에 동그란 모양을 나타낼 수 있는 CornerCut 스타일을 만들어서 app:shapeAppearanceOverlay로 연결해 주었다. backgroundTint로 당근마켓의 주황색을 설정해주고, android:foreground을 사용해서 + 모양의 아이콘이 보일 수 있도록 연결해주었다.

   
   

📖UI 클론 코딩 1의 발생 문제 및 해결과 느낀점

• 솔직히 그냥 배웠던 것들을 쓰는데에는 별 문제가 없었다. 스크롤뷰도 원래 존재는 알았는데, 수업시간에 튜터님이 직접 시연도 해주셔서 include로 연결하는 것도 딱히 어렵지 않고.. 워낙 UI가 심플하면서도 유용하기로 소문난 당근마켓이라 별로 손댈 것도 없었다.

• 문제는.. 앱바였다. 상단도 하단도 플로팅버튼..도 문제였다. MaterialDesign을 참고하라고 링크를 걸어주신건 봤는데, 맨 처음엔 온통 영어로 된게 뭔가.. 싶어서 깡으로 구글링을 하기 시작했었다.. ㅎㅎ.. 근데 그 구글링한것도 다 MaterialDesign 바탕이라고 써있기도하고, 다른 튜터님이 직접 MaterialDesign보면서 천천히 해보는 수밖에 없다고 해주셔서 그때서야 얘가 뭔지 깨닫고 검색해서.. 제시해준.. 코드를...그대로 따..왔다..ㅎㅎ 그래서 솔직히 지금도 해결못한 문제점들이 꽤 많은데

  1. navigationIcon에 ㅇㅇ동(expandmore이미지아이콘) 표시 되어있는거. 그거.. 글씨랑 아이콘까지 어떻게 동시에 가져왔을까? ㅇㅇ동은 아무래도 직접 사용자의 값을 가져와야하니까 이미지로 퉁칠수 없었을 것같은데.. 버튼과는 다르게 navigationIcon하나만 사용된거라 아예 다른..방법을 쓴것일까? 싶다가도 다른 방법이 뭔지 어떻게 검색해야 나오는지도 모르고 Material디자인도 딱히 그것까진 말해주지 않은 것 같아서 결국 그냥.. 아이콘만 걸어놨다.

  2. layout_item.xml에서 ImageView의 모서리를 둥글게 깎는거.. 그것도 튜터님이 수업시간에 시연해준 방법을 따라하니까 아주 잘~ 되었다. 코드디자인화면에서만. ㅎㅎ ㅎㅎ ㅎㅎ 에뮬에서는 아주 네모지게 아주~ 각지게 정석적인 90도로 보여져서.. 폭풍 써치를 해본 결과! 선택한 이미지가 이미지뷰에 꽉 찰 수 있도록 android:scaleType="fitXY"를 썼는데, 이미지가 background의 상단에서.. 코너를 가려버려서 이미지자체의 네모가 그대로 출력이 된다고 했었나? 여튼 그래서 일단 fitXY를 제거 하고 다른 scaleType을 전부 시도해봤지만.. 실패하고 그냥 ImageView안에서 지 멋대로 맞춰서 나오도록 방치했다...

  3. 내가 item_layout으로 만든 거래물품 목록. 거기엔 이미지랑 텍스트 말고 사실 BottomSheetDialog를 부를 수있는 옵션버튼과, 관심이나 채팅이 있을경우만! 보여지는 관심아이콘과 채팅아이콘도 있었는데.. 일단 그 수직 점3개로 이루어진 옵션 아이콘만이라도 가져보려고 menu를 만들어서 걸어봤지만, layout에 걸었을 때 오류는 안나도 아이콘을 어디에서도 확인할 수가 없어서 포기..하고.. 관심과 채팅아이콘도 일단 조건자체가 성립될 수 없는 상황이기에 외면하였다..

  4. 그리고 bottomNavigation이거 사실 클릭하면 이미지 자체가 fill이미지로 변할 수 있게끔 만들었어야 진짜인데.. 그럴려면 fill아이콘도 있어야하고.. MainActivity에서 따로 조절해줘야한다고 해서 시간..상의?문제로 냅뒀다. 솔직히 말하면, res>values>themes의 themes.xml의 Base application theme Style이 원래는 parent="Theme.AppCompat.Light.NoActionBar"가 아니고 parent="Theme.Material3.DayNight.NoActionBar"로 되어있었는데 위에서도 말헀다싶이 material3에서는 플로팅버튼도 그렇고 뭔가 디자인이 개선되었다면 개선된 더 이쁜 색감도 이쁜 그런 형태로 바뀌어서 하단바의 메뉴를 누르면 아이콘의 바탕이 연분홍색으로 포인팅? 되어있었었다. app:itemRippleColor="@null" 이런것도 줘보고 별 짓을 했는데도 그게 안사라져서 걔도 원래 방치 예정이였는데.. 플로팅 버튼때문에 였나 스타일의 parent를 바꾸니까 갑자기 하얀배경에 선택 포인팅도 없는 멀쩡한 상태가 되었다. 다만, 아이콘과 타이틀의 색깔이 너무 옅어져서 색감만 선명하게 돌려놓으니까 아주 만족스러운 상태가 되어서, 하단바는 조금만 더 손대면 어떻게 될 수도 있을 것 같다.

• 해결 못한 문제점들이 현재진행형이라서 이미 고쳐진 문제에 대해선 딱히 언급하지 않았다.구글링과 스택오버플로우와 머티리얼디자인의 힘으로 고쳤다. 근데 사실 검색하다보면 프레그먼트..?를 사용해서 기능을 구현한 방법들이 숱하게 검색되어졌는데, 단순히 UI가 아니고 기능을 해야하기 때문에 그것들을 사용하는게 옳은 방법인것 같긴 하지만, 걔는 앞으로 배울 예정이 있다고 들었던 것 같아서 일단 보이는데 온 초점을 맞춰서 작성해봤다.

• 일요일TIL로 올리기엔 금요일 저녁부터.. 주말동안 시간 나는 틈을 내서 간간히 해온거라 애매해지만, 어쨌든 월요일부터는 다시 진도를 따라가야하기 때문에 여기까지만이라도 마무리를 해서 올려본다. 지금은 숱한 의문만 남긴.. 그런 과제가 되어버렸지만, 나중에 내가 더 많이 배워서 다시 이 포스팅을 봤을 때 남긴 문제점들을 척척 해결할 수 있는 사람이.. 되어있기를 바란다. 다음주도 앞으로도 파이팅~