본론으로 들어가기 전에

이 이야기를 하기 전에 안드로이드 UI를 구성하는 객체인 Component 자체를 간단히 정의해보자

• Component :

  1. (구성) 요소, 부품 [명사]
     the components of a machine

어떠한 객체의 구성요소를 뜻한다.

출처 : 컴포넌트(component)와 props

위 사진처럼 Product가 비슷한 형태로 반복되어 진다는 것을 알 수 있다.

우리는 이것을 Coponent라고 부르기로 했다.

결국 객체지향의 관점에서 보면

• Component : 재사용이 가능한 각각의 독립된 모듈이다. (재사용 가능한 UI 코드 조각)

이 될 수 있다.

• 출처 : 컴포넌트(Component)란?

1. View & ViewGroup

출처 : 안드로이드가 화면을 그리는 방법을 제대로 알아보기

View(widget)의 계층 구조이다.

안드로이드 화면상의 모든 객체들은 View 클래스를 상속받는다.

• View(widget)
  이 클래스는 사용자 인터페이스 컴포넌트의 기본 구성 요소를 나타냅니다.

  • View는 화면에서 직사각형 영역을 차지하며 그리기와 이벤트 처리를 담당합니다.
  • View는 대화형 UI 컴포넌트(버튼, 텍스트 필드 등)를 만드는 데 사용되는 위젯의 기본 클래스입니다.
  • ViewGroup 하위 클래스는 다른 View(또는 다른 ViewGroup)를 포함하고 레이아웃 속성을 정의하는 보이지 않는 컨테이너인 레이아웃의 기본 클래스입니다.

출처 : View

• ViewGroup(Layout)
  ViewGroup은 다른 뷰(자식이라고 함)를 포함할 수 있는 특별한 뷰입니다.

  • ViewGroup은 레이아웃과 뷰 컨테이너의 기본 클래스입니다.
  • 이 클래스는 또한 레이아웃 매개변수의 기본 클래스 역할을 하는 ViewGroup.LayoutParams 클래스를 정의합니다.
  • 예 : 다양한 레이아웃 구조를 제공하는 LinearLayout 또는 ConstraintLayout입니다.

출처 : ViewGroup

2. Layouts in views

Web을 개발할 때, HTML이 있듯이 안드로이드는 XML을 활용해서 만든다.

<ConstraintLayout>
    <TextView
        text="Hello World!">
    </TextView>
</ConstraintLayout>

ConstraintLayout 안에 Text로 Hello World! 를 넣는 화면은 어떻게 나올까 ?

이런식으로 화면이 구성된다.
Layout으로 안에 View들을 감싼걸 확인 할 수 있다

attribute는 View의 속성값이다. 종류에따라 여러가지 변환을 줄 수 있다

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

안드로이드 프로젝트 생성시, 기본으로 주어지는 코드이다

간단히 분석해보자면

• ConstrauntLayout 으로 전체를 감싼 상태.
• TextView를 사용했고
  - Width, Height는 Wrap_content
  ( wrap_content는 내용물 크기에 맞춰 뷰 크기가 자동으로 조절 속성)
  - 그외 constraint 제약조건 속성들 : 동서남북 다 연결
  

정도 된다. 속성들에 대해선 나중에 차차 소개하도록 하겠다.

결과적으론 이런화면이 됨

좀 더 디테일하게 보고싶다면

3. XML 읽기 및 이해

레이아웃 리소스

3. XML 리소스 로드

저런 XML 화면을 불러와서 컴파일해서 화면에 띄워야 온전히 앱의 실행이라고 할 수 있음.

그러기 위해서 우리는 몇가지가 필요한데,

• Kotlin파일과 (main_acitivty)
• 레이아웃 리소스 참조다 (R.layout.layout_file_name)

과정은 다음과 같다

1. 앱 빌드 시 XML 레이아웃 파일들은 View 리소스로 컴파일.
2. 액티비티의 onCreate() 메서드에서 setContentView() 함수로 레이아웃을 화면에 표시

   override fun onCreate(savedInstanceState: Bundle?) {
       // 부모 클래스의 onCreate 메서드 호출
       super.onCreate(savedInstanceState)

3. 레이아웃은 R.layout.파일이름 형식으로 참조

	// activity_main.xml 레이아웃을 화면에 로드
	setContentView(R.layout.activity_main)

4. 시스템이 액티비티 시작 시 onCreate()를 자동으로 호출하므로 이 시점에 레이아웃이 로드.

생명주기

나중에 생명주기와 쓰레드에 대해 따로 후술함