[코틀린(Kotlin)] 안드로이드 UI 위젯(Widget

안드로이드 UI(UserInterface)

뷰란? 안드로이드 앱의 UI를 구성하는 기본 단위는 뷰(View)이다

 

1. 뷰(View)의 구성

1. 위젯(Widget)
   - View의 서브 클래스로서, 앱 화면을 구성하는 시각적인 모양을 지닌 UI요소
   - 예) 버튼, 메뉴, 리스트 등
2. 레이아웃(Layout)
   - ViewGroup의 서브 클래스로서, 다른 뷰(위젯 혹은 레이아웃)를 포함하면서 이들을 정렬하는 기능을 지닌 UI요소

위젯과 레이아웃

 

 

2. 위젯(Widget)

2.1 위젯이란?

View의 서브 클래스 중에서 화면에 보이는 것들을 말한다 (TextView, EditView, Button 등)

 

2.2 View

View클래스의 속성은 모든 UI 컴포넌트들에서 공통적으로 사용할 수 있다

1. 식별자 지정 형식
android="@+id/myID"

2. 식별자 참조 형식
android="@id/myID"

id는 UI 컴포넌트를 고유하게 식별하는 식별자 역할을 해준다

 

 

2.3 TextView

<TextView
    android:text = "출력할 문자열 지정"
    android:textSize = "폰트 크기"
    android:textStyle = "텍스트 스타일" (normal, bold, italic)
    android:typeface = "텍스트 폰트" (normal, sans, serif, monospace)
    android:textColor = "문자열 색상"
    android:singleLine = 속성 값이 true일 때, 텍스트가 위젯의 폭보다 길 때 강제로 한 줄에 출력
/>

 

 

2.4 EditText

• 입력이 가능한 Text창
• TextView의 모든 속성 상속(EditText는 TextView의 서브클래스)
• inputType: 입력 시 허용되는 키보드 타입 설정 및 키보드 행위를 설정한다

<EditText
    android:inputType = "text"                  // 일반적인 텍스트 키보드
    android:inputType = "phone"                 // 전화번호 입력 키보드
    android:inputType = "textEmailAddress"	// @문자를 가진 텍스트 키보드
    android:inputType = "textCapWords"		// 문장의 시작을 대문자로 변환
    android:inputType = "textAutoCorrect"	// 입력된 단어와 유사한 단어를 제시하고
                                                // 제시한 단어 선택 시, 입력된 단어를 대체
    android:inputType = "textMultiLine"		// 여러 줄을 입력 받을 수 있음
/>

 

EditText를 이용한 간단한 UI

 

 

2.5 Button

• Button클래스는 TextView의 서브클래스이므로, TextView의 모든 속성을 사용할 수 있다
  - singleLien: 텍스트가 위젯의 폭보다 길 때 강제로 한 줄에 출력
• 버튼 내에 텍스트, 아이콘을 표시할 수 있다
  - 버튼 전체를 이미지로 그리기 위해서는 ImageButton을 사용하도록 하자