Chapter 3. Widget & Layout

Chapter 3. Widget & Layout

1. View and View Group

- View

  · 사용자의 눈에 보이는 화면의 구성 요소

  · Control이나 Widget이라는 이름으로 불리는 UI 구성요소

 - View Group

  · View를 여러 개 포함하고 있는 것

  · View Group을 이용해 그 안에 포함된 View의 위치를 지정할 수 있다.

  · View Group을 View에 상속시킬 수 있으며 상속시켰을 시 해당 View Group을 하나의 View로 다룰 수 있으며 UI 구성 시 조금 더 유연하고 편리하게 사용할 수 있다.

 - View & View Group’s Relation

  · View와 View Group의 Design Pattern

   ◦ View와 View Group은 Composite Pattern을 Design Pattern으로 사용한다.

   ◦ Composite Pattern

    ▹ 객체들의 관계를 트리 구조로 구성하여 부분-전체 계층을 표현하는 패턴

 - View와 View Group의 예

  · Button 또한 View의 일종이며 Button은 Text View를 상속받으며 기존의 Code를 이용해 복사 붙여넣기만으로 손쉽게 Text View를 Button으로, Button을 Text View로 바꿀 수 있다.

  · Widget

   ◦ 일반적인 Control의 역할을 하는 View

  · Layout

   ◦ 내부에 View를 포함하고 있으면서 해당 View를 배치하는 역할을 하는 View Group

  · Button과 LinearLayout의 계층도

 - View 속성

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="@drawable/tiger"
    tools:context="com.example.helloworld.MainActivity" >
 
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
 
</RelativeLayout>

  · layout_width & layout_height

android:layout_width="match_parent"

android:layout_height="match_parent"

   ◦ View의 폭과 높이를 설정하는 속성

   ◦ 사용 가능한 값

    ▹ match_parent : 무조건 남아 있는 여유공간을 채운다.

    ▹ wrap_content : View에 들어 있는 내용물(Text, Button 등)의 크기에 따라 View의 크기가 결정되도록 조정

    ▹ 단위

     ▸ px : 화면 Pixel 값

     ▸ dp, dip : 160Dip 화면을 기준으로 한 Pixel으로 다양한 해상도에 따라 해상도에 맞게 크기가 자동으로 변경됨

     ▸ sp, sip : 가변 글꼴을 기준으로 한 Pixel로 dp와 유사하지만 글꼴의 설정에 따라 달라지는 Pixel

     ▸ in : 물리적 단위 Inch를 기준으로 하는 길이

     ▸ mm : 물리적 단위 mm를 기준으로 하는 길이

     ▸ em : 글꼴과 상관없이 동일한 Text 크기를 표시하는 것

  · id

android:id="@+id/textView1" 
 

   ◦ View 객체를 Application에서 사용할 때 Memory 상에 올리기 위한 View 객체의 Pointer 속성

   ◦ Application이 시작될 때 XML Layout에 정의된 View는 Memory 상에서 객체로 만들어지는데 해당 객체들을 참조하기 위해 ID를 Pointer로써 사용한다.

   ◦ Inflation

    ▹ XML Layout을 정의된 Memory 상에서 객체로 만드는 객체화 과정

   ◦ 형식

    ▹ @+id : 새로운 ID가 추가될 때 ‘+’와 같이 사용

    ▹ @id : 기존에 사용된 ID가 참조될 때 사용

  · background

android:background="@drawable/tiger"
 

android:background="@drawable/test"

   ◦ 배경을 어떻게 그릴 것인지를 지정하는 속성

   ◦ 해당 속성을 따로 추가해 지정하지 않으면 Default 배경으로 회색 배경이 지정된다.

   ◦ 배경 지정

    ▹ 색상

android:background="#??????"

     ▸ #이후에 원하는 색상을 16진수로 변환해 입력해준다.

    ▹ File

android:background="@drawable/tiger"

     ▸ drawable-hdpi Directory에 배경으로 지정할 File을 복사한 후 위와 같이 Code를 입력해 참조한다. 

2. Layout

 - 내부에 View를 포함하고 있으면서 해당 View를 배치하는 역할을 하는 View Group

 - 위치 : /res/layout/activity_main.xml

 - Layout은 Java Source Code로도 구성할 수 있다.

 - 속성

  · 채우기(fill model)

   ◦ View를 부모 View의 여유 공간에 어떻게 채울 것인지 결정

  · 방향(orientation)

   ◦ View를 추가하는 방향을 설정

   ◦ Code

    ▹ android:orientation

   ◦ 속성 값

    ▹ vertical : 수직

    ▹ horizontal : 수평

  · 정렬 방향(gravity)

   ◦ View의 정렬 방향을 설정

   ◦ Code

    ▹ android:layout_gravity : 해당 View나 Layout의 위치

    ▹ android:gravity : 해당 View 내부 View의 위치로 Text 또한 포함된다.

   ◦ 속성 값

    ▹ top : 대상 객체를 위쪽 끝에 배치

    ▹ bottom : 대상 객체를 아래쪽 끝에 배치

    ▹ left : 대상 객체를 왼쪽 끝에 배치

    ▹ right : 대상 객체를 오른쪽 끝에 배치

    ▹ center_vertical : 대상 객체를 수직 방향의 중앙에 배치

    ▹ center_horizontal : 대강 객체를 수평 방향의 중앙에 배치

    ▹ fill_vertical : 대상 객체를 수직 방향으로 여유 공간만큼 확대하여 채우기

    ▹ fill_horizontal : 대상 객체를 수평 방향으로 여유 공간만큼 확대하여 채우기

    ▹ center : 대상 객체를 수직 방향과 수평 방향의 중앙에 배치

    ▹ fill : 대상 객체를 수직 방향과 수평 방향으로 여유 공간만큼 확대하여 채우기

    ▹ clip_vertical : 대상 객체의 상하 길이가 여유 공간보다 클 경우에 남은 부분을 잘라내기

    ▹ clip_horizontal : 대상 객체의 좌우 길이가 여유 공간보다 클 경우에 남은 부분을 잘라내기

  · 여유 공간(padding)

   ◦ View의 여유 공간을 설정

   ◦ Code

    ▹ 내용물

     ▸ android:padding : 내용물의 상하좌우 모두 여유공간 생성

     ▸ android:paddingTop : 내용물의 윗 부분만 여유공간 생성

     ▸ android:paddingBottom : 내용물의 아랫 부분만 여유공간 생성

     ▸ android:paddingLeft : 내용물의 왼쪽만 여유공간 생성

     ▸ android:paddingRight : 내용물의 오른쪽만 여유공간 생성

    ▹ Widget Cell

     ▸ android:margin : View의 상하좌우 모두 여유공간 생성

     ▸ android:marginTop : View의 윗 부분만 여유공간 생성

     ▸ android:marginBottom : View의 아랫 부분만 여유공간 생성

     ▸ android:marginLeft : View의 왼쪽만 여유공간 생성

     ▸ android:marginRight : View의 오른쪽만 여유공간 생성

  · 공간가중치(weight)

   ◦ View가 차지하는 공간의 가중치 값을 설정

   ◦ 여유 공간을 분할한다고 생각하면 되며 공간가중치를 준 View들의 총 공간가중치를 더한 후 각 View의  공간가중치를 나눈 값으로 여유공간을 가져가게 된다.

   ◦ Code

    ▹ android:layout_weight

 - Layout의 종류

  · LinearLayout

   ◦ Box Model로 사각형 영역들을 이용해 화면을 구성하는 방법

   ◦ 표준 Java의 BoxLayout과 유사

   ◦ Layout은 Java Source Code로도 구성할 수 있다.

   ◦ Java Source Code로 구성하는 이유

    ▹ File에서 읽어 들인 Data나 Networking을 통해 Server의 유형에 따라 화면을 바꾸고 싶을 경우 XML로 정의하는 것보다는 Java Code에서 구성하는 것이 더 효율적이다.

   ◦ XML Code Example

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button1" />
 
    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button2" />
 
    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button3" />
 
</LinearLayout>

  · RelativeLayout

   ◦ Rule 기반 Model로 부모 Container나 다른 View와의 상대적 위치를 이용해 화면을 구성하는 방법

   ◦ 먼저 정의된 View의 상대적 위치를 이용해 바로 다음 추가된 View의 위치를 결정하기 때문에 ID값을 참조할 때 @id 형식이 아닌 @+id 형식으로 사용해야 한다.

   ◦ Relative Layout에서 View 배치시 사용하는 속성

    ▹ 부모 Container와의 상대적 위치를 이용하는 속성

     ▸ layout_alignParentTop : 부모 Container의 위쪽과 View의 위쪽을 맞춤

     ▸ layout_alignParentBottom : 부모 Container의 아래쪽과 View의 위쪽을 맞춤

     ▸ layout_alignParentLeft : 부모 Container의 왼쪽과 View의 위쪽을 맞춤

     ▸ layout_alignParentRight : 부모 Container의 오른쪽과 View의 위쪽을 맞춤

     ▸ layout_centerHorizontal : 부모 Container의 수평 방향 중앙에 배치

     ▸ layout_centerVertical : 부모 Container의 수직 방향 중앙에 배치

     ▸ layout_centerInParent : 부모 Container의 수평과 수직 방향 중앙에 배치

    ▹ 다른 View와의 상대적 위치를 이용하는 속성

     ▸ layout_above : 지정한 View의 위쪽에 배치

     ▸ layout_below : 지정한 View의 아래쪽에 배치

     ▸ layout_toLeftOf : 지정한 View의 왼쪽에 배치

     ▸ layout_toRightOf : 지정한 View의 오른쪽에 배치

     ▸ layout_alignTop : 지정한 View의 위쪽과 맞춤

     ▸ layout_alignBottom : 지정한 View의 아래쪽과 맞춤

     ▸ layout_alignLeft : 지정한 View의 왼쪽과 맞춤

     ▸ layout_alignRight : 지정한 View의 오른쪽과 맞춤

     ▸ layout_alignBaseline : 지정한 View의 내용물의 아래쪽 기준선(Base Line)을 맞춤

   ◦ XML Code Example

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"


    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="Button1" />
 
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="Button2" />
 
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button2"
        android:layout_alignBottom="@+id/button2"
        android:layout_alignParentRight="true"
        android:text="Button3" />
 
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:layout_alignParentBottom="true"
        android:text="Button4" />
 
</RelativeLayout>

  · GridLayout

   ◦ 화면상에 가상의 가로 세로 격자를 만들어 해당되는 위치에 View를 순서대로 배치하는 방법

  · FrameLayout

   ◦ 하나의 View만을 화면에 표시하는 Layout

   ◦ View를 표시할 경우 하나만 표시되며 여러 개의 View를 추가하면 Stack 형식으로 추가된 순서대로 차곡차곡 쌓여 가장 나중에 쌓인 View만 보이게 된다.

   ◦ 이 Layout을 활용하면 여러 개의 View를 전환하는 대 사용할 수 있다.

   ◦ XML Code Example

<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:id="@+id/button01"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_gravity = "center"
        android:text = "이미지 바꾸기"
        android:onClick = "onButton1Clicked"
        />
    
    <FrameLayout
        android:layout_width = "match_parent"
        android:layout_height = "match_parent"
        >
        <ImageView
            android:id = "@+id/imageView01"
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content"
            android:src = "@drawable/dream01"
            android:visibility = "invisible"
            />
        
        <ImageView
            android:id = "@+id/imageView02"
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content"
            android:src = "@drawable/dream02"
            android:visibility = "visible"
            />
 
        
    </FrameLayout>
    
</LinearLayout>

  · TableLayout

   ◦ 행과 열을 기준으로 View를 배치하는 방법으로 규칙적으로 View를 배치하는 용도로 사용한다.

   ◦ 행을 기준으로 각각의 행과 그 안에 들어가는 여러 개의 열이 들어가는 형태이다.

   ◦ XML Code Example

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    <TableRow>
 
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1" />
 
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2" />
        
    </TableRow>
    
    <TableRow>
 
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3" />
 
        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button4" />
        
    </TableRow>
    
    <TableRow>
 
        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button5" />
 
        <Button
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button6" />
        
    </TableRow>
 
</TableLayout>

  · ScrollView

   ◦ View 내에 추가된 View 영역이 한 번에 다 보이지 않을 때 사용되는 Layout

   ◦ 수직방향 수평방향의 Scroll을 모두 제공한다.

   ◦ XML Code Example

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >
 
    <Button
        android:id="@+id/button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Example"
        />
    
    <HorizontalScrollView
        android:id="@+id/horScrollView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        >
        <ScrollView
            android:id="@+id/scrollView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            >
            <ImageView 
                android:id="@+id/imageView01"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
        </ScrollView>
        
    </HorizontalScrollView>
    
</TableLayout>

3. Widget
 - TextView

  · Text를 화면에 보여주는 역할을 하는 Widget

  · 속성

   ◦ android:text

    ▹ TextView에 표시하는 문자열 설정

   ◦ android:textColor

    ▹ TextView에 표시하는 문자열의 색상 설정

    ▹ 색상 설정값

android:textColor = "#AARRGGBB"

     ▸ A(Alpha) : 투명도(FF : 불투명 / 00 : 투명 / 88 : 반투명)

     ▸ R(Red) : 적색

     ▸ G(Green) : 녹색

     ▸ B(Blue) : 청색

   ◦ android:textSize

    ▹ TextView에 표시하는 문자열의 크기 설정

    ▹ 크기 설정값

     ▸ dp(density-independent pixels) : 화면의 밀도에 독립적인 화소로 해상도의 DPI의 크기에 비례한다.

     ▸ sp(scale-independent pixels) : 스케일에 독립적인 화소로 사용자 글꼴 크기 설정에 따라 확대/축소된다.

     ▸ px(Pixel) : 화면의 Pixel 수에 영향을 받는다.

   ◦ android:textStyle

    ▹ TextView에 표시하는 문자열의 Style 속성을 설정한다.

    ▹ Style 설정값

     ▸ 대표적으로 normal(일반), bold(두껍게), italic(기울기) 등이 있으며 |를 이용하면 여러 개의 설정 값을 지정할 수 있다.

   ◦ android:textFace

    ▹ TextView에 표시하는 문자열의 Font를 설정한다.

    ▹ Font 설정값

     ▸ Android에 내장된 Font를 사용해 설정 가능하며 일반적으로 normal, sans, serif, monospace 중 하나를 사용한다.

   ◦ android:singleLine

    ▹ TextView에 표시하는 문자열이 한 줄로만 표시되도록 설정한다.

    ▹ true일 경우 한 줄로, false일 경우 여러 줄로 표시한다.

 - Button

  · Button을 구성하는 Widget

  · TextView를 상속하여 정의되었기 때문에 확장성이 뛰어나다.

  · Android는 기본 Button 이외에도 Check Box, Radio Button 등 여러 가지 Button을 제공한다.

  · Check Box, Radio Button 관련 Class 및 Method

   ◦ Class : CompoundButton

   ◦ Method

    ▹ public boolen isChecked() : Check Box, Radio Button가 Check되었는지 확인하는 Method

    ▹ public void setChecked(boolean checked) : Code 상에서 해당 Button의 상태 값을 지정하는 Method

    ▹ public void toggle() : Check 상태 변경

    ▹ void onCheckedChanged(CompoundButton buttonView, boolean isChecked) : Check 상태 변경 시 호출되는 Method

 - EditText

  · 입력 상자 역할을 하며 사용자의 입력을 받고자할 때 사용되는 Widget

  · 관련 속성

   ◦ android:inputType : 입력되는 글자의 유형 정의

   ◦ android:hint : 기본 안내문 표시

 - ImageView

  · Image를 화면에 표시하기 위해 제공되는 Widget

  · 관련 속성

   ◦ android:src

    ▹ 원본 Image 위치 설정

   ◦ android:maxWidth / android:maxHeight

    ▹ Image가 표현되는 최대 크기 설정

   ◦ android:tint

    ▹ Image 위에 색상을 적용하고 싶을 시 사용한다.

    ▹ 설정 값은 textColor와 같다.

   ◦ android:scaleType

    ▹ 원본과 다르게 화면에 보이는 경우 확대/축소를 어떤 방식으로 적용할 것인지 설정한다.

    ▹ 설정 값은 이미지 변환 알고리즘에 따라 적절하게 적용할 수 있다