[03] App: 안드로이드 앱 화면 구성 방법

09 Dec 2021

Reading time ~3 minutes

Table of Contents

목차
화면을 구성하는 방법
액티비티-뷰 구조
액티비티 코드로 화면 구성하기
- 액티비티 코드로 작성하는 방법
- 레이아웃 XML 파일로 작성하는 방법

화면을 구성하는 방법

액티비티-뷰 구조

안드로이드 앱의 기본 구조는 컴포넌트를 기반으로 한다.
➡ 안드로이드 앱은 액티비티, 서비스, 브로드캐스트 리시버, 콘텐츠 프로바이더와 같은 컴포넌트를 적절하게 조합해서 만듦

그런데 이 중에서 화면을 출력하는 컴포넌트는 액티비티뿐임
➡ 결국 앱에서 화면을 출력하고 싶다면 액티비티를 만들어야 하고, 이렇게 만든 액티비티에서 출력한 내용이 기기의 화면에 보이는 것

액티비티는 화면을 출력하는 컴포넌트일 뿐이지 그 자체가 화면이 아님
➡ 따라서 액티비티에서 적절한 화면을 구성 필요
➡ 별도로 화면 구성을 하지 않고 단순히 액티비티만 실행하면 텅 빈 흰색 화면만 보임
➡ 화면에 내용을 표시하려면 뷰 view 클래스를 이용해 구성해야 함

[뷰 클래스]

TextView 클래스: 화면에 문자열을 출력
ImageView 클래스: 이미지를 출력
결국 액티비티가 실행되면서, 뷰 클래스를 이용해 화면을 구성하고 이를 기기의 화면에 출력하는 구조임

액티비티 코드로 화면 구성하기

[액티비티에서 뷰로 화면을 구성하는 방법]

액티비티 코드로 작성하는 방법
레이아웃 XML 파일로 작성하는 방법

액티비티 코드로 작성하는 방법

화면을 구성하는 뷰 클래스를 액티비티 코드에서 직접 생성함

예를 들어 그림과 같은 화면을 구성한다고 생각해 본다면 TextView 클래스 2개와 ImageView 클래스 1개가 필요함.
그리고 이를 화면에 배치하려면 LinearLayout 클래스를 사용할 수 있음

이런 화면을 액티비티에서 직접 코드로 만들려면 다음처럼 작성 하면 됨

👀 (MainActivity.kt) 코드 보기

이 소스에서는 필요한 뷰 객체를 코드로 직접 생성했으며 크기, 출력 데이터 등도 일일이 객체에 대입했습니다.
그리고 TextView 2개와 ImageView 1개를 추가한 LinearLayout 객체를 액티비티 컴포넌트의 함수인
setContentView()로 전달해 화면을 출력했습니다.
즉, 화면 구성과 관련된 모든 내용을 직접 코드로 작성했습니다. ➡ 이렇게 하면 레이아웃 XML 파일은 사용하지 않으므로 작성하지 않아도 됩니다.

import android.graphics.Typeface 
import androidx.appcompat.app.AppCompatActivity 
import android.os.Bundle 
import android.view.Gravity 
import android.view.ViewGroup.LayoutParams.WRAP_CONTENT
import android.widget.ImageView 
import android.widget.LinearLayout 
import android.widget.TextView 
import androidx.core.content.ContextCompat

class MainActivity : AppCompatActivity() { 
      override fun onCreate(savedInstanceState: Bundle?) { 
         super.onCreate(savedInstanceState)
         // 이름 문자열 출력 TextView 생성
         val name = TextView(this).apply {
                  typeface = Typeface.DEFAULT_BOLD text = "Lake Louise" 
                  }
         // 이미지 출력 ImageView 생성
         val image = ImageView(this).also { 
                  it.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.lake_1)) 
                  }
         // 주소 문자열 출력 TextView 생성
         val address = TextView(this).apply {
                  typeface = Typeface.DEFAULT_BOLD text = "Lake Louise, AB, 캐나다"
                  } 
         val layout = LinearLayout(this).apply {
                  orientation = LinearLayout.VERTICAL 
                  gravity = Gravity.CENTER 
                  // LinearLayout 객체에 TextView, ImageView, TextView 객체 추가 
                  addView(name, WRAP_CONTENT, WRAP_CONTENT) 
                  addView(image, WRAP_CONTENT, WRAP_CONTENT) 
                  addView(address, WRAP_CONTENT, WRAP_CONTENT)
                  }
         // LinearLayout 객체를 화면에 출력 
         setContentView(layout) 
     }
}

레이아웃 XML 파일로 작성하는 방법

이번에는 액티비티의 화면 구성을 레이아웃 XML 파일로 구현해 보겠습니다. 화면을 구성하는 데 필요한 TextView, ImageView 등을 XML의 태그로 명시해 화면을 구성하는 방법입니다.

👀 (activity_main.xml) 코드 보기

<?xml version=”1.0” encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
      android:layout_width=”match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical" 
      android:gravity="center"> 
      <TextView android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:textStyle="bold" 
            android:text="Lake Louise" /> 
      <ImageView 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:src=”@drawable/lake_1” /> 
      <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold" 
            android:text="Lake Louise, AB, 캐나다" /> 
</LinearLayout>

앞서 액티비티 코드로 구현한 화면을 XML 파일로 구현한 예다.
이처럼 XML을 이용해 화면을 구현하면 액티비티 코드에 이 내용을 작성하지 않아도 되지만, 코드에서 화면을 구현한 XML을 명시해 어떤 화면을 출력할지 알려 줘야 함

즉, 액티비티에 다음과 같은 코드를 작성해야 함
XML에서 화면을 구현하므로 액티비티 코드에서는 화면을 출력하는 setContentView() 함수만 호출하면서 XML 파일을 전달하면 됨

// 액티비티에 레이아웃 XML 명시
class MainActivity: AppCompatActivity() { 
      override fun onCreate(savedInstanceState: Bundle?) { 
            super.onCreate(savedInstanceState)
            // 화면 출력 XML 명시 
           setContentView(R.layout.activity_main) 
      } 
}

효율성을 고려한다면** XML 파일로** 화면을 구현하는 것이 더 좋음.
액티비티에는 작성해야 할 코드가 많은데 화면을 구현 하는 코드까지 길어지면 유지·보수 면에서 부담스러움.

따라서 화면 구현은 XML 파일로 분리하고 액티비티에서는 네트워킹, 데이터 핸들링, 사용자 이벤트 처리 등의 코드만 작성하는 것이 더 효율적임