코틀린 공부09

화명을 구성하는 방법

안드로이드 앱의 구조는 컴포넌트를 기반으로 적절하게 조합해서 만듭니다.

여러 컴포넌트가 있지만 화면을 출력하는 컴포넌트는 액티비티뿐입니다.

화면에서 내용을 표시하려면 뷰클래스를 이용해 구성해야 합니다. 뷰로 화면을 구성하는 방법은 두 가지가 있습니다.

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

package com.example.testing_project01

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.LinearLayout
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val name =TextView(this).apply{
            typeface = Typeface.DEFAULT_BOLD
            text = "It's nameSpace"
        }
        val age =TextView(this).apply{
            typeface = Typeface.DEFAULT_BOLD
            text = "It's ageSpace"
        }
        val layout = LinearLayout(this).apply{
            orientation = LinearLayout.VERTICAL
            gravity = Gravity.CENTER
            addView(name, WRAP_CONTENT,WRAP_CONTENT)
        }
        setContentView(layout)
    }
}

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

<?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=".MainActivity">

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.553" />

</androidx.constraintlayout.widget.ConstraintLayout>

이렇게 소스로 xml을 구성하거나

안드로이드 스튜디오를 통해 앱의 화면구성

이렇게 xml을 구현하여

package com.example.testing_project01

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

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)//화면 출력xml 명시
    }
}

setContentView() 함수를 통해 화면에 보여줍니다. 

---

뷰 클래스

액티비티 화면을 구성할 때 사용하는 클래스는 모두 View의 하위 클래스 라고합니다. 화면 구성과 관련된 클래스를 통칭하여 뷰 클래스라고 합니다. 

• View : 모든 뷰 클래스의 최상위 클래스입니다. 액티비티는 View의 서브 클래스만 화면에 출력합니다.
• ViewGroup : View의 하위 클래스지만 자체 UI는 없어서 화면에 출력해도 아무것도 나오지 않습니다. 일종의 컨테이너와 비슷한 역할을 하며, 실제로는 ViewGroup의 서브 클래스인 레이아웃 클래스를 사용합니다.
• TextView : 특정 UI를 출력할 목적으로 사용되는 클래스, 문자열을 출력하는 뷰입니다.
• 레이아웃 클래스 : 다른 뷰 객체 여러 개를 담아서 한꺼번에 제어할 목적으로 사용

레이아웃 중첩 / 레이아웃 객체를 중첩하여 뷰의 계층 구조를 만들 수 있다. 이처럼 객체를 계층 구조로 만들어 이용하는 패턴을 컴포지트 패턴(composite pattern) 또는 문서 객체 모델(document object model)이라고 합니다.

 

레이아웃 XML의 뷰를 코드에서 사용하기 / id 속성을 사용하여 식별자를 부여하고 그 식별자로 객체를 얻어와야 합니다. id는 꼭 지정해야 하는 속성은 아니며 레이아웃 XML에 선언한 뷰를 구별할 필요가 없을 때는 생략해도 됩니다

<TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.553" />

위 소스의 2번째 줄을 보시면 "android:id="@+id/textView""라고 써있습니다. textView의 id값입니다. id 값은 앱에서 유일해야 합니다. XML에 id 속성을 추가하면 자동으로 R.java 파일에 상수 변수로 추가됩니다. XML 속성값이 @로 시작하면 R.java 파일을 의미합니다. 여기서 id는 textView입니다.

// XML 화면 출력
setContentView(R.layout.activity_main)
// id값으로 뷰 객체 획득
val textView1: TextView = findViewById(R.id.text1)

 

뷰의 크기 지정 / layout_width, layout_height 속성을 이용하여 얼마만큼의 크기로 화면에 View를 출력할 것인지를 지정할 수입니다. 속성 값은 수치, match_parent(상위 계층의 크기), wrap_content(자신의 콘텐츠를 화면에 출력할 수 있는 적절한 크기)중 하나로 성택 할 수 있습니다.

 

뷰의 간격 설정 / 뷰의 간격은 margin (뷰와 뷰 사이의 간격)과 padding (뷰의 콘텐츠와 테두리 사이의 간격)으로 설정할 수 있습니다. margin, padding 속성을 이용하면 간격이 네 방향 모두 같은 크기로 설정됩니다, 특정한 한 방향의 간격만 설정하고 싶다면 paddingLeft/Right/Top/Bottom과 Layout_marginLeft/Right/Top/Bottom 속성을 이용할 수 있습니다.

 

뷰의 표시 여부 설정(visibility 속성) / visible(default), invisible, gone으로 설정할 수 있습니다. 여기서 gone은 뷰가 화면에 출력되지 않고 자리 차지하지 않고 처음에는 화면에 보이지 않다가 어떤 순간이 되면 보이게 처리할 때 이 속성을 씁니다.

visibleBtn.setOnClickListener {
	targetView.visibility = View.VISIBLE
}

이렇게 코드에서 속성 값을 지정할 수도 있습니다.

---