[Android/Kotlin 01] 뷰, 레이아웃, 해상도, 텍스트, 버튼, 이미지(Basic)

Android 개요

휴대용 장치를 위한 운영 체제와 미들웨어, 사용자 인터페이스, 표준 응용 프로그램을 포함하고 있는 모바일 운영 체제이자 모바일 플랫폼이다.

뷰(View)란 무엇일까?

• 안드로이드 앱의 UI를 구성하는 기본 단위는 뷰(View)이다.

• 모든 UI 컴포넌트들의 부모 클래스이다.

• 뷰는 위젯과 레아이웃으로 구분된다.

• 위젯(Widget)
  뷰의 서브 클래스로 앱 화면을 구성하는 시각적인 모양을 지닌 UI요소(화면에 보이는 것들)
  ex) 버튼, 메뉴, 리스트 등

• 레이아웃(Layout)
  다른 뷰(위젯 or 레이아웃)를 포함하면서 이들을 정렬하는 기능을 지닌 UI요소

layout_width, layout_height

• match_parent(or fill_parent) : 부모 UI컴포넌트의 크기에 맞춤
• wrap_content : UI컴포넌트의 내용물 크기에 맞춤

해상도

• px(Pixel) : 디스플레이의 해상도에 따라 크기가 달라 보입니다.
• dp(density-independent pixels) : 밀도에 독립적인 단위
• 1dp는 밀도가 160dpi의 화면일때 1px을 나타냄
  ex) 160dpi (320x480)일 때 100dp = 100픽셀
  ex) 320dpi (720x1280)일 때 100dp = 200픽셀
  즉, dp사이즈로 제작을하면 화면의 크기가 달라져도 그에 따른 해상도 대응이 가능하기 때문에 항상 같은 비율을 유지해 준다.

텍스트(text)

• text : 출력할 문자열 지정
• textSize : 폰트 크기
• textStyle : 텍스트 스타일(nomal, bold: 굵게할래, italic: 기울일래)
• typeface : 텍스트 폰트, 글씨체(normal, sans, serif, monospace)
• textColor : 텍스트 색상
• singleLine : 속성값이 'true'이면 텍스트가 위젯의 폭보다 길 때 강제로 한줄에 출력
  즉, 폭 무시하고 쭉 ~~ 이어나간다는 것

버튼(button)

• Button클래스는 TextView의 서브클래스이므로, TextView의 모든 속성을 사용 할 수 있다.
• 버튼 내에 텍스트, 아이콘을 표시 할 수 있음
• 버튼 전체를 이미지로 그리기 위해서는 ImageButton사용

이미지 버튼(Image button)

• 실무에서 대부분 버튼은 ImageView를 사용!!
• ImageView 속성에 Clickable 옵션을 true로 설정
• 이미지는 normal, pressed, disable 3가지로 준비(상황별 대응)
• 해상도 처리를 위해 dpi별(5개)로 이미지 준비(hdpi, mdpi, xhdpi, xxhdpi, xxxdpi)
• 즉, 1개의 버튼에는 총 15개의 이미지 필요(3가지 * dpi별 5개 = 15개)

나인 패치 이미지(9-Patch)

기기별 해상도 및 화면 모드에 따라 대응하는 이미지 파일을 모두 만드는 것은 어렵기 때문에 이미지의 특정 영역(가장자리)은 원본 이미지 그대로 표시되도록 만들고, 그 외 내용이 표시되는 영역을 크기에 따라 늘어나도록 만들면 버튼의 크기가 늘어나더라도 깔끔한 형태의 이미지 버튼을 표시할 수 있다.

이미지에서 늘어날 수 있는 영역과 원본 크기대로 표시되어야 할 영역을 구분하여, 이미지가 그려질 영역의 크기가 늘어나거나 줄어들더라도 원본이미지 형태를 유지되도록 만들어진 이미지이다.

끝으로

코틀린으로 어려운 문법만 공부하다가 오늘부터는 눈에 보이는 UI를 그리는 안드로이드 수업을 시작했다. 이전에 html, css를 사용했던 터라 비교적 비슷한 부분이 많아서 반가웠다. 문법을 공부할때 보다는 수월하지 않을까 생각하는데.. 같이 공부하는 동기가 딱 오늘 배운거까지 쉬울거라 그랬다. 나는 아직 안해봤으니까 해보고 이야기할테야! 아무튼 이번주부터 1~2주는 개인과제고 3주차는 팀과제인데 팀원들이 디자이너 출신이라고 든든하다고 한다. 그동안 도움을 받기만 했는데 열심히 해서 나도 팀원들에게 도움을 줘보고 싶다. 제발 머릿속에 잘 넣어서 주특기 부셔보자!!