🎨메인 화면 UI 구현 과정과 질문 기록

1️⃣화면을 어떤 구조로 만들까?

현재 메인 화면의 구조이다.  위에서 부터 앱바 와 탭으로 구성되고 탭에서 선택된 아이템에 따라서 아래에 보이는 화면이 달라진다.

따라서 탭 레이아웃 밑의 화면들은 프래그먼트로 구현해주었다.

탭에서는 전체와 팔로잉이라는 아이템을 제공하고 있는데 전체에서 보이는 화면을 구현하는 프래그먼트1과 팔로잉하는 내용만 보이는 화면을 나타내는 프래그먼트2를 만들어주었다.

 

2️⃣프래그먼트 구현 과정

프래그먼트 1의 구조

프래그먼트 2의 구조 

 

🔥문제

액티비티 내부에 프래그먼트를 배치하는 과정에서 레이아웃이 맞지 않아 문제가 있었다. 처음에는 margin을 조절하여 간격을 임의로 설정해주었다. 

그러다가 layout_height를 0dp로 설정하면 공간에 맞게 최대 크기로 프래그먼트를 배치할 수 있다는 사실을 알게되었다!!

3️⃣리사이클러뷰 구현 과정 

 

4️⃣뷰페이저2 구현 과정 

🔥문제

프래그먼트와 뷰페이저2를 같이 사용하는 과정에서 어려움이 있었다.

 

 

💧해결

뷰 페이저2만 사용해도 동작이 잘 되었다.

 

이유는 ?

 

5️⃣모달바텀 시트 구현  과정

바텀 시트 구현 순서

1️⃣. BottomSheetDialogFragment를 상속받는 모달 바텀 시트 클래스 생성

2️⃣ 액티비티나 프래그먼트에서 이 바텀 시트 클래스를 연결해준다.

 

액티비티의 경우

class MainActivity : AppCompatActivity() {
    ...
    val modalBottomSheet = ModalBottomSheet()
    modalBottomSheet.show(supportFragmentManager, ModalBottomSheet.TAG)
    ...
}

 

프래그먼트의 경우

프래그먼트에서는 supportFragmentManager을 사용할 수 없었다. 대신 parentFragmentManager을 사용해주었다. 

  binding!!.autoCompleteTv.setOnClickListener {
            val bottomSheet = ModalBottomSheet()
         
            bottomSheet.show(parentFragmentManager, ModalBottomSheet.TAG)
        }

 

🐤이유 정리 

parentFragmentManager은 현재 프래그먼트가 속한 프래그먼트 매니저를 반환하는데 이는 프래그먼트의 중첩 구조를 다룰 때 유용하다.

예를 들어 한 프래그먼트 내부에서 다른 프래그먼트를 추가하거나 제거하는 작업 수행 시 ,
즉 우리 상황에 대입하면 현재 팔로잉하는 사용자의 리뷰만 보이는  프래그먼트에서 바텀 시트 프래그먼트를 추가할 때 , parentFragmentManager를 사용하면 현재 프래그먼트의 부모 프래그먼트 매니저에 접근할 수 있다.

 

supportFragmentManager는 액티비티 콘텍스트에서만 사용할 수 있다.

 

6️⃣FragmentManager가 뭐야?

그렇다면 FragmentManger는 무엇인가 어떤 일을 하는 것일까? 지금부터 알아보자!

FragmentManager는 앱 프래그먼트에서 프래그먼트를 추가, 삭제 또는 교체하고 백 스택에 추가하는 등의 작업을 수행하는 클래스이다.

알아볼내용

- FragmentManager에 액세스하는 방법

- 활동 및 프래그먼트와 관련된 FragmentManager의 역할

- FragmentManager로 백스택을 관리하는 방법

- 프래그먼트에 데이터와 종속 항목을 제공하는 방법

 

 

 FragmentManager에 액세스하는 방법

활동 및 프래그먼트에서는  FragmentManager에 액세스할 수 있다. 

 

1️⃣액티비티에서 액세스할  경우

getSupportFragmentManager( )를 통해 FragmentManager에 액세스할 수 있다.

 

2️⃣프래그먼트에서 액세스할 경우 

프래그먼트는 하나 이상의 하위 프래그먼트를 호스팅할 수 있다. 프래그먼트 내에서 getChildFragmentManager()를 통해 프래그먼트의 하위 요소를 관리하는 FragmentManager의 참조를 가져올 수 있다.

만약 호스트 FragmentManager에 액세스해야한다면 getParentFragmentManager( )를 사용하면 된다.

 

다시 말해서 프래그먼트가 중첩되어 있는 경우 아래와 같이 정리하자

 

부모 프래그먼트에 접근하려면 getParentFragmentManager() 이용

자식 프래그먼트에 접근하려면  getChildFragmentManager() 이용

 

 

 

구현해야할 내용

- 드롭 다운 버튼 클릭 시 바텀 시트가 뜨도록 하기

 

🔹바텀 시트에서 버튼 클릭 시 해당 텍스트를 드롭 다운 버튼 텍스트에 반영하기

콜백 리스너를 구현해주었다.

interface OnButtonSelectedListener {
    fun onButtonSelected(text: String)
}

class ModalBottomSheet : BottomSheetDialogFragment() {
    private var binding: FragmentBottomSheetBinding? = null

    var listener: OnButtonSelectedListener? = null

 

 

        binding!!.tvFirst.setOnClickListener {
            listener?.onButtonSelected(binding!!.tvFirst.text.toString())
        }
        binding!!.tvSecond.setOnClickListener {
            listener?.onButtonSelected(binding!!.tvSecond.text.toString())
        }
        binding!!.tvThird.setOnClickListener {
            listener?.onButtonSelected(binding!!.tvThird.text.toString())
        }

 

🔥문제 

현재 드롭다운 버튼에서 보이는 text는 editable하였다. 

 

바텀 시트에서 클릭된 버튼의 text를 바로 전달하면 editiable한 타입과 text 타입이 맞지않아 오류가 발생하였다.

따라서 클릭된 버튼의 text를 editable 타입으로 변환해주는 작업이 필요했다

class ModalBottomSheet : BottomSheetDialogFragment() {
    private var binding: FragmentBottomSheetBinding? = null

    var listener: OnButtonSelectedListener? = null

 

 

    val bottomSheet = ModalBottomSheet()
            bottomSheet.listener =
                object : OnButtonSelectedListener {
                    override fun onButtonSelected(text: String) {
                        val editable: Editable = Editable.Factory.getInstance().newEditable(text)
                        binding!!.autoCompleteTv.text = editable
                        bottomSheet.dismiss()
                    }
                }

 

 

🔹 바텀 시트에서 버튼 클릭 시 바텀 시트 닫기

dismiss 함수를 통해서 바텀 시트를 닫을 수 있었다.

bottomSheet.dismiss()

7️⃣좋아요, 북마크 아이콘 클릭 시 이벤트 처리하기

- 클릭했을 때 버튼 색깔을  등록해주기

    <color name="clicked_button_text">#FF333F</color>
    <color name="clicked_button_background">#FFEBEC</color>
    <color name="clicked_button_stroke">#FF858C</color>

 

- 클릭 시 배경색, 테두리색, 버튼 텍스트 색깔을 변경해주기 

현재는 머티리얼 버튼을 사용하고 있고 여기서 기본값이 보라색이 사용되고 있다.

우리 앱에서는 붉은색 배경이 나와야한다. 이를 바꿔주기 위해서는 ripple이나 selector 

 

 

- 좋아요 버튼 클릭 시 좋아요 등록 api 호출해주기 

  뷰모델에서 반영

 

- 북마크 아이콘 클릭 시 북마크 아이콘 색 변경

 

리사이클러뷰에서 연동해준다. 

 

- 북마크 아이콘 클릭 시 북마크 api 호출 

 

 

8️⃣리사이클러뷰 내부에 있는 ``` 아이콘 이벤트 처리하기 

 

9️⃣프로필 이미지 둥글게 하기

ShapeableImageView를 사용하여 이미지뷰를 원하는 형태 (나는 모서리가 둥근 형태)로 그려줄 수 있었다.

 

themes.xml 파일에서 style을 정의해주고

    <style name="Circle50">
        <item name="cornerSize">50%</item>
    </style>
    <style name="Circle10">
        <item name="cornerSize">10%</item>
    </style>

 

이렇게 shapeApperance 속성으로 style을 지정해주면 

           <com.google.android.material.imageview.ShapeableImageView
                app:shapeAppearance="@style/Circle50"

이렇게 둥근 프로필 이미지를 얻을 수 있다!

 

🔎앱바의 검색 아이콘 클릭 시 검색 화면으로 이동하기

   binding.toolBar.setOnMenuItemClickListener {
            when (it.itemId) {
                R.id.search -> {
                    val intent = Intent(this, SearchActivity::class.java)
                    startActivity(intent)
                    true
                }
                R.id.notification -> {
                    true
                }
                else -> false
            }
        }

 

이렇게 intent를 사용하여 화면 전환 코드를 구현해주었는데 검색 버튼을 눌러도 화면이  이동하지 않았다 😭

확인 결과 필요한 일이 2가지 있었다.

1️⃣우선 매니페스트에 검색화면 액티비티를 등록

2️⃣툴바를 앱바로 설정

 

우선 메니페스트에 액티비티를 등록해주었다.

        <activity android:name=".ui.search.SearchActivity"/>

툴바를 적용해주는 방법

이 부분은 따로 글로 정리해두었다!

Android UI : Toolbar 앱 바 적용해주기