안드로이드 앱개발 3주차 강의 [UI]

UI UserInteface

XML 

• Layout Editor : 드래그 앤 드롭 방식. WYSIWYG(what you see is what you get) 에디터
• XML 코드 : 태그나 속성을 코드로 직접 입력하는 방식. Copy & paste를 이용한 편집이 효율적

 

 

 

 

뷰 View

안드로이드 앱의 UI를 구성하는 기본 단위

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

 

• 위젯 Widget : View의 서브 클래스, 앱 화면을 구성하는 시각적인 모양을 지닌 UI요소
• 레이아웃 Layout : ViewGroup의 서브 클래스, 뷰를 포함하면서 정렬하는 기능을 지닌 UI요소

해상도는 부록에 정리되었다.

 

 

 

위젯 Widget

TextView

화면에 text 표시

EditText

입력이 가능한 Text

Button

일반적으로 많이 사용되는 푸시 버튼

사용자가 버튼을 클릭하였을 때, 어떤 행동을 수행 하고자 할 때 사용. TextView의 서브클래스.

상황별 버튼이 부록에 정리되었다.

ImageView

화면에 이미지 표시

투명도 때문에 거의 png 사용. 해상도별 이미지는 벼려도 폴더 생성.

이미지 파일명 규칙 : 소문자, _, 숫자(단 첫글자 제외)가능 (한글, 대문자, 숫자로 시작 불가능)

 

 

 

 

레이아웃 Layout

 

Linear Layout

수평 또는 수직으로 일렬 배치하는 레이아웃

가장 단순하고 직관적이며 사용빈도가 높다. 레이아웃 내 위젯은 진행방향 변경불가, 중첩되지 않고 한줄로 배치, 가중치(전체 영역 대비 비율) 설정 가능하다.  

• vertical : 수직(위에서 아래로)
• horizontal : 수평(좌에서 우로)

 

Relative Layout

뷰간 위치 관계나 컨테이너와 위치 관계를 지정하여 배치하는 레이아웃

상대적인 배치기준을 정하지 않으면 중첩

관계를 지정하는 속성이 부록에 정리되었다.

 

Table Layout

표 형식으로 차일드를 배치하는 레이아웃

TableRow 행으로 구분

 

Frame Layout

컨테이너에 포함된 뷰들을 전부 좌상단에 배치하는 레이아웃

하나의 자식만 표시 할 때 사용. 최근에 추가된 위젯이 가장 상위(ontop)에 표시

 

Constraint  Layout

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

RelativeLayout에선 불가능했던 자식 뷰간의 상호 관계 정의 가능, LinearLayout을 써야만 했던 뷰비율 조절 가능

 

 

 

 

 

Margin : 뷰 외부 간격

Padding : 뷰 내부 간격

Gravity : 뷰 내용 정렬방식