뷰콤포넌트 2편 View Component

View Component에 대해 좀 더 자세히 알아봅시다!

activity_main.xml 파일에서 직접 코드를 작성해 UI를 어떻게 구성할 수 있는지 살펴봅니다.

우선 레이아웃을 정하게 됩니다.

 

위의 예시에서는 LinearLayout으로 정했으며, 항상 태그를 닫을 때는 </> 이렇게 닫아주도록 합니다.

LinearLayout의 속성들을 적용해서 설정이 가능한데, orientation은 vertical로 해줍니다. 이는 자식 TextView의 방향을 수직으로 놓을지, 수평으로 놓을지 결정해줍니다.

 

속성은 정말 많은데, 어떤 속성이 있는지 알아보려면 Ctrl + SpaceBar를 동시에 눌러 보세요. 적용 가능한 모든 속성 리스트를 바로 확인할 수 있습니다.

 

여러 콤포넌트 중에 TextView를 사용하여, 텍스트를 추가할 수 있습니다.

위의 예시 처럼, TextView 또한 여러 속성이 있는데, text, textSize, textColor 등이 있습니다.

특히 width, height, textSize 등은 단위를 'DP'로 사용하는 것을 잊지 마십시오. wrap_content란 속성은 내용물을 감쌀 수 있는 크기만큼을 사이즈로 정하겠다는 의미입니다.

배경색의 경우, android:background="#ffffff" 이런식으로 설정 가능한데, 레드, 그린, 블루를 조합한 RGB 컬러를 사용하게 됩니다.

width, height 의 속성 중에 match_parent란 속성이 있는데, 최상위 뷰에 자신의 폭이나 높이를 맞추겠다는 의미입니다.

 

xml 파일의 디자인 쪽에서도 콤포넌트와 속성을 확인하고 편집할 수 있습니다.

Design 부분을 클릭하고, Component Tree 부분에 보면 현재 작업 중인 TextView를 볼 수 있습니다.

Declared Attributes 부분은 지금까지 적용된 속성을 보여줍니다.

반응형

위의 사진에 All Attributes는 TextView에서 사용 가능한 모든 속성을 나열합니다. 

 

에뮬레이터를 이용한 결과물은 다음과 같습니다.

* 컴포넌트도 부모와 자식의 개념이 있습니다.

Layout은 거의 부모 컴포넌트라고 보시면 되고, TextView는 자식의 개념이라고 보면 됩니다.

TextView의 위치, 나열 등을 결정하는 것이 부모 컴포넌트의 역할입니다.

자식 뷰인 TextView는 내용을 나타내는 것 뿐이지 위치를 바꾸는 속성은 존재하지 않습니다.

 

부모 컴포넌트인 Layout에서 android:layout_gravity="left"로 적용하면 모든 자식 뷰가 왼쪽으로 위치합니다. 반면, 자식 뷰에서만 android:layout_gravity="center"로 적용 시 해당 뷰만 센터로 위치합니다. 부모와 자식 동시에 android:layout_gravity 속성을 사용한 경우, 자식 뷰에 적힌 것으로 적용됩니다.