본문 바로가기
Programming/Android

앱의 기본 기능 구현

by Tarake 2024. 9. 26.

화면 구성 방법

액티비티-뷰 구조

앱 구조는 컴포넌트를 기반으로 합니다. 화면을 출력하는 컴포넌트는 액티비티이므로 화면을 출력하고 싶으면 액티비티를 만들어야 합니다.

 

액티비티는 화면을 출력하는 컴포넌트이지만 화면은 아니기 때문에 액티비티에 화면을 구성해야 합니다. 화면에 내용을 표시하려면 뷰 클래스를 이용해야 합니다.

뷰 객체를 생성하며 TextView 2개와 ImageView 1개를 추가한 LinearLayout 객체를 액티비티 컴포넌트로 전달해 화면을 출력했습니다.

 

레이아웃 XML로 화면 구성하기

액티비티의 화면 구성을 레이아웃 XML로 하였습니다.

코드에서 화면을 구현한 XML을 명시해 어떤 화면을 출력할지 알려줘야 합니다.

 

뷰 클래스

기본 구조

컴포넌트는 액티비티이고 액티비티가 실행되면서 뷰 클래스를 이용해 화면을 구성합니다. 안드로이드는 위에서 사용한 TextView와 같은 수 많은 뷰 클래스를 제공합니다. 

 

뷰 객체의 계층 구조

액티비티 화면을 구성하는 클래스는 모두 View 의 하위 클래스입니다. 

 

각 클래스의 역활은

  • View : 모든 뷰 클래스의 최상위 클래스로 액티비티는 View의 서브 클래스만 화면에 출력합니다.
  • ViewGroup : View의 하위 클래스이지만 자체 UI가 없어 화면에 출력해도 아무것도 출력되지 않습니다. 다른 뷰를 여러 개를 묶어서 제어할 목적으로 사용합니다.
  • TextView : 특정 UI를 출력할 목적으로 사용하는 클래스로 문자열을 출력하는 뷰입니다.
<LinearLayout xmlns=android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
</LinearLayout>

위 레이아웃은 화면에 아무것도 출력되지 않습니다. ViewGroup 클래스의 하위인 레이아웃 클래스는 다른 뷰 객체 여러 개를 담아서 한꺼번에 제어할 목적으로 사용합니다.

 

<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="94dp"
        android:gravity="center"
        android:textStyle="bold"
        android:text="Lake Louise" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="336dp"
        android:src="@drawable/lake" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="127dp"
        android:text="Lake Louise, AB, 캐나다"
        android:textStyle="bold" />
</LinearLayout>

레이아웃은 그릇 역활을 하기 때문에 레이아웃 클래스에 다른 뷰를 포함해서 화면을 구성합니다.

 

레이아웃 중첩

뷰의 계층 구조는 레이아웃 객체를 중첩해서 구성할 수 있습니다.

<?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">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON2" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="BUTTTON3" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="BUTTTON4" />
    </LinearLayout>
</LinearLayout>

객체를 계층 구조로 만들어 이용하는 패턴을 컴포지트 패턴(Composite pattern) 또는 문서 객체 모델(document object model)이라고 합니다.

 

레이아웃 XML의 뷰를 코드에서 사용하기

화면 구성을 레이아웃 XML 파일에 작성하고 액티비티에서 setContentView() 함수로 XML 파일을 지정하면 화면을 출력합니다.

 

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World" />

레이아웃 XML 파일에 작성하면 화면에 "Hello World" 라는 문자열을 출력합니다.

 

XML에 선언한 객체를 코드에서 사용해야 할 때가 있습니다. 이를 위해 객체에 식별자를 부여하고 그 식별자로 객체를 얻어와야 합니다. 이때 사용되는 속성이 id입니다.

 

<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World" />

id 값은 text1입니다. 식별자로 이용하기 때문에 앱에서 유일해야 합니다. XML에 id 속성을 추가하면 자동으로 R.java 파일에 상수 변수로 추가됩니다.

 

@+id/text1 형태에서 @로 시작하면 R.java 파일을 의미합니다. 즉 R.java 파일에 text1이라는 상수 변수를 추가하라는 의미입니다.

// XML 화면 출력
setContentView(R.layout.activity_main)
// 뷰 객체 획득
val text1 : TextView = findViewById(R.id.text1)
// 제네릭으로 획득
val text1 = findViewById<TextView>(R.id.text1)

액티비티의 화면을 출력하는 함수입니다. 함수를 호출만 해도 화면에 출력됩니다. 즉 화면에 뷰 내용이 나왔다는 것은 뷰 객체가 생성되었다는 뜻입니다. 생성된 뷰 객체를 findViewById(R.id.text1) 처럼 가져오면 됩니다.

 

뷰의 크기를 지정하는 방법

뷰를 이용해 화면을 구성할 때 뺄 수 없는 것이 크기입니다. 뷰가 어떤 크기로 보여야 하는지는 필수 정보이며 크기를 결정하는 속성을 사용합니다.

android:layout_width="wrap_content"
android:layout_height="wrap_content"

layout_width, layout_height 속성을 이용해서 어느정도 크기로 화면에 출력할 것인지를 결정합니다. 크기를 나타내는 속성값에는 3가지 중 하나를 사용합니다.

  • 수치
  • match_parent
  • wrap_content

가로와 세로를 px혹은 dp 등의 단위로 설정할 수 있습니다. 수치에서 단위는 생략할 수 없습니다.

match_parent는 부모의 크기 전체를 뜻합니다. 뷰 객체는 계층 구조이기 때문에 match_parent는 상위 계층의 크기를 말합니다.

wrap_content는 콘텐츠를 화면에 출력할 수 있을 정도의 적절한 크기를 의미합니다. 즉 출력될 정도의 크기로 설정되기 때문에 문자열이 길어지거나 글꼴이 커지는 등의 변화가 발생하면 뷰 크기도 같이 변합니다.

Button을 LinearLayout에 추가했기 때문에 Button 객체의 상위 계층은 LinearLayout입니다. HI 버튼은 match_parent로 지정했기 때문에 LinearLayot 넓이만큼 커졌습니다. 하지만 나머지 버튼은 wrap_content 크기를 지정했기 때문에 글자 수 만큼 넓이가 넓어집니다.

 

뷰의 간격 설정

뷰의 간격은 margin과 padding 속성으로 설정합니다. margin 속성은 뷰 사이의 간격이고 padding 속성은 컨텐츠와 테두리 사이의 간격입니다.

margin, padding 속성은 간격이 네방향 모두 설정되지만 Left, Right, Top, Bottom 속성을 사용하면 한 방향의 간격을 설정할 수 있습니다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="30dp"
        android:text="hello" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="30dp"
        android:text="hello world" />
</LinearLayout>

 

뷰의 표시 여부 설정

visibility 속성은 뷰가 화면에 출력되어야 하는지 설정합니다. 기본값은 visible이며 화면에 출력됩니다. invisible 속성은 뷰가 화면에 보이지 않지만 자리는 차지하며 gone은 화면에 보이지 않고 자리를 차지하지 않습니다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="invisible"
            android:text="button2" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button3" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button4" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone"
            android:text="button5" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button6" />
    </LinearLayout>
</LinearLayout>

button2는 visibility 값을 invisible로 설정했고 button5는 gone으로 설정했습니다.

사진과 같이 invitibile로 설정한 button2는 화면에는 안보이지만 자리를 차지합니다. 하지만 button5는 gone으로 설정하여 보이지 않고 자리도 차지하지 않는 것을 볼 수 있습니다.

 

targetView.visibility = View.VISIBLE
targetView.visibility = View.INVISIBLE

XML이 아닌 코드에서 visibility 속성을 사용하려면 위와 같이 작성하면 됩니다.

 

뷰 살펴보기

텍스트 뷰

TextView는 문자열을 화면에 출력하는 뷰입니다.

 

android:text 속성

TextView는 출력할 문자열을 지정합니다. "helloworld" 같이 문자열을 대입해도 되고 "@string/helloworld" 같이 문자열 리소스를 지정해도 됩니다.

 

android:textColor 속성

문자열의 색상을 지정합니다. "#000000" 같이 RGP 16진수를 사용합니다.

 

android:textSize 속성

문자열의 크기를 지정합니다. "20sp" 같은 값을 사용하고 px, dp, sp 등의 단위는 생략할 수 없습니다.

 

android:textStyle 속성

문자열의 스타일을 지정합니다. "bold" 처럼 작성하며 값은 bold, italic, normal 중에서 선택합니다.

 

android:autoLink 속성

autoLink 속성은 TextView에 출력할 문자열을 분석해 특정 형태의 문자열에 자동으로 링크를 추가해 줍니다.

 

android:maxLines 속성

TextView에 문자열을 출력할 때 긴 문자열은 자동으로 줄바꿈을 합니다.

 

android:ellipsize 속성

ellipzsie 속성은 출력되지 않은 문자열이 더 있다는 것을 표시하는 줄임표를 출력합니다. 속성값으로는 end, middle, start 등으로 end는 문자열 뒤에 줄임표가 추가, start와 middle은 줄임표가 각각 앞과 중간에 추가됩니다.

 

이미지 뷰

ImageView는 이미지를 화면에 출력하는 뷰입니다.

 

android:src 속성

ImageView에 출력할 이미지를 설정합니다.

 

android:maxWidth, maxHeight, adjustViewBounds 속성

ImageView가 출력하는 이미지의 최대 크기를 지정합니다.

 

버튼, 체크박스, 라디오 버튼

Button은 사용자 이벤트를 처리하고 CheckBox는 다중 선택을 RadioButton은 단일 선택을 제공하는 뷰입니다. 체크박스는 하나가 선택되어도 다른 체크박스를 선택할 수 있지만 라디오 버튼은 여러 개 중 하나만 선택할 수 있습니다. 그러므로 라디오 버튼은 RadioGroup으로 묶어서 사용합니다.

 

에디트 텍스트

EditText는 사용자가 글을 입력할 수 있는 뷰입니다.

 

android:lines, android:maxLines 속성

EditText는 사용자가 엔터를 누르면 한 줄이 늘어나게 됩니다. 처음부터 여러 줄 입력 크기로 나오게하는 속성은 android:lines입니다. android:maxLines는 처음 지정한 줄 외에는 더 이상 늘어날 수 없습니다.

 

android:inputType 속성

inputType은 글을 입력할 때 올라오는 키보드를 지정하는 속성입니다.

 

 

뷰 바인딩

뷰 바인딩(View Binding)은 레이아웃 XML 파일에 선언한 뷰 객체를 코드에서 이용하는 방법입니다. 레이아웃 XML 파일에 등록된 뷰는 findViewById() 함수로 얻어서 사용합니다. findViewById()는 화면을 구성하는 뷰를 하나하나 가져와야하는 단점이 존재합니다.

 

선언한 뷰를 코드에서 id 값을 얻어 사용할 수 있지만 뷰 바인딩 기법을 이용하면 간단하게 뷰 객체를 이용할 수 있습니다. 

build.gradle 파일 android 영역에 뷰 바인딩을 적용하라는 의미로 viewBinding enable = true를 설정하면 레이아웃 XML 파일에 등록된 뷰 객체를 포함하는 클래스가 자동으로 만들어집니다. 

 

자동으로 만들어지는 클래스명은 XML 파일명에 따라 activity_main.xml은 ActiivityMainBinding 처럼 만들어집니다.

 

자동으로 만들어진 클래스의 inflate() 함수를 사용하면 바인딩 객체를 얻을 수 있습니다. 인자로는 layoutInflater를 전달합니다. 

 

바인딩 객체에 등록된 뷰 객체명은 XML 파일에 등록한 뷰의 id값을 따릅니다.

'Programming > Android' 카테고리의 다른 글

안드로이드 소개  (0) 2024.09.24
안드로이드 처음 시작하기  (0) 2024.09.23

관련글

티스토리툴바