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

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

📖당근마켓 UI 클론 코딩 2

1. 클론 코딩 1의 아쉬웠던 점을 개선할 수 있으면 개선.
2. 액티비티를 2개 이상 생성하고 Intent를 활용하여 명시적, 암묵적 Intent 동작을 각 1개씩 구현해 보기
   • 내가 구현해 볼 것들 :
     🚩(오늘 한 것) 상단바의 써치아이콘을 누르면 명시적 인텐트를 사용하여 검색화면으로 넘어가기
     -플로팅버튼을 눌러서 암시적 인텐트를 사용하여 갤러리 불러오기

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

1. activity_main에서 상단바를 굳이 툴바 위젯을 고집할 필요가 없을 것 같아서, LinearLayout으로 두고 수평을 맞출 수 있게 바꿔주었다.
   style은 style="@style/Widget.MaterialComponents.Toolbar"을 그대로 사용하였고,
   CloneUI1에서 navigationIcon으로 고민하던걸 그냥 버튼으로 바꿔주었다.
   menu로 줬던 검색과 알림도 각각 버튼으로 구현해주었다.

2. activity_main에서 상단바 역할을 하는 리니어레이아웃 바로 밑에 있는, 스크롤뷰 첫번째에 존재하는 다른 페이지로넘어가는 버튼을 수평으로 묶는 리니어레이아웃에서 버튼들을 androidx.appcompat.widget.AppCompatButton으로 만들어놨었다. 왜 저걸로 썼더라 검색해보니까 아무래도 버튼의 색깔을 바꾸고 싶어서 그랬던 것 같다. 일반 버튼과 달리 background나 테마 등이 적용되는데 도움이 된다고 한다. 하지만 클론코딩1에서 말했던 것 처럼 플로팅버튼 때문에 테마 자체를 변경한 이후로는 굳이 버튼 색에 조정이 필요 없어질 것 같아서 일반 버튼으로 바꿔주었다.

3. 코틀린 액티비티 파일을 작성할 때, 이번엔 지연초기화를 사용해보았다. 보통 class에 바로 변수를 생성하면 클래스가 만들어지는 시점에 같이 변수가 초기화 되기 때문에 빠른 접근이 가능하지만, 그 변수를 꼭! 사용하는게 아니라면 메모리 손해를 볼 수 있기 때문에 필수요건이 아닌 경우에는 지연초기화(클릭시 이전에 간단히 정리한 내용으로 이동)로 작성하는 것을 권장한다고 한다. 여하튼 MainActiviy에서는 btn_search를 클릭하면 SearchActivity로 넘어가고 SearchActivity에서 et_search 옆에 있는 btn_back을 누르면 finish( )함수로 현재 액티비티를 종료하고 이전 액티비티(MainActivity)로 돌아가도록 만들었다.

4. activity_search.xml은 ConstraintLayout을 바탕으로 두고 그 안에 검색상단바, 인기검색 부분, 최근검색 부분이 순서대로 나오게 하였다.

   4.1 검색 상단바는, LinearLayout을 사용하여 수평이 되도록 만들어주었다. 뒤로 갈 수있는 btn_back과 검색어를 입력할 et_search를 만들어주었다.
   btn_back에는 android:drawableLeft로 아이콘만 넣어주고, 전체적으로 패딩과 마진을 통해 위치만 조정해 주었다. 바탕과 테두리가 투명하도록 설정해주었다.
   et_search는 background를 통해 사각 모서리가 둥글도록 박스처리 해주었다. hint를 넣어 검색어를 입력할 수 있는 곳이라는 것을 안내해주었다. 마찬가지로 글씨가 너무 영역끝에 달라붙지않도록 패딩과 마진을 주어 조정해주었다.

   4.2 인기검색부분은 감싸주는 레이아웃 없이 그냥 TextView를 검색상단바 밑에 붙여 ConstraintLayout의 힘으로 위치를 잡아 주었다. 그 밑에 마찬가지로 ConstraintLayout의 기능을 통해 HorizontalScrollView를 만들어서 위치를 잡아주고, HorizontalScrollView 안에 LinearLayout을 수평으로 주어 인기검색어 버튼들이 가로로 쭉 나열될 수 있도록 만들어주었다. 인기검색어 버튼들은 둥근모양의 테두리만 있는 모양이 될 수 있도록 background를 직접 주었다. 각 버튼의 위치와 텍스트가 적절한 위치와 모양이 되도록 마진과 패딩을 사용하고, 텍스트에는 textSize도 조정해 주었다.

   4.3 최근검색부분은 옆에 전체삭제 버튼도 존재하므로 LinearLayout을 통해 수평으로 잡아주고 TextView와 Button이 오도록 했다. 전체삭제 버튼은 특히, 레이아웃 끝에 바짝 붙을 수 있도록 텍스트 자체에 android:gravity="right|center"를 걸어주었다. 그리고 그 밑에 바로 ScrollView를 붙여 최근 검색 기록이 나오도록 width가 match_parent인 버튼을 만들어주었다. 버튼으로 한 이유는 클릭하면 다시 그 검색어에 대한 검색결과창이 나와야한다고 생각했기 때문이다. text글씨가 가운데에 오지않도록 gravity를 주고, 마찬가지로 전체적인 위치조정에 대해 마진과 패딩을 적절히 주었다.

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

• 1에서검색과 알림 아이콘을 왼쪽으로 붙이려고했는데, android:layout_gravity="right"을 넣어도 아주. 꿈쩍도 안했다..ㅎㅎ
  => 찾아보니까 중간에 가상의 뷰로 빈 공간을 주어서 중간자리를 차지하게하는 방법을 사용할 수 있다고 해서 왼쪽버튼과 오른쪽 버튼들 사이에

    <View
             android:layout_width="0dp"
             android:layout_height="0dp"
             android:layout_weight="1"/>

  이 코드를 넣어주었다. 원하는 모양이 나왔다.

• 4.3에서 스크롤뷰의 크기를 높이도 match_parent로 했더니, app:layout_constraintTop_toBottomOf="@+id/recent_layout"을 주어도 화면에 꽉차게 나와서 당황스러웠다. height를 wrap_content로 바꾸니까 원하는 모양이 나왔는데, 앞으로도 ScrollView를 쓸 때 주의해야겠다. 그리고 지금 생각해보니까 ScrollView안에 하나의 버튼으로 만든 거.. 맨 끝에 오는 X표시의 clear아이콘이 누르면 삭제될 수 있도록 활성화 되어야하기 때문에 다른 버튼으로 분리했어야 했다..
  =>이건 내일 분리해서 고쳐보도록 하겠다.

• 나머지는 최대한 그냥 배웠던 것을 활용해서 똑같은 모양이 나오도록 해주었다. 진짜 모양만 똑같다..ㅎㅎ

• 오늘은 써치아이콘을 누르면 써치액티비티가 뜨도록 하는 명시적인텐트의 사용만 구현했는데, 이건 강의에서도 하고, 개인과제로도 해서 그냥.. intent를 선언해서 Intent에 다음에 올 액티비티만 담아준거..라서 딱히 복잡한 코드도 아니고 어렵지는 않았다. 다만, lateinit와 by lazy 중에 뭘 써야 하냐를 고..민했었는데, val로 보통 findViewById를 선언했기도 하고, nullable에도 상대적으로 자유롭고 딱히.. 리소스가 크지도 않은 것 같으니까 by lazy를 사용해서 작성해주었다. 그리고 MainActivity의 이름을 바꿔야할까 고민하다가.. 지금은 페이지가 2개뿐이고.. home이 메인..이긴하니까 그대로 냅뒀다..ㅎㅎ

• 내일은 고쳐줘야할 부분을 고치고, 플로팅버튼을 눌러서 암시적 인텐트를 사용하여 갤러리 불러오기를 구현할 수 있도록 해야겠다.!