안드로이드 앱 프로그래밍 View

1. View 소개

Activity 와 View의 관계

Activity개요

• Activity는 안드로이드 앱의 각 화면을 구성하는 단위임
• Activity 자체는 독립적으로 화면에 보이지 않음
• Activity가 포함하는 View들이 사용자에게 보이는 실체(XML 구조의 코드 : 데이터 부분-1강 참조)
• 안드로이드 앱은 여러 개의 View가 모여서 하나의 Activity를 구성함
• Activity 여러 개가 모여서 하나의 안드로이드 앱을 구성하는 구조로 되어 있음
• View를 구현하는 JAVA 클래스는 다수의 속성과 메소드를 가지고 있지 만, View는 개발의 용이성을 위해 데이버 부분에서 XML 구조를 통해 구현함

View의 종류

• View는 크게 위젯(Widget)과 레이아웃(Layout)으로 구분됨
• 위젯은 사용자와 상호작용을 위한 인터페이스 역할
• 레이아웃은 이러한 위젯을 화면에 정렬하며 배치하는 역할
• 위젯은 레이아웃에 포함되고 레이아웃은 다른 레이아웃의 하위 구성요소로 포함될 수 있음

위젯(Widget)과 레이아웃(Layout)

• 하나의 화면을 구성하는 View들(위젯과 레이아웃)은 트리구조 형태로 연결됨
• 하나 이상의 Activity가 최상위 레이아웃을 참조하여 화면을 그리게 됨
• 하지만, 위젯과 레이아웃의 구분은 불명확해지고 있으며 레이아웃이면서 위젯의 특징을 가지고 있는 경우도 있음

위젯

• 스마트폰 화면에서 사용자 인터페이스를 구성하는 역할을 하는 위젯은 View 클래스로부터 파생되며, 간단하게 View라고 부르기도 함
• TextView, EditView, Button, RadioButton 등이 대표적인 위젯임
• 스스로 화면에 특정 내용을 출력할 수 있는 능력을 가지고있음
• 사용자들과 직접적인 상호작용(사용자 인터페이스; UI)을 이끌어 내고, 상호작용의 결과를 JAVA 코드에 전달하여 다른 위젯이 가진 UI(User Interface)에 출력하기도 함

레이아웃

• View를 담는 쟁반 역할을 하는 레이아웃은 ViewGroup 클래스로 구현됨
• 위젯과 레이아웃은 레이아웃에 담겨 출력될 수 있음
• 대부분의 ViewGroup 파생 클래스들은 화면에 보이지 않으면서 다른 View들을 유기적으로 모아 두는 쟁반 역할만 수행하는 것이 기본 기능임

레이아웃 예)

• 특정 ViewGroup 클래스는 화면에 리소스를 출력하면서 위젯 역할도 수행함 : 대표적인 예로 하위 View들을 순차적으로 배치하는 ListView 가있음
• ListView는 단순 위젯 대비 많은 기능을 가지고 있어 상대적으로 사용 방법과 절차가 어렵고 복잡함

위젯과 레이아웃(ViewGroup)

2. View 속성 1

id 속성

• View의 이름을 정의하는 것이 id 속성임
• JAVA 코드나 XML 문서에서 View를 참조할 때 ID 속성값을 사용하므로 View의 유형과 목적을 나타내는 직관적인 이름을 붙이는 것이 좋음
• 직관적인 ID 속성값의 사용은 JAVA 코드의 이해도나 가독성을 높여 주며, 앱의 규모가 커질수록 복잡해지는 소스 코드를 구조적으로 관리하는 것을 도와줌

<?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">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button" />
</LinearLayout>

“@+id/ID” id 속성을 구성하는 세부 요소

• @ : id를 R.java에 등록하거나 R.java로부터 참조할 때 사용됨
• +:ID를 새로 정의 한다는 의미이며, 처음 정의할 때만 사용하고 참조할 때는 사용하지 않음
• id/ : 안드로이드 개발에 반드시 사용되어야 함
• ID : id/ 이후에 나오는 요소로 ID 속성값(이름)임. 고유한 값으로 지정하여 View들 사이의 중복을 피하고 명칭 규칙을 준수해야 함

사용 예시

• 예를 들어, Button 위젯을 대상으로 button 이라는 id(이름)를 부여하기 위해서는 다음과 같이 정의할 수 있음
• android:id="@+id/button"
• Button에서 textView라는 id를 가진 View에 접근하기 위해 다음과 같이 정의할 수 있음

android:layout_below="@id/textView"

• “button”이나 “textView”와 같이 View의 유형을 나타낼 수 있는 직관적인 이름을 ID 속성값으로 사용하는 것이 좋음

2. background 속성

• View의 배경을 이미지로 채우는 방식과 배경에 대한 정보를 정의하는 속성임
• 별다른 지정이 없다면 View에서 제공하는 기본 배경으로 채워지게 됨
• 단순한 색상 뿐만 아니라 여러가지 객체로 배경을 지정할 수 있는 방법을 제공함

<Button
    ...
    android:background="@mipmap/ic_launcher"
    ...
/>

화면에 버튼을 출력하는 예제

• background 속성에 ic_launcher라는 id를 가진 이미지를 사용하고 있음
• ic_launcher를 background 속성에 대입하면 버튼의 기본 회색 모양이 사라지고 지정한 이미지로 Button의 배경이 변경됨

색상을 채워 넣는 방법

• background 속성에 이미지가 아닌 색상을 채워 넣는 방법도 있음
• background로 채울 색상을 지정하기 위해서 ‘#’ 기호로 시작되는 색상코드를 사용함
• 안드로이드에서 사용 가능한 색상 코드의 유형 네가지는 다음과 같음

#RGB
#ARGB
#RRGGBB
##AARRGGBB

색상을 지정하는 예제

• 웹에서 흔히 사용되는 표준화된 방식으로 ‘#’다음에 16진수로 각색 구성 요소의 강도를 지정할 수 있음
• 각 색 구성요소는 투명도(A), 빨강(R), 초록(G), 파랑(B)의 의미를 갖음
• background 속성에 #AARRGGBB 방식으로 ffff1326 값이 적용됨

3. rotation 속성

• rotation은 뷰의 각도를 설정하는 속성임
• 속성값으로 “1.2”와 같이 실수를 입력받음
• JAVA 코드에서 setRotation(float) 함수를 통해 수정할 수 있음
• 0.0부터 360.0 사이의 각도 정보를 입력받음
• 유사한 속성으로 rotationX와 rotationY가 있음
• rotationX는 수평으로 기울어지는 각도를 결정하고 rotationY는 수직으로 기울어지는 각도를 결정함

<?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">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView1"
        android:src="@mipmap/ic_launcher"
        android:layout_margin="30dp" />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView2"
        android:src="@mipmap/ic_launcher"
        android:layout_margin="30dp"
        android:rotation="45" />
</LinearLayout>

• LinearLayout 내에 2개의 ImageView를 정의하고 20번 줄과 같이 두 번째 ImageView에 rotation 속성값을 45로 설정함
• 그 결과 두 번째 ImageView의 각도가 45도 기울어진 형태로 출력됨

3. View 속성 2

1. padding 속성

• Padding 속성은 View와 View의 콘텐츠 사이의 간격을 지정하는 속성 임
• View의 안쪽 여백이며, TextView의 경우 TextView 자체와 중앙의 텍스트 사이에 padding 속성값만큼의 여백이 삽입됨
• padding 속성은 한글 워드프로세서에서 표의 안쪽 여백이라고 생각하면 됨
• padding 속성에 값을 지정하면 네 방향에 대해 동일한 여백이 적용됨
• 각 방향에 개별적으로 여백을 주기 위해서는 paddingLeft, paddingRight, paddingTop, paddingBotton 속성을 사용할 수 있음

2. visibility 속성

• visibility 속성은 화면에 View의 표시 여부를 지정하는 속성임
• 일반적으로 View는 사용자와 상호작용하는 역할을 하므로 별다른 지정이 없으면 보이는 상태로 배치되지만, 이 속성을 사용하면 Activity 내 View의 표시 여부를 동적으로 변경할 수있음
• visibility 속성을 이용하여 Activity의 실행 중에 특정 조건이나 이벤트에 따라 View를 보이게 하거나 숨길 수 있음

visibility 속성 종류

• invisible 속성값은 화면에 보이지는 않지만 ViewGroup 내부에서 공간을 여전히 차지한다는 점이 gone과 다름
• gone 은 화면에 출력되지도 않고 자리도 차지하지 않게 하는 속성값

3. focusable

• focusable 속성은 View를 대상으로 포커스 기능의 사용 가능 여부를 지정하는 속성임
• 안드로이드에서 포커스는 Activity에 구성된 다양한 View들 중 사용자가 선택한 View를 구분하여 표시하고 상세 기능이 활성화되는 기능임
• View 클래스 자체는 기본값이 포커스를 받을 수 없는 false로 설정되어 있음
• 일반적인 View에서 사용자와의 상호작용으로 문자열을 입력 받으려면 focusable 속성의 속성값을 true로 정의해야 함
• 반대로 EditText나 Button 처럼 사용자와의 상호작용을 기본적인 기능으로 하는 위젯들은 focusable 속성의 기본값이 true로 지정되어 있음

4. alpha 속성

• alpha 속성은 View의 투명도를 의미함
• alpha의 속성값으로 0.0~1.0 사이의 실수값을 가짐
• 값이 높아질수록 View는 선명해지며, 값이 낮아질수록 View가 투명해 짐
• JAVA 코드에서 setAlpha(float) 함수를 통해 수정할 수 있음

정리

• Activity : 안드로이드 앱의 화면을 구성하는 컴포넌트이며 여러 개의 View로 구성됨
• View : 안드로이드의 사용자 인터페이스를 구성하는 핵심으로서 화 면상의 사각 영역에 자신의 모양을 그리고 사용자의 입력을 받아들이 는객체
• 위젯 : 사용자의 인터페이스를 구성하는 역할을 하며, 스스로 화면에 특정 내용을 출력할 수 있는 능력을 가지고 있음
• id 속성: View의 이름 정의하는 속성
• View의 속성 : id, background, rotation, padding, visibility, focusable, alpha
• • background 속성 : View의 뒷배경을 정의하는 속성
  • rotation 속성 : View의 기울기를 정의하는 속성
  • visibility 속성 : View의 화면 출력여부를 정의하는 속성
  • focusable 속성 : View의 포커스 가능여부를 정의하는 속성
  • alpha 속성 : View의 투명도를 정의하는 속성
• padding : View와 View의 콘텐츠 사이의 간격을 지정하는 속성

---

 

자료 출처: 모바일앱프로그래밍 - 정광식,유헌창 공저 | 한국방송통신대학교출판문화원 | 2023