[Kotlin] Custom Bottom Sheet + ListView

TextView Spinner를 클릭했을 때, Bottom Sheet가 열리고 

Bottom Sheet의 ListView의 아이템을 클릭해서

TextView의 text로 지정하는 방법이다.

 

시연 영상

 

 

BottomSheetDialogFragment를 사용하기 위해선, 

 

Gradle:app 에 material을 의존성 주입을 해주어야 사용할 수 있다.

 

// build.gradle (app)
implementation "com.google.android.material:material:1.4.0"

 

Bottom Sheet Layout ( .xml )

// layout/custom_bottom_sheet.xml
<?xml version="1.0" encoding="UTF-8" ?>
<androidx.appcompat.widget.LinearLayoutCompat
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >
    
    <ListView
        android:id="@+id/listView"
        android:textAlignment="center"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:nestedScrollingEnabled="true"
        android:layout_height="300dp"
        />

</androidx.appcompat.widget.LinearLayoutCompat>

 

TextView Spinner Layout ( .xml )

<androidx.appcompat.widget.AppCompatTextView
    android:id="@+id/choiceSetTextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:background="@android:drawable/editbox_background"
    android:drawableEnd="@drawable/ic_baseline_arrow_drop_down_24"
    android:gravity="center"
    android:hint="세트 개수를 선택하세요"
    android:padding="8dp"
    android:layout_marginTop="16dp"
    />

 

Scroll Up할 경우에, BottomSheet가 종료되는 것을 막기 위해 설정

android:nestedScrollingEnabled="true"

 

BottomSheetListView Class

class BottomSheetListView(context: Context, arrayList: ArrayList<String>) : 
	// BottomSheetDialogFragment 상속
	BottomSheetDialogFragment() {
        private lateinit var onClickListener: onDialogClickListener
        // ListView에 연결할 Adpater
        private var adapter = ArrayAdapter<String>(context
            ,android.R.layout.simple_expandable_list_item_1
            ,arrayList
        )
        override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
        ): View? {
            var view:View = inflater.inflate(R.layout.custom_dialog_spinner_layout, container, false)
            var listView = view.findViewById<ListView>(R.id.listView)
            // ListView의 Adapter 지정
            listView.adapter = adapter
            
            // ListView를 클릭했을 때, 클릭한 아이템을 String으로 전달하고, BottomSheet를 종료
            listView.setOnItemClickListener{ _, _, position, _ ->
                onClickListener.onClicked(adapter.getItem(position).toString())
                dismiss()
            }
            return view
    }
    
    fun setOnClickListener(listener: onDialogClickListener) {
        onClickListener = listener
    }

    interface onDialogClickListener
    {
        fun onClicked(clickItem: String)
    }
}

 

사용할 Activity, Fragment에 따라서 함수를 입력하고, TextView를 함수로 전달해주면 작동한다.

 

Activity에서 사용 시

// pseudo code
Activity {
override fun onCreate(){
    var textview:TextView = findViewById<TextView>(R.id.TextViewId)
    createBottomSheet(textView)
    }
    private fun createBottomSheet(textView:TextView)
}

//Activtiy에서 사용시
 private fun createBottomSheet(textView:TextView){		
     var setArrayList: ArrayList<String> = ArrayList()
	 var SET_SIZE = 15
     
        for (i: Int in 0..SET_SIZE) {
            setArrayList.add(i, "${i} SET")
        }


        var bottomSheetListView: BottomSheetListView =
            BottomSheetListView(baseContext, setArrayList, false)

        bottomSheetListView.show(supportFragmentManager, "SET_BOTTOM_SHEET")
    	bottomSheetListView.setOnClickListener(object: BottomSheetListView.onDialogClickListener {
                override fun onClicked(clickItem: String) {
                    textView.text = clickItem
                }
            })
        }

 

Fragment에서 사용 시

   //Fragment에서 사용 시
   private fun createBottomSheet(textView:TextView){
   		// BottomSheet의 ListView에 나타낼 ArrayList
        var setArrayList: ArrayList<String> = ArrayList()
      	var SET_SIZE = 15
        
        for(i:Int in 0..SET_SIZE) {
            setArrayList.add(i,"${i} SET")
        }
       
        textView.setOnClickListener {
        	// BottomSheetListView class 선언 
            var bottomSheetListView:BottomSheetListView = 
            	BottomSheetListView(requireContext(),setArrayList,false)
            
            bottomSheetListView.show(childFragmentManager,"SET_BOTTOM_SHEET")
            
            bottomSheetListView.setOnClickListener(object: BottomSheetListView.onDialogClickListener {
                override fun onClicked(clickItem: String) {
                    textView.text = clickItem
                }
            })
        }
   }