[깡쌤의 안드로이드 프로그래밍 with 자바 - 2022 - 쌤즈] 정리 7 - 뷰의 기초 속성

책의 모든 내용을 저자 직강으로 진행한 강의는 ssamz.com 에서 들으실 수 있습니다.

본 글은 [깡쌤의 안드로이드 프로그래밍 with 자바 - 2022 - 쌤즈] 의 내용을 발췌한 것입니다.
좀더 자세한 내용은 책 혹은 인강(www.ssamz.com)을 통해 확인해 주세요.

 

3.1.3. 뷰의 기초 속성

UI 구성을 레이아웃 XML로 작성할 때 뷰 태그에 다양한 속성을 추가할 수 있으며, 속성들은 뷰에
따라 다릅니다. 특정 뷰만을 위한 중요 속성은 이후 각 뷰를 소개할 때 설명하고, 이곳에서는 모든 뷰에
공통으로 지정할 수 있는 중요 속성들을 설명해 보겠습니다.
안드로이드에서 가장 많이 이용되는 뷰 중 하나는 TextView이며, 화면에 문자열을 출력하는 뷰입니다.
TextView는 이후에 자세히 설명하므로 이곳에서는 레이아웃 XML에 TextView를 사용하는 예를
보여서 뷰의 중요 속성을 설명해 보겠습니다.

id 속성
id 속성을 간단하게 이야기하면 뷰의 식별자 속성입니다. 필수 속성은 아니며 필요할 때 추가할 수
있습니다.

 

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

위처럼 레이아웃 XML 파일에 TextView를 이용하면 화면에 문자열을 출력할 수 있습니다. 이때 id
속성 없이도 뷰의 내용을 화면에 출력하는 데는 문제가 없습니다. 개발자가 직접 객체를 생성하지
않았지만, 레이아웃 XML 파일에 명시한 뷰가 화면에 보인다는 건, 내부적으로는 TextView 객체가
자동으로 생성되어 출력된 것입니다. 이처럼 화면에 뷰의 내용을 출력만 하는 목적이라면 id 속성을
생략해도 상관없습니다.
하지만 이렇게 하면 레이아웃 XML에 등록하여 자동으로 생성된 뷰 객체를 자바 코드에서 이용할 수
없습니다. 즉, 뷰 객체를 자바 코드에서 획득하여 속성 변경 등의 작업을 수행할 수 없습니다. 왜냐하면,
뷰 객체를 자바 코드로 직접 생성한 게 아니어서 객체명을 알 수 없기 때문입니다.

결국, 레이아웃 XML에 등록하여 자동으로 생성된 객체를 자바 코드에서 식별할 방법이 필요한데요.
이때 이용하는 속성이 id입니다.

 

<TextView
android:id="@+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"/>

위의 코드처럼 android:id="@+id/myText"라고 설정하면 개발자가 임의의 이름으로 id 값을 하나
부여한 것이 됩니다. 이렇게 지정한 id 값은 해당 앱의 R.java 파일에 등록됩니다. id 값이 리소스는
아니지만, R.java에 등록되는 값이므로 개발자가 임의로 부여할 때 자바 명명규칙을 위배할 수
없습니다.
이제 자바 코드에서 뷰 객체를 획득해서 이용할 수 있습니다. 그러려면 자바 코드에서 findViewById()
함수를 사용합니다.

 

TextView myTextView=findViewById(R.id.myText);

정리하자면, 자바 코드에서 setContentView() 함수를 호출하면 레이아웃 XML 파일의 내용을 화면에
출력하고, XML에 정의한 객체가 자동으로 생성됩니다. 이렇게 생성된 객체는 R.java의 변수, 즉
XML에서 등록한 id 값을 매개변수로 하여 findViewById() 함수로 획득해서 사용할 수 있습니다.

layout_width와 layout_height 속성
뷰를 화면에 표시할 때 반드시 뷰의 크기(size)를 지정해야 합니다. 뷰의 크기를 지정하기 위한 속성은
layout_width, layout_height입니다. 이 속성으로 뷰의 가로세로 크기가 결정되는데요. 선언하지
않으면 빌드할 때 에러가 발생합니다.

 

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello world"
android:background="#FF0000"
android:textColor="#FFFFFF"/>

위의 코드는 layout_width, layout_height 속성을 이용하여 "hello world"라는 문자열이 화면에
보일 때, 뷰가 화면에서 차지해야 하는 크기를 지정하는 예입니다. 크기 속성값은 다음의 세 가지로
지정할 수 있습니다.

• match_parent
• wrap_content
• 100px

match_parent의 의미는 해당 뷰의 크기를 부모 계층의 뷰가 지정한 크기에 꽉 들어차게 자동으로
결정하라는 의미입니다. 뷰의 계층구조는 이후 자세하게 다루며, 이곳에서는 TextView를 감싸는 다른
뷰 태그로 생각하면 됩니다.
wrap_content는 해당 뷰의 내용을 화면에 보이기 위한 적절한 크기를 계산해서 결정하라는
의미입니다. TextView가 출력하는 내용은 문자열이며, 결국 문자열을 출력하기 위한 적절한 크기를
계산합니다. 당연히 문자열 폰트 크기의 영향을 받습니다. 문자열 폰트 크기를 늘리면 그만큼 뷰의
크기도 늘어납니다.
또는 100px처럼 수치로 뷰의 크기를 직접 설정할 수도 있습니다.

 

<?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:background="#F7FB08">
	<TextView
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="hello"
		android:background="#FF0000"
		android:textColor="#FFFFFF"/>
	<TextView
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:text="world"
		android:background="#0000FF"
		android:textColor="#FFFFFF"/>
</LinearLayout>

위의 코드는 LinearLayout 하위에 TextView 두 개가 있습니다. 결과는 다음과 같습니다.

결과를 쉽게 구별하고자 바탕색을 칠해 보았습니다. 전체 노란색 영역이 LinearLayout 영역으로
가로세로 크기가 match_parent로 지정되어 화면 전체를 차지했습니다. 붉은색 영역이 LinearLayout
하위의 첫 번째 TextView 영역으로 가로세로 크기를 wrap_content로 지정하여 "hello"라는
문자열을 출력할 정도의 크기만 확보되었습니다. 파란색 영역의 두 번째 TextView는 가로 크기를
match_parent로 지정하고, 세로 크기를 wrap_content로 지정하였는데, 가로 방향으로만 노란색
영역을 모두 차지하여 출력되었습니다.

 

margin과 padding 속성
margin은 뷰와 뷰 사이의 간격을 지정하는 속성이며, padding은 뷰 내부에서 내용과 뷰의 테두리
간의 간격을 지정하는 속성입니다. 뷰의 기본 margin과 padding 값이 있는데, 이를 증감하고자 할 때
사용하는 속성입니다.

 

margin과 padding 속성을 이용하면 간격이 네 방향 모두 같은 크기로 설정되며, 단일 방향의 간격만
조정하고 싶다면 다음과 같은 속성을 이용합니다.

• 단일 방향 margin 속성
  : layout_marginLeft, layout_marginRight, layout_marginTop, layout_marginBottom
• 단일 방향 padding 속성
  : paddingLeft, paddingRight, paddingTop, paddingBottom

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:padding="24dp"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
android:layout_marginLeft="16dp"
/>

첫 번째 버튼은 padding="24dp"로 설정하였으며, 두 번째 버튼은 layout_marginLeft="16dp"로
왼쪽 방향의 간격만 늘린 예입니다. 테스트해보면 결과는 다음처럼 나옵니다.

 

두 버튼의 문자열 크기는 같은데, 첫 번째 버튼의 padding 값에 따라 전체 뷰 크기가 두 번째 버튼보다
크게 출력되었습니다.

 

clickable 속성
안드로이드의 모든 뷰는 기본적으로 사용자의 클릭 이벤트나 롱클릭 이벤트에 반응합니다. 그리고
대표적인 사용자 이벤트 뷰인 버튼은 clickable 속성을 지정하지 않아도 기본으로 클릭이나
롱클릭 이벤트를 처리할 수 있습니다. 그런데 문자열을 출력하는 TextView나 이미지를 출력하는
ImageView는 clickable 속성을 명시적으로 지정(true)하지 않으면 이벤트에 반응하지 않습니다.
결국, clickable 속성은 TextView, ImageView 등에 클릭 이벤트가 발생하게 하는 속성입니다.
앱을 작성하다 보면 많은 버튼을 제공해야 하는데요. 이 버튼을 Button 클래스로만 작성하지 않고
다양한 이미지 버튼으로 제공할 수도 있습니다. 이때 이미지를 ImageView로 출력하고 clickable
속성으로 클릭 이벤트가 발생하게 하여 버튼 효과를 낼 때 유용하게 사용합니다.

 

visibility 속성
visibility는 뷰를 화면에 출력할지를 지정하는 속성입니다. 기본값은 "true"이며, "invisible",
"gone"으로 지정하면 화면에 안 보이게 할 수 있습니다.

 

<Button
android:id="@+id/btn_visible_target"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="hello world"
android:visibility="gone"/>

그림 3-19에서 왼쪽은 두 번째 뷰의 visibility 속성값을 "visible"로 지정하여 정상 출력하는 예입니다.
visibility 속성의 기본값이 "visible"이므로 속성을 지정하지 않아도 이 예에 해당합니다. 가운데는 두
번째 뷰의 visibility 속성값을 "invisible"로 지정한 예이며, 이때 두 번째 뷰는 영역만 확보하고 화면에
출력되지는 않습니다. 즉, 해당 영역이 비어 있는 상태가 됩니다. 오른쪽은 두 번째 뷰의 visibility 값을
"gone"으로 지정한 예로 화면에 출력도 안 되고, 크기도 확보하지 못합니다. 물론 화면에 나온다면
SomeView1과 SomeView2 사이에 나타납니다.
visibility 속성은 액티비티 화면을 레이아웃 XML로 구성할 때 초기에 특정 뷰를 화면에 출력하지
않으려는 의도로 사용합니다. 그러다 특정 순간에 동적으로 화면을 출력할 수 있습니다. 이때 자바
코드에서는 setVisibility () 함수를 이용하여 뷰의 표시 상태를 조정합니다.

 

@Override
public void onClick(View v) {
	if(v==trueBtn){
		targetBtn.setVisibility(View.VISIBLE);
	}else if(v==fasleBtn){
		targetBtn.setVisibility(View.INVISIBLE);
	}
}

책의 모든 내용을 저자 직강으로 진행한 강의는 ssamz.com 에서 들으실 수 있습니다.