UI
사용자가 애플리케이션을 쉽게 사용하기 위해서는 그래픽 기반의 사용자 인터페이스 (User Interface) 즉, UI는 반드시 제공되어야 합니다. 안드로이드 SDK에는 버튼, 리스트, 스크롤바, 메뉴, 체크 박스, 대화 상자 등이 포함되어 있어, 이것들을 이용하여 사용자 인터페이스를 제작할 수 있습니다.
안드로이드에서는 모바일 환경에 특화된 컨트롤들을 제공합니다. 사용자 인터페이스 요소들을 크게 분류하자면 뷰(View)와 뷰그룹(ViewGroup)으로 나눌 수 있습니다.
- 뷰(View) : 컨트롤 또는 위젯이라고 불립니다. 사용자 인터페이스를 구성하는 기초적인 빌딩 블록입니다. 버튼, 텍스트 필드, 체크 박스 등이 여기에 속하며, 이것들은 View 클래스를 상속받아 작성됩니다.
- 뷰그룹(ViewGroup): 다른 뷰들을 담는 컨테이너 기능을 합니다. 뷰그룹은 ViewGroup 클래스를 상속받아서 작성됩니다. 흔히 레이아웃(layout)이라고 불리며 선형 레이아웃, 테이블 레이아웃, 상대적 레이아웃 등이 여기에 속합니다. 각 레이아웃은 정해진 정책에 따라 뷰들을 배치합니다.
UI 작성
안드로이드에서는 사용자 인터페이스를 작성하기 위한 두 가지 방법이 존재합니다.
첫 번째 방법은 xml 파일로 작성하는 방법이고 두 번째는 코드로 작성을 하는 방법입니다. 기본적인 방법은 xml을 사용하는 방법입니다.
지금부터 xml파일에 여러 가지 요소를 추가하는 방법을 알아보도록 하겠습니다.
먼저 기본적인 xml 파일의 모습입니다. xml파일은 /res/layout 폴더에서 찾을 수 있습니다.
자세한 내용은 다음에 공부해 볼 것이며, 오늘은 대략적으로 UI가 어떤 형태로 그려지고 있는지 확인해 보도록 하겠습니다.
가장 위에서 볼 수 있는 LinearLayout은 선형 레이아웃을 나타내며 <LinearLayout부터 </LinearLayout>까지 선형 레이아웃의 뷰그룹을 생성하고 있습니다. 또한, <TextView부터 />까지 '텍스트뷰'라는 뷰를 생성하고 있습니다. 이곳에 버튼이라는 뷰를 추가해 보겠습니다.
위와 같이 작성해 주면 오른쪽에 있는 프리뷰 화면에서 버튼이 추가된 것을 볼 수 있습니다.
android:text=""는 뷰에서 보여줄 텍스트를 나타냅니다. TextView에는 "Hello World!"가 쓰여있고 Button에는 "BUTTON"이 쓰여있습니다. 그리고 그 결과로 오른쪽의 프리뷰에서 그대로 나타나는 것이 확인됩니다.
android:layout_width=""와 android:layout_height="" 부분은 뷰의 위치와 크기를 나타냅니다. ""안에 들어가는 값은 세 가지가 있습니다.
- match_parent : 부모의 크기를 꽉 채운다(fill_parent도 같은 의미).
- wrap_content : 뷰에 나타나는 내용의 크기에 맞춘다.
- 숫자 : 정확한 크기를 정한다.
위에 나와있는 예시는 "wrap_content"로 되어 있으므로 뷰에 쓰인 텍스트의 사이즈에 맞추어 뷰의 크기가 정해졌습니다. 부모의 크기란 부모가 되는 layout의 크기를 의미하는데, 지금의 경우 LinearLayout의 크기를 의미하게 됩니다.
이번에는 TextView를 지우고 Button만을 가지고 크기를 변경해 보겠습니다.
height(높이)는 그대로 두고, width(넓이) 부분만 match_parent로 바꾸어 보았습니다. 프리뷰에서 볼 수 있듯이, 높이는 글자에 맞추어서, 넓이는 부모 레이아웃의 크기에 맞추어서 버튼의 크기가 확장된 것을 확인했습니다.
숫자를 넣을 때는 특정한 값을 넣고 단위 또한 개제해 주어야 합니다. 단위의 종류로는 px, dp, sp, pt, mm, in 이 있습니다.
- px(pixels) : 화면의 실제 픽셀을 나타냅니다. 장치마다 화면의 밀도가 다르기 때문에 픽셀은 권장되는 단위는 아닙니다.
- dp(density-indepentent pixels) : dp는 화면의 밀도가 160 dpi 화면에서 하나의 물리적인 픽셀을 말합니다. 크기를 160dp로 지정하면 화면의 밀도와는 상관없이 항상 1인치가 됩니다. 쉽게 말해, dp로 뷰의 크기를 지정하면 화면의 밀도가 다르더라도 항상 동일한 크기로 표시됩니다.
- sp(scale-independent pixels) : 화면 밀도와 사용자가 지정한 폰트 크기에 영향을 받아서 변환됩니다. 이 단위는 폰트의 크기를 지정하는 경우에 추천됩니다.
- pt(points) : 1/72 인치를 표시합니다.
- mm(millimeters) : 밀리미터를 나타냅니다.
- in(inches) : 인치를 나타냅니다.
*dp에 관해 조금 더 명확하게 설명을 붙이자면, 같은 사이즈의 화면이더라도 각각의 화면이 가지고 있는 픽셀의 수는 다를 수 있습니다.
어떤 화면은 해상도가 낮아 픽셀이 크게 띄엄띄엄 있다면, 어떤 화면은 해상도가 높아 픽셀이 작고 촘촘하게 있다는 뜻입니다. 이때 픽셀수에 따라 뷰의 크기를 정의한다면 해상도가 낮은 화면에서와 높은 화면에서의 뷰의 크기와 선명도가 제각각 달라질 것입니다. 아래의 그림을 보면 이해가 더 잘될 것 같습니다. dp를 사용하면 설정한 크기에 맞게 픽셀의 수를 다르게 잡아주게 됩니다. 즉, 해상도가 다르더라도 항상 고정된 크기를 유지할 수 있게 됩니다.
다음은 LinearLayout에 orientation 속성을 추가해 보았습니다.
LinearLayout 속성 마지막을 보면 android:orientation="horizontal"부분이 추가되었습니다. 그리고 4개의 버튼 뷰를 가지고 있는데, horizontal은 뷰를 수평으로 정렬할 수 있게 해 줍니다. 반대로 vertical을 써서 확인해 보겠습니다.
버튼이 수직으로 정렬이 되었습니다. 이번에는 버튼의 색을 바꾸어 보겠습니다.
버튼의 속성에 android:background="" 속성을 추가해 보았습니다.
background는 뷰 또는 레이아웃의 배경색을 변경할 수 있게 해 주며 ""안에 #색상 코드를 기입해 주면 됩니다. 예) #FFFFFF <- 흰색 코드
다음에는 마진(margin)과 패딩(padding) 속성을 추가해 보겠습니다.
프리뷰에서 보면 각각의 요소가 무엇을 나타내는지 눈치챌 수 있을 것입니다. 마진(margin)은 레이아웃의 테두리와 뷰 와의 간격을 나타내며 패딩(padding)은 뷰의 테두리와 뷰안의 콘텐츠와의 간격을 나타냅니다. marginTop 또는 marginBottom 등의 속성을 사용하여 양옆, 위, 아래의 마진을 조정할 수 있으며 패딩 또한 paddingLeft, paddingRight 등을 통해 4 방면의 간격을 설정할 수 있습니다.
오늘은 뷰와 뷰그룹을 추가해 보고, 기본적인 속성들을 추가하는 방법에 대해 공부해 보았습니다. 이다음에는 각종 속성들에 대해 좀 더 깊게 알아볼 것이며 오늘 포스팅은 마치겠습니다.
위 내용은 "그림으로 쉽게 설명하는 안드로이드 프로그래밍"이란 책을 참고하여 작성하였습니다.
'Android Application > 기초 사용법' 카테고리의 다른 글
| 안드로이드 데이터바인딩(dataBinding) 사용 (0) | 2023.03.29 |
|---|---|
| 안드로이드 뷰모델(ViewModel) 사용하기(with LiveData) (0) | 2023.03.28 |
| 안드로이드 ViewBinding(뷰바인딩) 구현 (0) | 2023.03.26 |
| 안드로이드 - Navigation(with bottom tab) 구현 (0) | 2023.03.25 |
| 안드로이드 애플리케이션 (Android Application) (0) | 2020.03.26 |
댓글