레이아웃 및 뷰
XML 레이아웃으로 UI를 설계하고 ConstraintLayout, LinearLayout 및 TextView, Button, ImageView, EditText와 같은 일반적인 뷰를 사용합니다.
레이아웃 및 뷰은(는) CoddyKit의 무료 Android Academy 강의입니다. 이것은 7개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Android Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Android Academy 강의에는 총 7개의 강의가 포함되어 있습니다.
XML로 UI 만들기
Android UI는 res/layout/에 저장된 XML 레이아웃 파일에서 정의됩니다. 레이아웃은 화면의 구조와 모양, 즉 어떤 뷰를 표시하고 어디에 배치할지를 설명합니다.
그런 다음 Kotlin 코드가 이 레이아웃을 인플레이트하고 실행 중에 뷰와 상호작용합니다.
자주 사용하는 뷰 유형
가장 자주 사용하는 View 위젯은 다음과 같습니다.
TextView— 텍스트를 표시합니다EditText— 텍스트 입력 필드입니다Button— 클릭할 수 있는 버튼입니다ImageView— 이미지를 표시합니다CheckBox— 켜기/끄기를 전환합니다Switch— 켜기/끄기를 전환하는 컨트롤입니다(Material)
ConstraintLayout
ConstraintLayout은 대부분의 화면에 권장되는 레이아웃입니다. 제약 조건을 사용하여 뷰를 서로 또는 부모 뷰를 기준으로 배치할 수 있습니다. 앵커 지점을 연결하는 것과 비슷합니다.
- 평평한 계층 구조 — 중첩된 레이아웃이 필요하지 않습니다
- 유연함 — 모든 화면 크기에 대응합니다
- 새 Android Studio 프로젝트에서 기본으로 사용됩니다
ConstraintLayout XML
ConstraintLayout에서 화면 중앙에 배치된 TextView입니다.
<!-- res/layout/activity_main.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello Android!"
android:textSize="24sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>LinearLayout
LinearLayout은 뷰를 하나의 행이나 열로 배치합니다.
android:orientation="vertical"— 뷰를 위에서 아래로 쌓습니다android:orientation="horizontal"— 뷰를 나란히 배치합니다android:layout_weight— 남은 공간을 비율에 따라 나눕니다
단순하고 예측하기 쉽지만, 깊은 중첩은 피해야 합니다.
주요 레이아웃 속성
모든 View에는 다음과 같은 필수 속성이 있습니다.
layout_width/layout_height:match_parent,wrap_content또는 고정된 dp 값id: Kotlin에서 뷰를 참조할 때 사용합니다margin: 뷰 바깥쪽의 여백입니다padding: 뷰 안쪽의 여백입니다
크기에는 dp(밀도 독립적 픽셀)를 사용하고, 텍스트 크기에는 sp를 사용합니다.
ScrollView
콘텐츠가 화면보다 길 때는 ScrollView로 감싸세요.
- 직접적인 자식 뷰를 하나만 포함할 수 있습니다(일반적으로 LinearLayout)
- 기본값은 세로 스크롤입니다
- 가로 스크롤에는
HorizontalScrollView를 사용합니다
길고 동적인 목록에는 RecyclerView를 사용하세요. 더 효율적입니다.
코드에서 뷰 찾기
Kotlin 코드에서 뷰에 접근하는 방법은 두 가지입니다.
findViewById(R.id.tvTitle)— 고전적인 방법으로, ID로 뷰를 반환합니다- ViewBinding — 현대적인 방법으로, XML에서 바인딩 클래스를 생성하여 모든 뷰에 타입 안전하게 접근할 수 있게 합니다
ViewBinding을 강력히 권장합니다. 다음 레슨에서 배웁니다.
findViewById 사용하기
onCreate에서 뷰에 접근하고 수정합니다.
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val tvTitle = findViewById<TextView>(R.id.tvTitle)
tvTitle.text = "Welcome!"
tvTitle.textSize = 20f
}
}빠른 확인
Android 레이아웃에서 텍스트 크기에 사용해야 하는 단위는 무엇인가요?
복습: 레이아웃과 뷰
이제 Android 화면을 설계할 수 있습니다.
- UI는
res/layout/의 XML 레이아웃 파일에서 정의됩니다 - 자주 사용하는 뷰: TextView, EditText, Button, ImageView
- ConstraintLayout — 유연하고 평평한 구조이며 권장됩니다
- LinearLayout — 간단한 행/열 배치에 사용합니다
- 크기에는
dp, 텍스트에는sp를 사용합니다 findViewById를 사용하여 Kotlin에서 뷰에 접근합니다
다음: 사용자 입력을 처리하여 UI를 상호작용 가능하게 만들어 보겠습니다.
자주 묻는 질문
“레이아웃 및 뷰” 강의는 무료인가요?
네 — “레이아웃 및 뷰” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Android Academy 강의 전체를 잠금 해제할 수 있습니다. Android Academy 강의에는 총 7개의 강의가 포함되어 있습니다.
“레이아웃 및 뷰”에서 뭘 배우나요?
XML 레이아웃으로 UI를 설계하고 ConstraintLayout, LinearLayout 및 TextView, Button, ImageView, EditText와 같은 일반적인 뷰를 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 Android Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Android Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Android Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 7개 중 3번째 강의입니다.
“레이아웃 및 뷰” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Android Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Android Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.