[Android][Kotlin] NumberPicker로 custom datePickerDialog 만들기

안드로이드 기본 datePicker를 사용하려다가

1. 디자인이 마음에 들지 않는다

2. 연/월 만 필요하다 

라는 이유로 numberPicker을 활용해 커스텀 datePicker을 만들었다.

 

디자이너가 원한 datePickerDialog

 

안드로이드 기본 datePickerDialog

 

안드로이드 기본 datePickerDialog 소스

val c = Calendar.getInstance()
        val day = c.get(Calendar.DAY_OF_MONTH)
        val month = c.get(Calendar.MONTH)
        val year = c.get(Calendar.YEAR)


        val dpd = DatePickerDialog(this, android.R.style.Theme_Holo_Dialog, DatePickerDialog.OnDateSetListener { datePicker, year, monthOfYear, dayOfMonth ->
            
            //  값 받아오는 부분
            month = monthOfYear + 1
            day = dayOfMonth
            year = year - 2000

        }, year, month, day)

        dpd.show()

 

 

 

 

 

NumberPicker로 custom datePickerDialog 만들기

먼저 dialog_datepicker.xml 파일을 만들어서 원하는 다이얼로그 레이아웃을 설정하고 numberPicker를 추가한다.

<androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <NumberPicker
                android:id="@+id/yearpicker_datepicker"
                android:layout_width="63dp"
                android:layout_height="124dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                android:theme="@style/AppTheme.NumberPicker"/>

            <NumberPicker
                android:id="@+id/monthpicker_datepicker"
                android:layout_width="63dp"
                android:layout_height="124dp"
                android:layout_marginStart="50dp"
                app:layout_constraintStart_toEndOf="@+id/yearpicker_datepicker"
                app:layout_constraintTop_toTopOf="parent"
                android:theme="@style/AppTheme.NumberPicker"/>



        </androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

그 다음에 액티비티 파일에서 버튼을 누르면 다이얼로그가 뜰 수 있게 setOnClickListener을 달아주고,

안에 상세 코드를 넣어주면 된다. 

//  날짜 dialog
        date_conslay_statfrag.setOnClickListener {

            val dialog = AlertDialog.Builder(context).create()
            val edialog : LayoutInflater = LayoutInflater.from(context)
            val mView : View = edialog.inflate(R.layout.dialog_datepicker,null)

            val year : NumberPicker = mView.findViewById(R.id.yearpicker_datepicker)
            val month : NumberPicker = mView.findViewById(R.id.monthpicker_datepicker)
            val cancel : Button = mView.findViewById(R.id.cancel_button_datepicker)
            val save : Button = mView.findViewById(R.id.save_button_datepicker)


            //  순환 안되게 막기
            year.wrapSelectorWheel = false
            month.wrapSelectorWheel = false

            //  editText 설정 해제
            year.descendantFocusability = NumberPicker.FOCUS_BLOCK_DESCENDANTS
            month.descendantFocusability = NumberPicker.FOCUS_BLOCK_DESCENDANTS

			//  최소값 설정
            year.minValue = 2019
            month.minValue = 1

			//  최대값 설정
            year.maxValue = 2020
            month.maxValue = 12


            //  취소 버튼 클릭 시 
            cancel.setOnClickListener {
                dialog.dismiss()
                dialog.cancel()
            }

            //  완료 버튼 클릭 시
            save.setOnClickListener {
                year_textview_statsfrag.text = (year.value).toString() + "년"
                month_textview_statsfrag.text = (month.value).toString() + "월"

                dialog.dismiss()
                dialog.cancel()
            }
            
            
            

            dialog.setView(mView)
            dialog.create()
            dialog.show()


        }

 

 

 

 

 

divider 색 바꿔주기

style.xml에 새로운 스타일 추가 후, 

<style name="AppTheme.NumberPicker" parent="AppTheme">
        <item name="colorControlNormal">@color/colorPrimary</item>
    </style>

dialog_datepicker.xml의 numberpicker부분 theme에 추가해준다

<NumberPicker
                ..
                
                android:theme="@style/AppTheme.NumberPicker"/>

 

 

 

 

string으로 값 설정하기

year.minValue = 2019
year.maxValue = 2020
            
	...
    
//  보여질 값 설정 (string)
year.setDisplayedValues(arrayOf("2019년", "2020년"))

다만, 이건 다이얼로그에 보여지는 값일 뿐이기 때문에 year.value로 가져올 때는 int값만 가져와진다.

 

 

 

 

 

 

 

참고한 포스팅

https://blog.yena.io/studynote/2018/01/18/Android-Kotlin-NumberPicker.html

[Android][Kotlin] NumberPicker 넘버피커 숫자 선택

https://stackoverflow.com/questions/8227073/using-numberpicker-widget-with-strings

Using NumberPicker Widget with Strings

https://stackoverflow.com/questions/24233556/changing-numberpicker-divider-color

Changing NumberPicker divider color