[ 앱 개발자 도전기 : 안드로이드 ] 안드로이드 UI - - 뷰(View)와 XML 레이아웃 기본 구조

 

 

 

 

 

[ 앱 개발자 도전기 : 안드로이드 ] 안드로이드 UI 

- 뷰(View)와 XML 레이아웃 기본 구조

 

---

 

∇ 안드로이드 UI 📱 : View & XML레이아웃

목  차

1. 뷰 [ View ]
2. 뷰 그룹 [ View Group ]
3. 뷰의 속성
4. XML 레이아웃 구성

 

 

---

 ※ 안드로이드 UI 구성의 가장 기본적인 개념은 View와 ViewGroup 입니다.

 

 

1. 뷰 [ View ]

---

     ※  뷰 ( View ) 는 앱 안에 들어가는 각각의 화면 구성 요소를 의미합니다.

 

               § 안드로이드 앱에서 흔히 볼 수 있는 [ 버튼, 텍스트 ] 등의 UI 구성 요소가 모두 뷰에 해당됩니다.

 

               § 뷰는 역할에 따라서 밑의 이름들로 부르기도 합니다.

 

                           ○ 위젯 ( Widget ) : 컨트롤의 역할을 하는 것

                           ○ 레이아웃(Layout) : 내부에 포함된 뷰를 배치하는 역할을 하는 것.

 

 

---

2. 뷰 그룹 [ View Group ]

---

 

   ※ 뷰 그룹 [ View Group ] 은 여러 개의 뷰를 포함하는 요소입니다.  

           == 뷰 그룹을 활용해서,  안에 포함된 뷰의 위치를 지정할 수 있습니다.

 

            ☆ " view  클래스 " 는 모든 뷰의 최상위 클래스입니다.

                              - > 뷰(View)와 뷰 그룹(View Group)은 모두 'view 클래스' 를 상속 받기 때문에

                                        -   뷰그룹은 뷰처럼 다룰 수 있고,

                                        -   뷰 그룹 안에 또 다른 뷰 그룹이 포함될 수도 있습니다.

 

 

          이러한 특징으로 인해서,

 

         ★ 하나의 뷰를 다른 뷰로부터 상속 받아서 사용할 때,  다른 뷰의 속성을 동일하게 활용 가능합니다 !!!

 

---

 

3. 뷰의 속성

---

 

    ※ 뷰(View) 에는 개발자가 원하는 상태에 따라서 다양한 종류의 속성을 부여할 수 있습니다.

 

 

          ◇ 자주 쓰는 뷰의 속성.

 

 

          ◇ 뷰의 크기.

 

                    - 많은 속성들 중에서 필수로 선언되어야 하는 속성입니다.

 

                    - 뷰는 뷰를 포함하는 뷰그룹( = 뷰가 속한 뷰그룹 ) 이 가지는 여유 공간의 일부 또는 전체에 놓이게 됩니다.

 

                          == > 화면에서 뷰 하나가 얼마만큼의 공간을 차지할 것인지에 대한 계산을 해야하기 때문에

                                    뷰 크기에 대한 선언이 빠지면 에러가 발생하게 됩니다.

 

 

                    § 크기는  layout_width ,   layout_height   두개의 속성으로 선언 가능합니다. 

 

                            ＠ 아래의 세가지 중 하나의 값을 가집니다.  

 

                          √ match_parent  :  남아있는 여유 공간을 모두 채웁니다.

 

                          √ wrap_content  :  뷰에 들어있는 내용물의 크기에 따라 뷰의 크기를 결정합니다.

 

                          √ 정수 값:  크기를 고정된 값으로 만듭니다. 

                                                - 사용할 수 있는 단위 : dp, in, mm, pt, px, sp

 

 

                               - 가장 많이 사용되는 단위는 dp 입니다. ( 해상도에 따른 뷰 크기 조절이 필요 X )

                                  ex) 320dpi라면,  1dp = 2px

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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="폭: wrap_content / 높이: wrap_content" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="폭: match_parent / 높이: wrap_content" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="폭: wrap_content / 높이: match_parent" />
</android.support.design.widget.CoordinatorLayout>

 

                        - wrap_content을 사용했을 때는 내용물인 text에 따라 크기가 유동적으로 결정.

                        - match_parent 의 경우, 부모 뷰인 LinearLayout의 남은 공간을 모두 채움.

 

          § wrap_contetn   /  match_parent  / dp 를 이용해서 크기를 지정하는 이유는??

                  == > 여러 디바이스의 크기에 쉽게  대응하기 위함입니다.

 

 

 

---

4. XML 레이아웃의 구성

---

 

   ※   유저가 눈으로 보게 되는 화면을 정의하는 레이아웃 파일은 XML 파일로 되어있습니다. 

 

 

            ☆ XML 파일은 " 태그와 속성 " 으로 구성됩니다.

                   

                   -  <> 기호로 태그의 이름을 감싸고서,  태그의 내부에 속성을 선언하는 방식입니다.

                   -  속성이 여러개일 경우,  공백으로 값을 구분합니다.

<시작 태그
  속성1="속성값1"
  속성2="속성값2"
  ...
</종료 태그>

 

                   -  ex) 버튼 위젯을 선언하는 경우

                               = > Button은 태그의 이름,  android : layout_width 는 태그의 속성.

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

 

   - 태그 안에 또 다른 태그를 포함할 필요가 없다면,   위의 코드처럼  /> 기호를 활용해 종료 태그를 생략 가능합니다.

 

           ++  태그의 이름이  Button, TextView 처럼 안드로이드 API에 기본적으로 정의(내장)된 태그라면,

                      패키지를 생략하고 곧바로 사용이 가능합니다.

 

                      ++ >  외부 라이브러리나 직접 커스텀한 뷰를 선언해서 사용하고 싶다면,

                                태그 이름에 패키지명을 함께 명시해야 합니다.

<android.support.design.widget.CoordinatorLayout 
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  ...
</android.support.design.widget.CoordinatorLayout>