Kotlin 2차시

오늘은 코틀린 기본적인 위젯을 만들어 보았어요!

 

우선 뷰 클래스는 부모 클래스예요!

안드로이드 화면에서 실제로 사용되는 것들은 모두 View 클래스의 상속을 받습니다.

버튼, 라디오 버튼, 이미지 등은 모두 View 클래스의 서브 클래스라고 할 수 있습니다. 즉, 자식 클래스라는 말이죠!

이들을 위젯이라고도 부릅니다. 쉽게 말하면 요소 하나하나를 위젯이라고 표현해요~

화면에서의 버튼은 버튼 위젯을 사용하고, 실제 코드에서의 버튼은 버튼 클래스를 이용합니닷.

 

레이아웃에는 여러 종류가 있는데요!

다른 위젯을 담을 수 있는 위젯을 레이아웃이라고 하는 것입니당. 즉, 위젯을 담아 배치하는 틀입니다.

자바와 마찬가지로 Kotlin 의 최상의 클래스는 Object 입니다!!!!!

 

버튼의 속성에는 XML 속성이 거의 없고 대개 상위 클래스인 TextView 나 View 에서 상속 받습니다.

 

클래스 이름의 첫 글자는 항상 대문자이구요!!!!!

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#00ffff"
    android:padding="30dp"
    tools:context=".MainActivity">
    
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="OK 확인"
        android:id="@+id/button1" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="CANCEL 취소"
        android:id="@+id/button2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2410 정상미"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="여성"
        android:background="#DCC639"
        android:id="@+id/radio1" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="남성"
        android:background="#ff0000"
        android:id="@+id/radio2" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="중성"
        android:id="@+id/radio3" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/edit1"
        android:padding="30dp"
        android:hint="여기에 채우세요" />

    <CheckBox
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/check1"
        android:background="#2196F3"
        android:text="요맘때" />

    <CheckBox
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/check2"
        android:background="#D3B53F94"
        android:text="수박바" />

</LinearLayout>

 

우선 화면의 정렬 방식을 저번과 똑같이 바꿔주었고, 배경색을 입히기 위해 background 라는 속성을 사용했어요!

padding 은 30dp 를 주어서 적당한 간격을 띄웠답니다.

버튼을 만들어줄 때 match_parent 로 width 를 잡았어요. 이는 부모와 크기를 똑같이 해 줘~ 라는 의미입니다.height 을 wrap_content 로 줬는데요! 제가 1차시 때 설명을 너무 애매하게 적어서.. 혼란의 여지를 드린 것 같아 정정하겠습니다. wrap_content 란 크기를 콘텐츠의 크기만큼 해달라~라는 의미입니다!그리고 버튼 안에 넣을 텍스트와 고유한 아이디 값을 지정해주면 됩니닷.이러한 방식으로 CANCEL 버튼을 또 만들어 줫어여!!

 

TextView 위젯으로 그냥 글자를 집어넣었어용.이건 너비랑 높이 다 콘텐츠의 크기에 맞추고 싶어서 건들지 않았습니당.

 

그리고 RadioButton 위젯을 넣었는데요! 이것은 여러 옵션 중 한 개만 선택할 수 있는 옵션입니당.저는 성별로 해서 남성, 여성, 중성 이렇게 세 개를 만들었습니다.이는 text 에 글을 썼겠죠?!각각에 배경색을 입히고 싶어 배경색 속성을 이용하였고, 각각에 아이디를 지정해 주었어요!

 

그리고 EditText 위젯은 제가 텍스트를 입력할 수 있는 공간을 제공해 줍니다.hint 를 사용해서 연한 글자도 넣어줬어요!밑줄을 끝까지 넣게 하고 싶어, width 는 match_parent 로 부모와 맞춰주었습니다.

 

마지막으로는 CheckBox 를 만들었는데요!!!!!CheckBox 는 RadioButton 과 달리 중복 선택이 가능합니다.이 또한 배경색, 아이디를 지정해 주었어요!!!

 

아직 연결은 안 해서 작동은 되는 게 없지만

미리보기로 보면 이러한 모양입니다!

width 와 height 얼마 주느냐에 따라 배경색이 칠해지는 구간이 다르기 때문에 꼭 조심하고, 사용해요!

그럼 이만 안뇽