안드로이드 UI - Viewcomponent

기본 안드로이드 프로젝트를 만들고 res->layout에 들어간 화면입니다

빨간색으로 표시되어 있는 부분이 전부 뷰 컴포넌트 입니다

 

뷰 컴포넌트: 화면을 그리는 요소 (글, 이미지, 버튼.. 등등)

 

만약에 이렇게 버튼을 끌고 와 붙이고 에뮬레이터를 실행시켜 보면 화면에 버튼이 나옵니다

근데 이런 드래그 앤 드랍 방식으로 화면을 구성하는 것은 매우 어렵습니다

 

실행시켜 보면 알겠지만 분명 버튼을 중앙에 끌고 왔지만 실제로는 왼쪽 북동쪽 끝에 붙어 있습니다

이걸 하나씩 이동 시켜 주기 위해서는 직접 코딩하는 것보다 더 많은 노력이 필요합니다

그래서 보통은 xml를 타이핑 해서 작성하고, 이 탭은 뷰 컴포넌트의 종류를 알고 싶을 때 등에만 사용하게 됩니다

 

여기에서 code를 눌러서 탭을 전환합니다

 

일단 저 코드에서 필요하지 않은 부분을 다 지워서 아래와 같이 만듭니다

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

</LinearLayout>

이 내용에 대해서는 나중에 다뤄보겠습니다

 

LinearLayout 사이에 다음 코드를 넣습니다

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

TextView는 뷰 컴포넌트의 종류

나머지 줄은 해당 뷰 컴포넌트의 속성 (글씨체, 색깔 등)

하나의 <.../>가 하나의 뷰 컴포넌트를 의미합니다

 

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

이것도 동일한 의미입니다

 

그리고 뷰 컴포넌트는 다른 뷰 컴포넌트를 자식으로 가질 수 있습니다

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

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

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

</LinearLayout>

위에서 본 LinearLayout도 하나의 뷰 컴포넌트이며, TextView를 자식으로 가지고 있습니다

 

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

    <TextView
        android:text="안녕하세요"
        android:textColor="@color/colorAccent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:text="안녕히가세요"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </TextView>

</LinearLayout>

이렇게 속성을 넣고 실행하면,

에뮬레이터에서도 보입니다

 

디자인 탭으로 가서 안녕하세요를 클릭하면 오른쪽에 내가 xml에서 적었던 속성이 표시되는 걸 볼 수 있습니다

왼쪽에 text를 눌러 보면 나오는 긴 리스트가 바로 text가 가질 수 있는 속성들입니다

 

정리

-viewcomponent는 꺽쇠를 기준으로 한다

-viewcomponent에는 속성이 아주아주 많은데, 속성 목록은 디자인 탭에서 확인할 수 있다

-아니면 ctrl+space를 누르거나 자동완성으로 알 수 있다