[1팀] 코틀린 - 분 단위 나이 계산기

이 글은 Android 12 및 Kotlin 개발 완전 정복을 참고하여 작성하였습니다.

작성자: 황보민

개발환경 :  IOS, Android Studio

 

1. 나이 계산기를 위한 UI 세팅하기 

#testColor

색상 참고 사이트 (최근 유행하는 색 조합도 확인 가능) →  https://coolors.co/

Coolors - The super fast color palettes generator!

색상 코드를 복사해서 텍스트 색상으로 변경 가능 

 

#색상정의 

Q. 만약 textColor를 활용하여 색상을 정의했는데, 나중에 또 사용하고 싶다면?

A. colors 편집창(colors.xml)으로 이동 > resources에서 색상을 추가하면 됨! 

<color name="textOrange"#ff6b35</color>

 

#layout_margin

앱 UI 창에서 텍스트가 위치와 앱의 가장자리 사이에 일정한 거리를 띄우고 싶을 때 사용

 

#layout_marginTop

텍스트가 위쪽(상단)에 위치하고 있으나, 최상단과 일정 거리를 띄우고 싶을 때 사용

보통 상단과 8px 또는 16px 정도 떨어지게 설정하는 편! 

 

2. TextView 추가하기 

#TextView

화면에 텍스트를 추가하고 싶을 때 사용

#match_parent: 전체 화면에 꽉 맞게 함 (화면에 가능한 한 최대의 넓이)

android:layout_width="match_parent"

#wrap_content: 아이템의 너비를 정함 (화면에 필요한 공간만 차지)

android:layout_height="wrap_content"

#background: 글자의 배경색 설정 

android:background="@color/black"

#padding: 배경의 여백 설정(첨부 이미지 참고)

이미지 출처 : educba

android:padding="10dp"

 

#LinearLayout

View를 수평 혹은 수직 방향으로 배치할 수 있게 하는 레이아웃

이때, orientation 속성을 통해 배치 방향을 결정할 수 있음 

#vertical : 하위 뷰 → 수직방향으로 배치

android : orientation = "vertical"​

#horizontal : 하위 뷰 → 수평방향으로 배치

android : orientation = "horizontal"​

 

3. PX / DP / SP 이해하기

: DP와 SP는 픽셀을 더 많이 포함하게 되는 형태이다. 
 - SP는 확장 축소 가능 픽셀을 의미함
 - 픽셀이 많아지고 작아지면서 PX 가 훨씬 작아 보이게 됨 
 - 픽셀 차이가 더 많이 나면서 DP와 SP도 차이가 발생함 
따라서 최근에는 PX → DP→ SP 순서로 크기가 커져 보인다.

4. Date Picker Dialog

이미지 출처 : 강의자료

#DatePickerDialog

위의 이미지 속, 팝업창을  DatePickerDialog라고 부름

:: 생성 방법 ::
1) activity_main.xml에 버튼 btnDatePicker를 생성한다.

<Button
        android:id="@+id/btnDatePicker"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/btnBgColor"
        android:text="SELECT DATE"
        android:textColor="@color/lightGray" />​

2) MainActivity.kr에 변수 btnDatePicker를 추가한다.

val btnDatePicker : Button = findViewById(R.id.btnDatePicker)​

3) 사용자가 날짜를 설정할 때 호출할 리스너 setOnDateSetListener를 설정한다. 

  btnDatePicker.setOnClickListener {
            Toast.makeText(
                this,
                "btnDatePicker pressed", Toast.LENGTH_LONG).show()
        }

4) 함수 fun clickDatePicker와 연결한다.

fun clickDatePicker(){

    val myCalendar = Calendar.getInstance()
    val year = myCalendar.get(Calendar.YEAR)
    val month = myCalendar.get(Calendar.MONTH)
    val day = myCalendar.get(Calendar.DAY_OF_MONTH)
    DatePickerDialog(this,
    
    	#여기부터는 모두 매개변수임!
        #view부터 밑줄이 그어지는 이유는 코드에서 활용하지 않지만 람다식을 사용하기 때문임
        #코드가 사용되지 않을 때, 밑줄이 그어짐
        
    	DatePickerDialog.OnDateSetListener{ view, year, month, dayOfMonth -> },
        year,
        month,
        day
        )

5) .show()를 작성하여 노출시킨다.

fun clickDatePicker(){

    val myCalendar = Calendar.getInstance()
    val year = myCalendar.get(Calendar.YEAR)
    val month = myCalendar.get(Calendar.MONTH)
    val day = myCalendar.get(Calendar.DAY_OF_MONTH)
    DatePickerDialog(this,
    	DatePickerDialog.OnDateSetListener{ view, year, month, dayOfMonth -> 
        
        	Toast.makeText(this,
            		"Datepicker works", Toast.LENGTH_LONG).show()
        
        },
        year,
        month,
        day
        ).show