Airbnb 앱 개발하기

 

Side Project - Airbnb
네이버 지도 API를 활용해서 지도 위에 숙소 정보를 보여주는 Airbnb의 간단한 기능을 구현한 프로젝트

 

• GitHub -> https://github.com/hwayeon351/Airbnb

GitHub - hwayeon351/Airbnb

 

---

학습 회고

오늘은 마커의 숙소 정보와 ViewPager2에 띄워진 숙소 정보를 일치 시키는 작업을 하였다.

해당 위치의 숙소 정보가 ViewPager2에 띄워지도록 하고, 반대로 ViewPager2를 스와이프하면서 숙소 정보를 띄우면 해당 숙소 위치가 찍힌 마커로 카메라가 이동하도록 구현하였다.

그리고 ViewPager2의 숙소 정보를 클릭하면 해당 정보를 공유할 수 있도록 암시적 인텐트를 전송해 공유가 가능한 앱을 선택할 수 있도록 하였다.

 

 

---

오늘 공부한 내용

• ViewPager의 아이템을 클릭해서 숙소 정보 공유하는 기능 구현하기

• ViewPager Adapter - 아이템에 클릭 리스너 달기

 

 

ViewPager Adapter 객체를 생성할 때 아이템 클릭 리스너를 구현하기 위해서 HouseViewPagerAdapter의 파라미터에 람다식 itemClicked를 추가해준다.

이때 ViewPager Adapter를 생성하는 MainActivity에서 해당 숙소 정보에 대한 공유를 구현할 것이기 때문에 itemClicked() 함수에 HouseModel이 반환되도록 설정해준다.

그리고 아이템 클릭에 대한 처리를 해주기 위해 ViewHolder의 bind 함수 내에 아이템을 담는 루트 뷰에 setOnclickListner를 달아주고 itemClicked()에 해당 아이템에 들어가는 숙소 정보에 관한 데이터인 houseModel을 담아준다.

class HouseViewPagerAdapter(val itemClicked: (HouseModel) -> Unit): ListAdapter<HouseModel, HouseViewPagerAdapter.ViewHolder>(diffUtil) {
    inner class ViewHolder(val view: View): RecyclerView.ViewHolder(view) {
        fun bind(houseModel: HouseModel) {
            val titleTextView = view.findViewById<TextView>(R.id.titleTextView)
            val priceTextView = view.findViewById<TextView>(R.id.priceTextView)
            val thumbnailImageView = view.findViewById<ImageView>(R.id.thumbnailImageView)

            priceTextView.text = houseModel.price
            titleTextView.text = houseModel.title

            view.setOnClickListener {
                itemClicked(houseModel)
            }

            Glide.with(thumbnailImageView.context)
                .load(houseModel.imgUrl)
                .into(thumbnailImageView)

        }
    }

 

• HouseViewPagerAdapter 객체 생성시 itemClicked() 메서드 구현하기

MainActivity에서 HouseViewPagerAdapter를 생성할 때 아이템이 클릭되면 해당 숙소 정보를 공유할 수 있도록 로직을 구현한다.

private val viewPagerAdapter = HouseViewPagerAdapter(itemClicked = {
	// 클릭 이벤트가 발생하였을 때 일어날 로직 구현하기
})

다른 앱으로 데이터를 전송하는 방법은 두가지가 있다.

Android Sharesheet를 사용하는 방법과 Android 인텐트 리졸버를 사용하는 방법이다.

나는 Android Sharesheet를 사용했다.

 

• Android Sharesheet 사용하기

Airbnb 앱에서 다른 앱으로 정보를 공유하기 위해서는 Intent를 활용해야 한다.

다른 앱으로부터 공유 기능을 이용할 수 있도록 설정되어 있는 앱을 실행할 수 있도록 하려면 암시적 인텐트를 사용해야 한다.

 

이때, Intent에 action을 적용해야하는데 ACTION_SEND를 사용하면 다른 Activity로 데이터를 보낼 수 있다.

공유하고자 하는 MIME 유형과 데이터를 인텐트에 담아준다.

그러면 해당 MIME 유형을 받겠다고 등록되어 있는 수신자에게 인텐트를 전달할 수 있다.

Airbnb에서는 숙소 정보를 텍스트로 보내기 위해서 type은 text/plain으로 지정하고 putExtra에 Intent.EXTRA_TEXT를 지정하고 보내고자 하는 텍스트를 입력해주었다.

여기까지 인텐트를 설정하고 startActivity() 매개변수에 생성한 인텐트를 담으면 Android 인텐트 리졸버를 사용하는 것이다.

 

추가로 Intent.createChooser()를 호출하면 Android Sharesheet를 사용할 수 있다.

Sharesheet를 표시하면 사용자에게 공유 가능한 앱을 제안해주고 적절한 사람에게 공유할 수 있도록 하는 기능도 제공할 수 있다.

    // 클릭 이벤트가 발생하였을 때 일어날 로직 구현하기
    val intent = Intent()
        .apply {
            action = Intent.ACTION_SEND
            putExtra(Intent.EXTRA_TEXT, "[지금 이 가격에 예약하세요!!] ${it.title} ${it.price}, 사진보기 : ${it.imgUrl}")
            type = "text/plain"
        }
    startActivity(Intent.createChooser(intent, null))