[Android] TIL 21일차

1-1. UI(UserInteface)설계 개요

---

 

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

 

* 뷰의 구성

1. 위젯(Widget) : View의 서브 클래스, 앱 화면을 구성하는 시각적인 모양을 지닌 UI 요소

ex) 버튼, 메뉴, 리스트

2. 레이아웃(Layout) : ViewGroup의 서브 클래스, 다른 뷰(위젯 or 레이아웃)를 포함하면서 이들을 정렬하는 기능을 지닌 UI 요소

 

* 뷰와 뷰 그룹의 차이

뷰(view) -> 화면에 보이는 모든 요소

뷰그룹(viewgroup) -> view를 담아 화면에 적절히 배치하기 위한 일종의 컨테이너

 

일반적으로 뷰 객체는 위젯, 뷰그룹 객체는 레이아웃

 

 

 

1-2. UI 설계 방법

---

방법은 Layout Editor, xml 파일을 직접 편집 두 가지 방법이 존재

 

AndroidStudio의 Layout Editor(Design 탭 활용) : 드래그 앤 드롭 방식, 코드가 자동 생성

 

* Layout Editor 화면

Layout 구성요소

 

1. Palette : 레이아웃으로 드래그 할 수 있는 다양한 뷰(위젯) 및 뷰 그룹(레이아웃)을 포함

2. Component Tree : 레이아웃에서 구성요소의 계층 구조를 표시합니다.

3. 툴바 : 편집기에서 레이아웃 모양을 구성하고 레이아웃 속성을 변경하려면 이 버튼을 클릭합니다. (현재 파일명, 가로/세로 모드, 화면, 언어, sdk 버전 설정 등)

4. 디자인 편집기

5. Attributes(속성)

6. 뷰 모드 : 레이아웃을 코드, 디자인, 분할 모드 중 하나로 표시(분할 모드는 코드 창과 디자인 창을 동시에 표시)

7. 확대/축소 및 화면 이동 컨트롤

 

 

 

2. 위젯

---

* 위젯

-> View의 서브 클래스 중에서 화면에 보이는 것들을 말함

-> 대표적으로 TextView, EditText, Button 등이 있음

 

* View

-> 모든 UI 컴포넌트들의 부모 클래스

--> 그러므로 Widget, Layout 모두 View 클래스의 속성, 메소드를 상속받는다.

 

* View 속성 종류

id : UI 컴포넌트들의 고유한 식별값

layout_width(가로), layout_height(세로)

- match_parent : 부모 UI컴포넌트의 크기에 맞춤

- wrap_content : UI 컴포넌트의 내용물 크기에 맞춤

 

px(스크린 실제 단위) : 지정한 수치만큼 표시되는 절대적 표시 단위

dp(Density-independentPixel) : 해상도(밀도)와 상관 없이 다룰 수 있는 단위

dpi(dotsperinch) : 1인치에 들어가는 픽셀을 나타내는 단위, 개수가 많을수록 고밀도

-> 100dpi는 1인치 당 100개의 픽셀이 포함되는 걸 의미

 

* 모든 위젯 사이즈를 정할 때 dp를 쓰는 이유

-> px와 달리 해상도를 변경했을 때 크기가 유지 됨(대응력이 좋음)

--> 이미지 같은 경우 dp로 해도 자동으로 커지지 않음, 그래서 각 디바이스 해상도에 맞는 이미지를 전부 추가하고 해당 디바이스에 맞는 이미지가 나오도록 조건을 작성해서 출력

 

* Textview

-> View 속성 상속을 상속함(id, layout_width, layout_height, background 기타 등등)

 

* TextView 주요 속성

속성명	의미
text	출력할 문자열 지정
textSize	폰트 크기
textStyle	텍스트 스타일(normal, bold, italic)
typeface	텍스트 폰트(normal, sans, serif, monspace)
textColor	문자열 색상
singleLine	속성값이 true면, 텍스트가 위젯의 폭보다 길 때 강제로 한 줄만 출력

 

 * singleLine = false일 때

왼쪽 코드, 우측 디자인 화면

* singLine = true일 때

왼쪽 코드, 우측 디자인 화면

 

* EditText

-> 입력이 가능한 text

분류	명칭 및 설명
키보드 타입 설정 값	“text”:일반적인 텍스트 키보드 “phone”:전화번호 입력 키보드 "textEmailAddress”:@문자를 가진 텍스트 키보드
키보드 행위 설정 값	“textCapWords” : 문장의 시작을 대문자로 변환 “textAutoCorrect” : 입력된 단어와 유사한 단어를 제시하고 제시된 단어 선택 시,입력된 단어를 대치 “textMultiLine”:여러 줄을 입력 받을 수 있음

 

* background 넣는 방법

1. 직접 RGB 값을 입력 (ex : #FF0000)

2. res > values > color에서 색깔에 대해 코드를 작성한 후 지정해서 불러올 수도 있음

 

* Button

-> 사용자가 버튼을 눌렀을 때, 어떤 행동을 수행하고자 할 때 사용됨

-> Button 클래스도 TextView의 서브 클래스라 TextView의 모든 속성 사용 가능

-> 버튼 내에 텍스트,아이콘을 표시 할 수 있음

-> 종류는 Button, CheckBox, RadioButton, Switch, Toggle Button, ImageButton가 있음

 

* Button 클릭 이벤트 처리 방법

 

1. onClick 속성 활용 방법

: MainActivity에 doAction 함수를 추가하고 위 사진과 같이 코드 작성 후 Button 위젯에 onClick을 추가하고 doAction 입력

 

2. 이벤트 처리 객체 이용 방법

: findViewById와 SetOnClickListener를 활용하여 작성

 

* 레이아웃

 

레이아웃 종류

 

* Linear Layout : 컨테이너에 포함 된 뷰들을 수평 또는 수직으로 일렬 배치하는 레이아웃

 

* Linear Layout 특징 정리

1. 위젯들을 배치할 때 오로지 한 방향(가로 또는 세로)으로 정렬
2. 위젯의 크기와 관계없이 한 줄로만 배열
3. 자식들은 중첩되지 않고 쌓이는 형태(stack)로 표시됨
4. LayoutWeight 속성(: 자식들이 배치 될 때,전체 영역을 기준으로 각각 위젯의 비율을 지정)을 갖고 있음
   (ex : 전체 크기가 10, 위젯이 두 개일 때 첫 번째 위젯 7 : 두 번째 위젯 3 같이 비율 지정이 가능)

 

* Relative Layout  : 뷰를 서로 간의 위치 관계나 컨테이너와의 위치 관계를 지정하여 배치하는 레이아웃

 

* Relative Layout 특징 정리

1. "A 위젯을 표시하고 B 위젯은 A 위젯 오른쪽에 표시"와 같이 위젯 간 상대적 위치를 지정할 수 있음
2. Realtive Layout 자체가 상대적 위치의 기준점으로도 활용 됨
3. 내부에서 위젯들간 중첩이 가능함

 

* Constraint Layout

-> 제약 조건을 사용해 화면을 구성하는 레이아웃

 

* Constraint Layout 특징 정리

-> 자식 View들과의 관계를 정의해서 레이아웃을 구성함(Relative보다 유연하고 다양한 기능을 제공)

--> 무엇보다 상호 관계 정의가 가능하다는 게 굉장히 큰 장점

 

Margin : 바깥 여백

Padding : 내부 여백

Gravity : 정렬

 

* Gravity 속성

• BOTTOM : ­부모 뷰에서 아래 쪽에 위치시킴
• CENTER ­: 부모 뷰의 중앙에 위치시킴
• CENTER_HORIZONTAL : ­부모 뷰의 수평기준으로 중앙에 위치시킴
• CENTER_VERTICAL : ­부모 뷰의 수직기준으로 중앙에 위치시킴
• END­ : 부모 뷰에서 텍스트 방향의 끝(한글이나 영어의 경우는 오른쪽)에 위치시킴
• LEFT : ­부모 뷰에서 왼쪽에 위치시킴
• RIGHT : ­부모 뷰에서 오른쪽에 위치시킴
• TOP : ­부모 뷰에서 위쪽에 위치시킴

 

스타일(Style)

-> 각각 위젯에 설정

--> 레이아웃을 지정하는 XML과 별개인 XML리소스에 정의(높이, 패딩, 글꼴 색상, 글꼴크기, 배경색 등의 속성을 지정)

 

테마

-> 스타일과 달리 전체 Activity 또는 앱에 적용함, 작성 방식은 스타일과 동일

 

 

 

 

* 참고 자료 및 보면 유용한 자료

---

https://kadosholy.tistory.com/127

[안드로이드] View와 ViewGroup (화면 구성을 위한 뷰와 뷰그룹)

: View와 ViewGroup에 대한 설명

 

https://128june.tistory.com/65

[Android Studio] EditText - inputType 종류

: EditText의 inputType 종류

 

https://wpioneer.tistory.com/14

안드로이드 독학 4일차 : 버튼(Button)

: Button 종류와 설명 간단 정리