사용자 인터페이스 기초

# 사용자 인터페이스 기초
- 자바의 swing은 사용하지 않음(리소스를 많이 잡아먹음)
- 독자적인 사용자 인터페이스 컨트롤 사용(버튼, 리스트, 스크롤바, 체크박스, 메뉴, 대화 상자)

 

# 뷰와 뷰그룹
- 뷰 : 컨트롤 또는 위젯. 사용자 인터페이스를 구성하는 기초적인 빌딩 블록. 즉, 컴포넌트들. 버튼, 텍스트, 체크박스. View 클래스를 상속받아서 작성
- 뷰그룹 : 다른 뷰들을 담는 컨테이너 기능. ViewGroup 클래스에서 상속 받음. layout이라고 불리며 선형 레이아웃, 테이블 레이아웃, 상대적 레이아웃 등이 속함. 각 레이아웃은 정해진 정책에 따라서 뷰들을 배치함.

 

# UI를 작성하는 절차
1. 뷰그룹 생성
2. 필요한 뷰 추가
3. 액티비티 화면으로 설정

 

# UI를 작성하는 방법
1. xml로 사용자 인터페이스 기술
2. 코드로 사용자 인터페이스 기술

 

# xml로 UI 작성

- activity_main.xml

- LinearLayout – 선형 레이아웃이라는 뷰그룹 생성
- android:orientation=“vertical”
- Button – 버튼이라는 뷰 생성

 

# 자바 코드는 변경하지 않음
- 자동 생성된 코드 사용

 

# 뷰
- View클래스는 모든 뷰들의 부모 클래스
- View클래스가 가지고 있는 필드나 메소드는 모든 뷰에서 공통적으로 사용 가능

# 뷰의 필드와 메소드
- id : 뷰의 식별자
- 뷰의 위치와 크기
match_parent : 부모의 크기를 꽉 채움
wrap_content : 뷰가 나타내는 내용물의 크기에 맞춤
숫자 : 크기를 정확히 지정

 

# 뷰의 크기 단위
- px(pixels) : 화면의 실제 픽셀. 권장 X(화면의 밀도가 다르기 때문)
- dp(density-independent pixels) : 160dp는 화면의 밀도와 상관없이 항상 1인치
- sp(scale-independent pixels) : 화면 밀도와 사용자가 지정한 폰트 크기에 영향
- pt(points) : 1/72 인치
- mm(millimeters) : 밀리미터
- in(inches) : 인치

 

 

# 색상
- 16진수로 투명도와 빛의 3원색인 RGB값을 표시
#RRGGBB : 빨강, 녹색, 청색 (255단계)
#AARRGGBB : AA는 투명도

 

# 화면에 보이기 속성
- visible (0) : 화면에 보이게 함. 디폴트 값
- invisible (1) : 표시되지 않음. 배치에서 공간 차지
- gone (2) : 완전히 숨겨짐

 

# 마진과 패딩
- 마진 : 자식 뷰 주위의 여백
layout_marginLeft, layout_marginRight, layout_marginTop, layout_marginBottom
- 패딩 : 뷰의 경계와 뷰의 내용물 사이의 간격
paddingLeft : 왼쪽으로 떨어져 있는 부분, paddingRight, paddingTop, paddingBottom

 

# 에디트 텍스트
- android:autoText : 자동으로 타이핑 오류 교정
- android:drawableBottom : 텍스트의 아래에 표시되는 이미지 리소스
- android:drawableRight : 텍스트가 오른쪽에 표시되는 이미지 리소스

- android:editable : 편집 가능
- android:text : 표시되는 텍스트
- android:singleLine : true이면 한 줄만 받음
- android:inputType : 입력의 종류
- android:hint : 입력 필드에 표시되는 힌트 메시지

 

 

# 에디트 텍스트의 inputType 속성
- none : 편집이 불가능한 문자열
- Text : 일반적인 문자열
- textMultiLine : 여러 줄로 입력 가능
- textPostalAddress : 우편번호
- textEmailAddress : 이메일 주소
- textPassword : 패스워드
- textVisiblePassword : 패스워드 화면에 보인다.
- number : 숫자
- numberSigned : 부호가 붙은 숫자
- numberDecimal : 소수점이 있는 숫자
- phone : 전화번호
- datetime : 시간

 

 

# 이미지 뷰(ImageView) : 아이콘과 같은 이미지들을 간단히 표시
- android:adjustViewBounds(setAdjustViewBounds(boolean)) : drawable의 종황비를 유지하기 위하여 이미지 뷰의 가로, 세로를 조정
- android:cropToPadding : true이면 패딩 안에 맞추어서 이미지를 자름
- android:maxHeight(setMaxHeight(int)) : 이미지 뷰의 최대 높이

- android:maxWidth(setMaxWidth(int)) : 이미지 뷰의 최대 너비
- android:scaleType(setScaleType(ImageView.ScaleType)) : 이미지 뷰의 크기에 맞추어 어떻게 확대나 축소할 것인지 방법 선택
- android:src(setImageResource(int)) : 이미지 소스

- android:tint(setColorFilter(int, PorterDuff.Mode)) : 이미지 배경 색상

 

 

# 레이아웃
- 뷰들을 화면에 배치하는 방법

 

# 레이아웃 종류
- LinearLayout(선형 레이아웃) : 자식들을 수직이나 수평으로 배치
- TableLayout : 자식들을 테이블 형태로 배치
- GridLayout : 자식들을 바둑판 모양으로 배치
- RelativeLayout : 자식들을 부모나 다른 자식에 상대적으로 배치
- ConstraintLayout : 자식들을 부모나 다른 자식에 상대적으로 배치. 복잡
- TabLayout : 탭을 이용하여서 겹쳐진 자식 중에서 하나를 선택

- AbsoluteLayout : 절대 위치로 배치
- FrameLayout : 모든 자식들을 겹치게 배치

1. 선형 레이아웃(linear layout)
# 배치 방법
- 자식 뷰들을 수직, 수평으로 배치
- orentation : horizontal 은 수평, vertical은 수직으로 배치
- gravity : x축과 y축 상에 자식을 어떻게 배치할 것인지 지정
- baselinAligned : flase로 설정되면 자식 뷰들의 기준선을 정렬하지 않음

 

# Gravity 속성
- top : 상단에 배치, 크기를 변경하지 않음
- bottom : 하단에 배치, 크기를 변경하지 않음
- left : 좌측에 배치, 크기를 변경하지 않음
- right : 우측에 배치, 크기를 변경하지 않음
- center_vertical : 수직의 중앙에 배치, 크기를 변경하지 않음
- fill_vertical : 수직을 채우도록 배치
- center_horizontal : 수평의 중앙에 배치, 크기를 변경하지 않음
- fill_horizontal : 수평을 채우도록 배치
- center : 수평, 수직의 중앙에 배치
- fill : 가득 채우도록 배치

# 가중치
- layout_weight로 정수로 표현
- 자식 뷰의 중요도를 나타냄
- 지정하지 않으면 0 값으로 가정

# 코드로 사용자 인터페이스  만들기
- LinearLayout container = new LinearLayout(this);
- container.setOrientation(LinearLaout.VERTICAL);

- Button b = new Button(this); or Button b = (Button) findViewByld(R.id.button);

- b.setText(“버튼”);
- container.addView(b);
- setContentView(container);
- b2.setEnabled(false); => 버튼 불활성화(흐리게 됨)

 

 

2. 테이블 레이아웃(TableLayout)
- 자식 뷰들을 테이블 형태로 배치
- 하나의 TableRow 안에 여러 개의 셀들이 들어감
- 하나의 셀 안에는 하나의 뷰 객체가 들어감

 

 

3. 상대적 레이아웃(RelativeLayout)
- 자식 뷰의 위치를 부모 뷰나 다른 자식 뷰에 상대적으로 지정

# 배치 방법
- layout_above : 만약 true이면 현재 뷰의 하단을 기준 뷰의 위에 일치
- layout_below : 현재 뷰의 상단을 기준 뷰의 하단에 위치
- layout_centerHorizontal : 수평으로 현재 뷰의 중심을 부모와 일치
- layout_centerInParent : 부모의 중심점에 현재 뷰를 위치
- layout_centerVertical : 수직으로 현재 뷰의 중심을 부모와 일치
- layout_toLeftOf : 현재 뷰의 우측단을 기준 뷰의 좌측단에 위치
- layout_toRightOf : 현재 뷰의 좌측단을 기준 뷰의 우측단에 위치
- layout_alignParentTop : true이면 화면의 상단에 배치