[Must Have Joyce의 안드로이드 앱프로그래밍] 5장 화면 구성하기: 뷰(위젯)

뷰

• UI 구성요소의 기본 클래스이면서 화면을 구성하는 기본 단위
• 위젯: 화면에 직접적으로 보이고 사용자와 상호작용하는 뷰(버튼, 입력창, 이미지, 리스트 등)
• 뷰 그룹: 한 개 이상의 뷰 혹은 다른 뷰 그룹을 담고 뷰들을 배치하는 역할(레이아웃의 역할)

뷰 공통 속성

• layout_width: 가로길이
• layout_height: 세로길이
• padding: 콘텐츠와 콘텐츠 외곽 사이의 여백
• layout_margin: 부모 레이아웃과의 간격

💡 tip
크기 설정에 dp(density-independent pixel) 단위를 사용하면 기기의 해상도에 맞춰 자동으로 픽셀값을 조정해줌

텍스트뷰

• text
• textColor
• textSize
• textStyle

sp: 텍스트 크기 지정 단위

💡 tip

하드코딩을 피해 유지보수가 쉽도록 작성하는 법

• colors.xml 밸류 리소스 파일 이용해 텍스트뷰 색상 한 번에 지정 가능
  [app] ➡️ [res] ➡️ [values] ➡️ [colors.xml]
  
  colors.xml

    <color name="colorMain">#000000</color>
    <color name="colorSub">#25A632</color>

• colors.xml 아래의 string.xml 파일에서는 텍스트 지정 가능
  
  strings.xml

<string name="greeting">Hi</string>

• 적용할 xml 파일에서 android:text="@string/greeting"와 android:textColor="@color/colorMain"으로 텍스트와 색상 지정
  activity_learning_views.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LearningViews">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/greeting"
        android:textColor="@color/colorMain"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

이미지뷰

1. [app] ➡️ [res] ➡️ [drawable] 파일에 원하는 png 이미지 파일 드래그 앤 드롭
   (안되면 복사 붙여넣기도 가능)
2. 해당 이미지뷰를 넣을 xml 파일에 코드 작성
   (android:src="@drawable/ailen")

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".LearningViews">
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/greeting"
        android:textColor="@color/colorMain"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ailen" />
    <ImageView
        android:id="@+id/ailen"
        android:layout_width="wrap_content"
        android:layout_height="450dp"
        android:src="@drawable/ailen"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/text"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

이미지뷰 비율 조정하기

• android:scaleType="속성값" 이용해 조정

📚 속성값

firCenter

• 가로, 세로 중 한 방향으로 이미지뷰의 센터를 기준으로 스케일
• 이미지뷰의 크기를 바꿔도 여백이 어디 생기느냐의 문제임
  (원본 사진의 비율은 그대로 유지)

fitXY

• 가로, 세로 방향으로 이미지가 이미지뷰를 빈틈없이 가득 채움
• 이미지뷰의 크기를 바꾸면 원본 사진의 비율도 바뀜

center

• 스케일 없이 원본 이미지를 가운데 표시
• 이미지 원본의 크기가 이미지뷰보다 크면 이미지가 잘림

centerCrop

• 이미지 비율은 그대로 유지한 상태로 스케일
• 이미지 원본의 크기가 이미지뷰보다 크면 경계에 먼저 닿는 쪽의 튀어나온 부분을 잘라서 보여줌

버튼

• 텍스트뷰를 상속하고 있기 때문에 텍스트뷰의 속성과 기능 대부분 사용 가능

에디트텍스트

• 사용자의 입력을 받는 뷰
• 텍스트뷰를 상속하고 있기 때문에 텍스트뷰의 속성과 기능 대부분 사용 가능

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Hello라고 입력해주세요."
        android:padding="10dp"
        android:layout_margin="10dp"/>

전체 코드

LearningViews.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class LearningViews : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_learning_views)
    }
}

activity_learning_views.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".LearningViews">
    <ImageView
        android:id="@+id/ailen"
        android:layout_width="wrap_content"
        android:layout_height="450dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ailen"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/text"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/greeting"
        android:textColor="@color/colorMain"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ailen" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Hello라고 입력해주세요."
        android:padding="10dp"
        android:layout_margin="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text" />

</androidx.constraintlayout.widget.ConstraintLayout>