[코틀린(Kotlin)] [팀 프로젝트] 간단한 연락처 앱 만들기

[깃 허브 링크]

 

 

맡은 & 구현한 기능

• 연락처 리스트 화면 (ContactFragment)
  - 뷰 바인딩(viewBinding) & 리사이클러 뷰(recyclerView) 사용
  - 연락처 정보 리스트 출력 (더미 데이터를 활용)
  - 스크롤 이동 시 최상단으로 이동하는 플로팅 버튼(FloatingButton)
  - 검색 기능
  - 통화 아이콘 클릭 시 ACTION_DIAL 및 Intent로 번호 전달
  - 뷰 전환 (리스트 뷰(ListView) <-> 그리드 뷰(GridView))
  - 즐겨찾기 된 유저 이미지 뷰에 스트로크 추가
  - 연락처 정보 리스트에서 아이템 클릭 시 상세정보로 전환 및 데이터 전달
  - 콜랩싱 바(CollapsingBar)를 이용하여 스크롤 이동 시 앱의 아이콘이 가려지도록 사용자 편의성 제공

 

 

프래그먼트 구성

 

 

검색 기능

// UserAdapter.kt 속 search() 메서드
fun search(first: String) {
        val name = first

        if (name.isBlank()) {
            mItems.clear()
            mItems.addAll(mItemsCopyList)
        } else {
            val filteredList = mItems.filter { it.name.contains(name) }
            mItems.clear()
            mItems.addAll(filteredList)
        }
        notifyDataSetChanged()
    }

ContactFragment의 EditText에 정보를 입력하고 검색 버튼 클릭 시 UserAdapter.kt의 search 메서드를 실행시켜 입력된 정보에 맞는 유저 출력

 

문제)

근데 이게 검색할 때, 원본 데이터를 넣고 filter를 걸면 검색하고 난 다음에 filter된 데이터들만 남게되어 원본 데이터들이 사라진다..

 

해결)

• 데이터를 복사해서 검색할 때와 초기화하는 데이터를 구분하여 해결했다
  (copy()를 이용하여 mItems의 인자들을 복사하고 mItemsCopyList를 생성했다)

 private var mItemsCopyList: MutableList<UserInfo> = mItems.map { it.copy() }.toMutableList()

 

 

즐겨찾기 된 유저 이미지 뷰에 스트로크 추가

 

상세정보에서 즐겨찾기를 한 유저는 연락처 리스트에서 파란색 외곽선 효과를 주었다

 

문제)

이게 처음에는 이미지 뷰에 Stroke로 외곽선 효과를 주고 싶었는데 이미지 뷰의 크기보다 외곽으로 커지는 Stroke는 주는 법을 아무리 찾아봐도 모르겠어서 포기했다. 그래서 Padding으로 이미지 뷰를 줄이고 Background에 파란색 Solid를 넣어놓고 해결하려 했는데, 그러면 또 이미지가 너무 작아졌다.

 

해결)

• 기존 유저 프로필을 보여주는 이미지 뷰(iv_contact_userIcon) 뒤에 사이즈가 더 큰 이미지 뷰(iv_contact_like)를
  하나 더 그려주고 visibility 속성을 활용하여 즐겨찾기 된 유저만 View.VISIBLE 해준다

 

 

 

회고

• 프로젝트를 진행하면서 작성한 것 외에도 팀원분들에게 엄청나게 많은 도움을 받아서 정말 죄송하고 감사했다
• 사실상 이번 프로젝트에서 가장 중요한 파트를 맡았다고 생각하는데 혼자 해결한 게 거의 없는 것 같아서 도움을 주신 분들께 정말 감사하다..
• 프로젝트를 진행할수록 어렵고 막막하지만, 새로운 것도 많이 얻고 잘하시는 분들에게 꿀팁도 얻고 좋은 것 같다..
• 이전에 썼던 기능들을 완벽히 이해하지 못했어도, 내가 활용했던 걸 다시보고 쓰는 것 또한 유용하다는 걸 많이 느꼈다