5. 레이아웃과 UI 디자인
안드로이드에서 UI(User Interface)는 주로 XML 파일을 사용하여 설계됩니다. UI 구성 요소는 크게 뷰(View)와 뷰 그룹(ViewGroup)으로 나뉩니다. 이 장에서는 안드로이드 레이아웃의 다양한 유형, XML을 사용한 UI 디자인 방법, 그리고 뷰와 뷰 그룹에 대해 설명합니다.
레이아웃 소개
안드로이드에서 레이아웃은 뷰(View) 및 뷰 그룹(ViewGroup)을 배치하고 조정하는 방식입니다. 대표적인 레이아웃 유형은 다음과 같습니다:
- LinearLayout
- 자식 뷰를 수평 또는 수직으로 정렬합니다.
android:orientation속성을 사용하여 방향을 설정합니다.- 자주 사용되는 속성:
orientation,gravity,layout_weight
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, World!" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me" />
</LinearLayout>
- RelativeLayout
- 자식 뷰를 서로 상대적으로 배치합니다.
- 각 뷰는 다른 뷰에 대해 상대적으로 배치될 수 있습니다.
- 자주 사용되는 속성:
layout_above,layout_below,layout_toLeftOf,layout_toRightOf
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, World!" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/textView"
android:text="Click Me" />
</RelativeLayout>
- ConstraintLayout
- 유연하고 강력한 레이아웃 시스템으로, 자식 뷰를 제약 조건을 사용하여 배치합니다.
- 제약 조건은 뷰의 경계, 중앙, 비율 등을 기준으로 설정됩니다.
- 자주 사용되는 속성:
layout_constraintTop_toTopOf,layout_constraintBottom_toBottomOf,layout_constraintStart_toStartOf,layout_constraintEnd_toEndOf
<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/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, World!"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"
app:layout_constraintTop_toBottomOf="@id/textView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
XML을 사용한 UI 디자인
안드로이드에서는 XML을 사용하여 UI를 디자인할 수 있습니다. XML 파일은 프로젝트의 res/layout 디렉토리에 저장됩니다. XML을 사용하면 뷰의 속성을 선언하고, 레이아웃을 정의하며, UI 요소를 배치할 수 있습니다.
<!-- res/layout/activity_main.xml -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, World!"
android:textSize="24sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"
android:layout_marginTop="16dp" />
</LinearLayout>
뷰와 뷰 그룹
- 뷰(View): 화면에 표시되는 기본 구성 요소입니다. 텍스트, 버튼, 이미지 등 다양한 유형의 뷰가 있습니다.
- 예시:
TextView,Button,ImageView - 뷰 그룹(ViewGroup): 다른 뷰와 뷰 그룹을 포함할 수 있는 컨테이너입니다. 레이아웃을 정의하고, 자식 뷰의 배치를 관리합니다.
- 예시:
LinearLayout,RelativeLayout,ConstraintLayout
뷰와 뷰 그룹의 계층 구조를 이해하는 것은 UI를 설계하고 구성하는 데 중요합니다. 모든 뷰는 View 클래스를 상속하며, 모든 뷰 그룹은 ViewGroup 클래스를 상속합니다.
예제 코드
다음은 LinearLayout을 사용하여 간단한 UI를 디자인하는 예제입니다.
<!-- res/layout/activity_main.xml -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, World!"
android:textSize="24sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"
android:layout_marginTop="16dp" />
</LinearLayout>
이 XML 레이아웃은 화면 중앙에 텍스트와 버튼을 배치합니다. TextView는 “Hello, World!” 텍스트를 표시하고, Button은 “Click Me” 텍스트를 표시합니다.
이제, 이 레이아웃을 MainActivity에서 사용할 수 있습니다.
// MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
이로써 안드로이드에서 레이아웃과 UI 디자인을 다루는 기본적인 내용을 마칩니다. 다양한 레이아웃과 뷰, 뷰 그룹을 사용하여 복잡하고 유연한 UI를 설계할 수 있습니다.