View 그리고 View 클래스의 XML 속성

1. 뷰와 뷰그룹

 

안드로이드 화면에서 실제로 사용되는 것들은 모두 View 라는 클래스의 상속을 받는다.

버튼, 라디오버튼, 이미지 등은 모두 View 클래스의 서브클래스이다.

뷰 클래스는 Widget이라고 불리며, 버튼을 버튼 위젯, 실제 코드에서는 버튼 클래스라고 부르는 식이다.

다른 위젯들을 담을 수 있는 위젯은 Layout이라고 불리며, ViewGroup 이라는 클래스 아래에 존재한다.

 

위젯은 단독으로 존재하지 않고 위젯을 담아 배치하는 틀이 바로 레이아웃이다.

레이아웃은 위젯을 포함하는 컨테이너 역할을 하므로 눈에 보이는 개념이 아니다.

버튼, 텍스트뷰, 체크박스를 Widget, 위젯을 담는 틀을 Layout 으로 구분한다.

 

View 에는 총 4가지로 ViewGroup, TextView, ImageView, ProgressBar 등이 있다.

 

(1) ViewGroup => LinearLayout, RelativeLayout, FrameLayout, GridLayout, AdapterView, ToolBar

(2) TextView => EditText, Button

(3) ImageView => ImageButton

(4) ProgressBar => AbsSeekBar

 

이런식으로 이뤄진다. (대략적으로)

 

 

2. View 클래스의 XML 속성

 

안드로이드 계층을 살펴보면 View 클래스가 모든 위젯의 부모 클래스임을 확인할 수 있었다.

그러므로 Widget, Layout 모두 View 클래스의 속성, 메소드를 상속받는다.

View 클래스의 중요한 속성을 파악해놓으면 하위 클래스도 쉽게 이해 가능하다.

View 클래스나 해당 클래스의 상위 클래스에서 상속받은 XML 속성을 살펴보도록 한다.

 

 

id 속성

id 속성은 모든 위젯의 아이디를 나타내며 Java code 에서 버튼 등의 위젯에 접근할 때 id 속성에 지정한 아이디를 사용한다. 일반적으로 "@+id/id 명" 형식으로 지정한다.

예를 들어서 android:id = "@+id/btn" 은 버튼 Widget의 아이디를 btn 으로 설정하는 것이다.

Java Code에서 다음과 같은 형식으로 XML 에서 설정한 Widget의 id를 불러서 사용할 수 있다.

 

Button btn;
btn = (Button) findViewById(R.id.btn);

 

 

layout_width, layout_height 속성

 

모든 위젯이 이 속성은 필수로 들어가야 한다.

match_parent 는 자신의 부모에 폭이나 높이를 맞춘다는 의미이며 wrap_content 는 자신의 폭이나 높이를 자신 안의 글자가 꼭 들어갈 정도로만 설정한다는 의미이다.

 

(1) layout_width = "wrap_content", layout_height = "wrap_content" 인 경우

 

 

(2) layout_width = "match_parent", layout_height = "wrap_content" 인 경우

 

 

(3) layout_width = "wrap_content", layout_height = "match_parent" 인 경우

 

 

(4) layout_width = "match_parent", layout_height = "match_parent" 인 경우

 

 

layout_width, layout_height 를 직접 px 단위로 설정이 가능하다.

layout_width = "800px", layout_height = "500px" 로 설정한 경우

 

 

 

background 속성

 

background 속성은 위젯의 색상을 주로 #RRGGBB 값으로 지정한다.

예를 들어서 빨간색은 #FF0000, 파란색은 #0000FF 로 지정한다.

 

레이아웃에 android:background = "#ff0000", 버튼에 android:background = "#00ff00" 값을 넣으면 다음과 같은 색이 나타난다.

 

 

 

padding, layout_margin 속성

 

padding 속성을 사용하여 위젯의 경계선으로부터 위젯 안의 요소가 떨어지도록 설정할 수 있다.

기본적으로 레이아웃 내에 버튼, 텍스트뷰 등을 여러개 두면 경계선이 딱 붙어져 있는데 이를 이용하면 레이아웃의 경계와 위젯 사이의 여백을 둘 수 있다.

 

다음 XML 코드와 Design 을 보도록 한다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation = "vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="아래에 이름을 입력 : "/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="여기에 채우세요"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="확인"
        ></Button>


</LinearLayout>

 

 

 

padding 속성을 사용하면 다음과 같이 변한다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="30dp"
    android:orientation = "vertical">

    <TextView
        android:padding="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="아래에 이름을 입력 : "/>

    <EditText
        android:padding="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="여기에 채우세요"/>

    <Button
        android:padding="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="확인"
        ></Button>


</LinearLayout>

 

 

visibility, enabled, clickable, rotation 속성

 

visibility 속성은 위젯을 보일 것인지 여부를 결정한다.

default인 visible은 보이는 상태, invisible과 gone은 안 보이는 상태이다.

invisible은 보이지 않을 뿐 원래의 자리를 계속 유지하는 것이지만 gone은 그 자리까지 아예 내놓는다.

code 를 보고 확인해보도록 한다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation = "vertical">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:visibility="visible"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:visibility="invisible"/>

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

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button 4"
        android:visibility="gone"/>

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


</LinearLayout>

 

 

widget 동작 여부는 enabled 속성으로, 클릭이나 터치가 가능하도록 하는 것은 clickable 속성으로 지정한다.

default 값은 true이며 이 속성은 XML 보다는 Java 코드에서 많이 쓰인다고 한다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation = "vertical">

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

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:enabled="false"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="false"/>


</LinearLayout>

 

 

rotation 속성은 widget 을 회전시켜서 출력하며 값은 각도로 지정한다. 

회전은 시계 방향으로 회전한다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation = "vertical">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:rotation="45"/>

</LinearLayout>