[Android 앱개발 입문] 위젯 (# 추가하기)

1. 위젯

    : View의 서브 클래스 중 화면에 보이는 것들

    - ex. TextView, EditText, Button

 

2. view

    : 모든 UI 컴포넌트들의 부모 클래스 (View 클래스의 속성은 모든 UI 컴포넌트들에서 공통적으로 사용 가능)

1) id : UI 컴포넌트를 고유하게 식별하는 식별자 (중복될 수 없음)

    (1) 식별자 지정 형식

android:id="@+id/my_button"

    (2) 식별자 참조 형식

android:id="@id/my_button"

 

2) layout_width, layout_height

    (1) match_parent 또는 fill_parent : 부모 UI 컴포넌트의 크기에 맞춤

    (2) wrap_content : UI 컴포넌트의 내용물 크기에 맞춤 

    // px (pixel) 형식으로 view의 크기 설정 시 디스플레이 해상도에 따라 view의 크기가 달라보임

    // dp 형식은 밀도에 독립적인 단위. 1dp는 밀도가 160dpi의 화면일 때 1픽셀을 나타냄 (자동으로 맞춰짐)

 

    // 다양한 해상도 대응 방법 -> 다양한 사이즈의 이미지를 준비해서 (5장) 모두 drawable에 넣어야 함

        // 9-PATCH 이미지 : 이미지가 그려질 영역의 크기가 늘어나거나 줄어들어도 원본이미지 형태를 유지하도록 된 것

 

3. TextView

    : 화면에 text를 표시하는 용도

- 주요 속성

    1) View 속성 상속 : id, layout_width, layout_height, background, etc

    2) text : 출력할 문자열 지정

    3) textSize : 폰트 크기

    4) textStyle : 텍스트 스타일 (bold, italic, normal)

    5) typeface : 텍스트 폰트 (normal, sans, serif, monspace)

    6) textColor : 문자열 색상

    7) singleLine : 속성값이 "true" 이면, 텍스트가 위젯의 폭보다 길 때 강제로 한 줄에 출력

 

4. EditText 

    : 입력이 가능한 Text창

    - TextView의 모든 속성 상속 (EditText는 TextView의 서브클래스)

    - inputType : 입력 시 허용되는 키보드 타입 설정 및 키보드 행위를 설정

1) 키보드 타입 설정 값

    (1) "text" : 일반적인 텍스트 키보드

    (2) "phone" : 전화번호 입력 키보드

    (3) "textEmailAddress" : @문자를 가진 텍스트 키보드

2) 키보드 행위 설정 값

    (1) "textCapWords" : 문장의 시작을 대문자로 변환

    (2) "textAutoCorrect" : 입력된 단어와 유사한 단어를 제시하고 제시된 단어 선택 시, 입력된 단어를 대치

    (3) "textMultiLine" : 여러 줄을 입력받을 수 있음

 

    // background : 뷰의 배경을 지정, 색상 및 이미지 등의 여러 객체로 지정 가능

 

5. Button

    : 사용자가 버튼을 눌렀을 때 어떤 행동을 수행하게 함

    - Button 클래스는 TextView의 서브클래스. TextView의 모든 속성 사용 가능 (ex. singleLine)

    - 버튼 내에 텍스트, 아이콘 표시 가능 (버튼 전체를 이미지로 그리기 위해서는 ImageButton 사용)

 

(1) 버튼 클릭 이벤트 처리 방법 1 (버튼 위젯의 onClick 속성 활용 - doAction())

    : 버튼 위젯을 정의한 화면을 contentView로 설정한 액티비티 클래스에 새로운 메소드 (ex. doAction() 추가)
        -> 버튼 위젯을 정의한 xml 레이아웃 파일(ex. text_views.xml)에서, 버튼 위젯의 onClick 속성에 앞 단계에서 추가한 메소드를 설정

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="EditText Test"
        android:textColor="#ff0000"
        android:textSize="10pt"
        android:typeface="serif"
        android:textStyle="bold"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="ID"
        android:inputType="text"
        android:textSize="10pt"
        android:textStyle="italic"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="PassWord"
        android:inputType="textPassword"
        android:textSize="10pt"
        android:textStyle="italic"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Telephone"
        android:inputType="phone"
        android:textSize="10pt"
        android:textStyle="italic"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:textSize="10pt"
        android:textStyle="italic"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Description"
        android:inputType="text|textMultiLine|textAutoCorrect"
        android:textSize="10pt"
        android:textStyle="italic"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit"
        android:onClick="doAction"/> 		//doAction 사용

</LinearLayout>

package com.example.uibasic

import android.os.Bundle
import android.view.View
import android.widget.Toast
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.text_views)
//        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
//            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
//            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
//            insets
//        }
    }
    fun doAction(v: View){
        //text_views에서 만든 doAction
        Toast.makeText(getApplicationContext(), "Submitted Successfully", Toast.LENGTH_SHORT).show()
    }
}

 

(2) 버튼 클릭 이벤트 처리 방법 2 (이벤트 처리 객체 사용)

    : 이벤트를 처리하는 객체를 생성, 해당 이벤트를 발생시키는 위젯에 등록

    - 위젯에서 이벤트가 발생하면 등록된 이벤트 처리 객체가 정의된 일을 수행함

    - 버튼이 클릭되었을 때 발생하는 클릭 이벤트를 처리하기 위해 View.OnClickListener 인터페이스를 구현하는 클래스를 정의 -> 구현한 클래스의 객체를 생성해 클릭 이벤트를 발생시키는 버튼 위젯에 등록

    - 버튼 위젯을 정의한 레이아웃 파일(ex. text_views.xml)에서 Button 객체를 코틀린 코드에서 참조하기 위해 버튼 위젯에 id속성 추가

    <Button
        android:id="@+id/submit_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit" />

package com.example.uibasic

import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.Toast
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.text_views)

        //text_views.xml에 정의된 view 객체 중에서 id가 submit_button인 것을 찾아 반환함
        val btn = findViewById<Button>(R.id.submit_button)

        //버튼이 클릭되었을 때 발생되는 클릭 이벤트를 처리하기 위해서는 View.OnClickListener 인터페이스를 구현
        btn.setOnClickListener{
            Toast.makeText(this,"submitted successfully", Toast.LENGTH_SHORT).show()
        }
    }
}

    // findViewById( )

    : Activity 클래스에 정의된 메소드로, Activity 하위 클래스(ex. AppCompatActivity)에서 사용 가능

    - 해당 액티비티와 연결된 XML layout 리소스 요소 (위젯) 중에서 id속성을 바탕으로 해당 java 객체를 가져옴
        - onCreate() 메소드 내의 setContentView() 를 통해서 연결된 XML 리소스 요소 중에서만 검색이 가능함
            -> 다른 액티비티와 연결된 XML layout 리소스에 정의된 위젯을 findViewById( ) 메소드로 가져올 수는 없음

 

 

6. ImageView

    : 앱 화면에 이미지를 표시하는 용도

    [1] layout 리소스 XML 파일에 ImageView를 추가

        - "src" 속성에 이미지(drawable)의 리소스 ID를 지정
        - android : src-Image View에 표시 될 Drawable 지정
            (@drawable/xxx의 형식으로 Drawable 리소스 지정 가능, 컬러값 사용 가능)

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView1"
    android:scr="@drawable/android_icon"/>

    [2] 화면에 표시할 이미지를 Drawable 리소스에 추가

        - 이미지 파일의 형식은 .png를 많이 사용 (투명도)
        - 이미지 파일을 /res/drawable에 추가
        - 해상도에 따른 다른 크기의 이미지는 별도의 폴더를 생성하고 복사 (ex. drawable-xhdpi 등...)
        - 한글 포함 불가, 대문자 포함 불가, 숫자로 시작 불가 // _로 시작 가능

    [3-1] 화면에 표시할 이미지(Drawable)리소스 id를 ImageView의 "src" 속성에 지정

 

    [3-2] Kotlin 소스에서 ImageView의 이미지 변경

        : ImageView의 id를 이용해 참조를 획득한 후, setImageResource( ) 함수 호출

class MainActivity : AppCompatActivity(){
    override fun onCreate(savedInstanceState: Bundle?){
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        var imageView: ImageView = findViewById(R.id.imageView1)
        imageView.setImageResource(R.drawable.google_logo)
    }
}

 

    [4] ImageView의 영역에 맞게 이미지 확대 또는 축소

        : scaleType 속성 > android:scaleType

    (1) android:scaleType = "Center"

        : 이미지의 크기, 비율을 유지하며 이미지의 중앙을 ImageView의 중심에 맞춤
         (ImageView보다 이미지가 클 경우 이미지가 잘림)

    (2) android:scaleType = "centerCrop"

        : 이미지의 비율을 유지하며 가로, 세로 중 짧은 쪽을 ImageView에 꽉 차게 출력
         (ImageView를 벗어나는 부분은 출력되지 않음)

    (3) android:scaleType = "centerInside"

        : 이미지의 가로, 세로 중 긴 쪽을 ImageView의 레이아웃에 맞춰 출력
         (이미지의 비율 유지됨, 남는 공간은 background의 색으로 채워짐)
        - fitCenter과 달리, 이미지가 ImageView보다 작을 경우 크기 유지됨

    (4) android:scaleType = "fitCenter"

        : centerInside와 유사
         (단, 이미지의 크기가 ImageView보다 작다면 ImageView의 크기에 따라 달라짐)

    (5) android:scaleType = "fitStart"

        : ImageView 안에서 가로, 세로 비율을 유지하며 fit하게 출력됨
         (단, fitCenter과 다르게 왼쪽 상단을 기준으로 정렬됨)

    (6) android:scaleType = "fitEnd"

        : fitStart와 마찬가지로 가로, 세로 비율을 유지하며 fit하게 출력됨
         (우측 하단을 기준으로 정렬)

    (7) android:scaleType = "fitXY"

        : 가로, 세로 비율에 상관없이 ImageView에 꽉 차게 그려짐
         (이미지가 찌그러진 상태로 보임)

    (8) android:scaleType = "matrix"

        : 이미지의 크기, 비율을 유지하며 ImageView의 좌측 상단을 기준으로 정렬
         (이미지가 크다면 ImageView 외의 부분은 출력되지 않음)