Expandable FAB(Floating Action Button) 구현하기 - ListPopupWindow

FAB를 이용한 클릭이벤트로 메뉴를 주르륵 뜨게 만들어야했다. 

이런 식으로 만드는 것이었는데, 이건 github에 검색하면 최상단에 나오는 유저 라이브러리다. 그냥 써도 되지만, 3년 전이 마지막 업데이트인 것도 있고, 이번에 한번 도전해보자는 의미에서 라이브러리를 쓰지 않고 구현해보기로 했다.

# 첫 시도 - popup메뉴를 달아보기

`/res/menu`에 사용할 메뉴들을 선언하고, 구현해봤다. 단순히 popup메뉴 이벤트의 show 트리거를 fab 클릭으로 달아둔 형태였다...

 

이래서는 내가 원하는 형태를 만들 수 없었다.

피그마 대로면 이런 모양을 만들어야했는데, 좀 찾아보다 보니 `ListPopupWindow`라는 걸 찾을 수 있었다. spinner의 일종으로 호스트로 어떤 대상을 정해서, 그걸 기준으로 목록을 보여주는 위젯이다.

# `ListPopupWindow`로 구현 

목록을 adapter로 받는데, ListAdapter를 받는다. 처음에 이거보고 "어? RecyclerView의 ListAdapter인가?" 했는데 widget의 ListAdpater였다. 이러면 override 해야하는 함수가 많아서 그냥 ListAdapter를 상속한 클래스인 BaseAdapter를 사용하기로 했다.

문서에도 설명되어있다

class CustomPopupAdapter(private val items: List<String>) : BaseAdapter() {
    override fun getCount(): Int = items.size
    override fun getItem(position: Int): Any = items[position]
    override fun getItemId(position: Int): Long = position.toLong()

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val holder: PopUpViewHolder = if (convertView == null) {
            PopUpViewHolder(
                ItemPopUpBinding.inflate(
                    LayoutInflater.from(parent.context),
                    parent,
                    false
                )
            )
        } else {
            convertView.tag as PopUpViewHolder
        }

        return holder.bind(items[position], position)
    }

getView는 view를 반환해줘야하는데, ViewHolder패턴을 활용했다. 다만 getView여서 View를 반환해야되는데, 이걸 ViewHolder 클래스에서 사용하고 싶었지만 방법을 딱히 떠올리지 못해 holder의 `itemView`를 반환하는 방식을 선택했다.

 

convertView로 뷰를 재사용하는데, 매번 새로 만들필요가 없도록 null일때만 inflate했다. 이미 뷰가 만들어졌다면 tag에 담겨있는 객체를 사용한다. tag는 안써본 사람도 있을 거라 생각되는데, 일종의 Any 같은 느낌이다. 

/**
 * Returns this view's tag.
 *
 * @return the Object stored in this view as a tag, or {@code null} if not
 *         set
 *
 * @see #setTag(Object)
 * @see #getTag(int)
 */
@ViewDebug.ExportedProperty
@InspectableProperty
public Object getTag() {
    return mTag;
}

모든 객체를 담을 수 있고, 따라서 ViewHolder 객체 역시 담을 수 있다. 그러면 이미 담겨있는 객체를 꺼내쓰면 되서 성능이 올라간다. holder 객체에서 사용할 값도 넣어주면 끝난다. 

 

이제 ViewHolder를 보자.

class PopUpViewHolder(private val binding: ItemPopUpBinding) {
    private val itemView: View = binding.root

    init {
        itemView.tag = this
    }

    fun bind(item: String, position: Int): View {
        binding.tvTitle.text = item
        when (position) {
            Ticket.ISSUED.state -> {
                binding.ivIcon.setImageResource(R.drawable.ic_issued_ticket)
            }

            Ticket.UNISSUED.state -> {
                binding.ivIcon.setImageResource(R.drawable.ic_unissued_ticket)
            }
        }
        binding.executePendingBindings()
        return itemView
    }
}

우선 binding.root를 반환하면 안된다. tag를 사용해서 뷰를 재활용해야되고, 그 tag에 담길 요소가 ViewHolder인데 tag를 지정하지않고 그냥 binding.root를 사용하면 tag를 찾지못해서 앱이 죽어버린다.

 

그래서 itemView를 binding.root로 해서,  tag를 PopUpViewHolder로 지정해주는 것이다. executePendingBindings는 바인딩 계의 lazy라고 생각하면 된다.

 

이제 호출부를 보겠다.

private val popUpAdapter by lazy {
    CustomPopupAdapter(
        listOf(
            getString(R.string.schedule_ticket_issued),
            getString(R.string.schedule_ticket_unissued)
        )
    )
}


private fun initFAB() {
    val listPopupWindow = ListPopupWindow(binding.root.context)
    listPopupWindow.apply {
        setBackgroundDrawable(
            ContextCompat.getDrawable(
                binding.root.context,
                android.R.color.transparent
            )
        )
        setAdapter(popUpAdapter)
        anchorView = binding.fabAddTicket
        width =
            binding.root.context.resources.getDimensionPixelSize(R.dimen.default_popup_width)
        height = ListPopupWindow.WRAP_CONTENT
        isModal = true
        setOnItemClickListener { _, _, position, _ ->
            when (position) {
                Ticket.ISSUED.state -> {
                    Timber.tag("fab").d("issued")
                }

                Ticket.UNISSUED.state -> {
                    Timber.tag("fab").d("unissued")
                }
            }
            listPopupWindow.dismiss()
        }
    }

    binding.fabAddTicket.setOnClickListener {
        listPopupWindow.show()
    }
}

ListPopupWindow가 기본테마를 갖고있기 때문에 배경부터 날려줬다. 어댑터를 설정해주고, 호스트로 사용할 fab를 anchor로 달아줬다.

width는 여기서는 보이지 않지만 200dp로 설정했고, 목록이 아닌 다른 부분을 누르면 닫히도록 modal 값을 true로 지정했다. 

 

아래는 결과물이다..! 나름 성공적인 도전이라고 생각한다.

 

 

도움이 됐다면 댓글이나 공감 버튼 한 번씩 누르고 가주세요!