안드로이드 레이아웃(LayOut)

<안드로이드 UI - 화면 크기를 고려한 디자인>
- 기기마다 다른 크기, 해상도 비율
  - 크기, 해상도에 따라 이미지 크기를 다르게 사용
  - 화면 크기, 비율에 따라 레이아웃을 다르게 구성

- 태블릿은 폰 보다 더 큰 화면
  - 더 많은 위젯을 포함할 수 있다
  - 화면 크기에 따라 위젯 크기도 자동으로 조정
  - 프래그먼트(Fragment)활용
 
- 기기 방향 변화에 따른 디자인
  - 가로 보기와 세로 보기에 따라 다르게 디자인
  - 또는 방향을 고정하여 한가지만 디자인
 
- UI를 구성하는 요소는 위젯과 레이아웃으로 나눌 수 있다



<UI요소 - 위젯과 레이아웃>
- 위젯
  - 정보를 출력, 입력 받기 위한 UI 구성 요소
  - TextView, Button, EditText, Checkbox 등
 
- 레이아웃
  - 사용자 인터페이스에 대한 시작적 형태를 계층적 구조로 정의
    - 레이아웃(부모)과 포함되는 UI요소들(자식)을 부모-자식 관계로 나타내는 계층적 구조
    - 자식 UI요소 중에 레이아웃이 있을 수 있다(즉, 레이아웃 내에 다른 레이아웃이 중첩하여 존재할 수 있다)
    - XML 파일로 작성하고, 소스 크드에서 로드하여 사용
    - LinearLayout, ConstraintLayout, FrameLayout, CoordinatorLayout, MotionLayout 등




<UI요소 - View 클래스>
- UI요소(위젯, 레이아웃)들은 View를 상속하여 구현
  - 화면에 표시 가능한 사각형 영역
  - 각각의 뷰는 알아서 자신의 내용을 그리고, 이벤트(키보드, 마우스)처리를 해결

- ViewGroup은 View이지만 다른 View를 포함할 수 있는 View
  - 레이아웃은 ViewGroup에 속한다

- View의 속성은 곧 UI요소의 속성이 된다
  - android:visibility : 보이기 속성(Visible, Invisible, Gone)
  - android:layout_height, android:layout_width : 크기 속성
  - android:layout_margin : 외부 여백
  - android:layout_gravity : 위젯 위치 정렬
  - android:padding : 내부 여백
  - android:gravity : 내부 요소 정렬


<레이아웃 XML을 사용하기(Inflate)>
- app/src/main/.../MainActivity.kt
  - setContentView() 메소드에 해당 XML을 인자로 전달
  - R.layout.activity_main은 앞의 app/src/main/res/layout/activity_main.xml파일을 나타나는 상수값으로 빌드할 때 자동으로 생성된다



<위젯>
- TextView, EditText
- Button
- RadioButton, CheckBox, Switch
- ImageView
- WebView
- ScrollView, NestedScrollView, ViewPager
- Spinner, RecyclerView



<위젯 - TextView와 EditText>
- 기본적인 텍스트 표시/입력 뷰
- TextView - 사용자가 수정할 수 없으나 코드에서 텍스트를 변경할 수 있다
- EditText - 사용자가 입력 가능



<위젯 - Button>
- 일반적으로 많이 사용되는 푸시 버튼
- 버튼 위에 텍스트, 아이콘을 표시할 수 있다
  - 버튼 전체를 이미지로 그리기 위해서는 ImageButton 사용

- 버튼 클릭 처리
  - 방법1) 소스 코드에 View.onClickListener를 지정하거나
  - 방법2) 레이아웃 XML에 버튼 속성 onClick에 클릭 이벤트 핸들러를 지정



<위젯 - CompoundButton>
- 두 개의 상태를 갖는 버튼
  - 체크/미체크, 온/오프



<레이아웃 - LinearLayout>
- LinearLayout(선형 레이아웃)
- 자식 UI요소들을 가로(horizontal) 방향 또는 세로(vertical) 방향으로 일렬로 배치하는 레이아웃
- 단순한 UI 요소 배치에는 쉽게 사용할 수 있으나 
- 복잡한 배치는 쉽지 않고, 레아이웃을 많이 중첩하게 되어 성능이 떨어진다
- 관련 속성
  - android:orientation - 배치 방향을 결정, vertical 또는 horizontal
  - android:layout_weight - 남은 공간을 자식 요소들에게 나누어 줄 가중치



<UI 요소 크기>
- UI 요소(레이아웃과 위젯)의 가로, 세로 크기를 지정할 수 있다
- 가로 크기 : layout_width
- 세로 크기 : layout_height
- 크기 값으로 사용 가능한 것은
  - match_parent : 부모 UI요소 크기와 일치시킨다
  - wrap_content : UI요소 내부의 내용 크기에 맞게 크기를 조절
  - 특정 숫자 값 : 예를 들어 300dp, 100px, 크기를 값에 따라 고정한다
    - dp 단위 사용을 권장
    - 160dpi 해상도 기준(1dp는 1pixel), 320dpi라면 1dp는 2pixel이 된다



<Layout_Margin과 Padding>
- Layout_Margin : View의 바깥 여백
- Padding : View의 내부 여백



<Layout_Gravity>
- 부모 뷰 내에서 해당 뷰의 정렬 위치를 지정하는 속성
- LinearLayout/FrameLayout의 자식 뷰에서 layout_gravity 속성으로 흔히 사용

- 가능한 값들
  - Bottom : 부모 뷰에서 아래쪽에 위치시킨다
  - Center : 부모 뷰의 중앙에 위치시킨다
  - Center_horizontal : 부모 뷰의 수평 기준으로 중앙에 위치시킨다
  - Center_vertical : 부모 뷰의 수직 기준으로 중앙에 위치시킨다
  - End : 부모 뷰에서 텍스트 방향의 끝(한글이나 영어의 경우는 오른쪽)에 위치시킨다
  - Left : 부모 뷰에서 왼쪽에 위치시킨다
  - Right ; 부모 뷰에서 오른쪽에 위치시킨다
  - Top : 부모 뷰에서 위쪽에 위치시킨다



<이벤트 리스너(Event Listeners)>
- 이벤트를 처리할 때 콜백 메소드를 포함하는 인터페이스
- 사용자가 뷰를 사용하여 상호작용할 때 안드로이드 프레임워크에 의해 호출된다
  - 버튼을 눌렀을 때 처리
  - 리스트 뷰에서 항목을 선택했을 때 처리 


<Event Listener Interface>
- View.OnClickListener : 뷰를 클릭했을 때 콜백
- Veiw.OnLongClickListener : 뷰를 오래 눌렀을 때(롱 클릭) 콜백
- View.OnFocusChangeListener : 뷰에 입력 포커스가 변경됐을 때 콜백
- Veiw.OnKeyListener : 키를 눌렀을 때 콜백
- View.OnTouchListener : 뷰를 터치했을 때, 땠을 때 등에 대한 콜백
- View.OnCreateContextMenu : 롱 클릭으로 컨텍스트 메뉴가 생성될 때 호출되는 콜백 인터페이스


<ConstraintLayout>
- 기존의 레이아웃(Linear, Relative 등)에 비해 레이아웃 중첩하지 않고도 복잡한 레이아웃을 만들 수 있다
  - Flat Hierarchy
- 안드로이드 스튜디오의 레이아웃 에디터로 만들기 편리하다
  - XML로 코딩하려면 매우 귀찮다
- 성능이 다른 레이아웃에 비해 우수하다


<Constraints>
- 위젯 정렬 방식 지정
- 앵커(Anchor)를 사용하여 위젯들 간의 정렬 규칙을 정한다
  - 위젯 선택했을 때 위, 아래, 왼쪽, 오른쪽 테두리에 보이는 원 모양이 앵커


<Constraints - Bias>
- 수평, 수직 bias 값을 주어 가운데가 아니라 좌우, 상하로 이동할 수 있다


<Constraints>
- 다른 위젯을 기준으로 한 Constraints
  - Button1의 Start, End, Top, Bottom constraint는 parent로 연결
  - Button2의 constrarintStart를 Button1의 End로 연결


<Chain>
- 위젯 여러 개를 한 줄로 정렬하고 싶을 때
  - 버튼 위젯 3개를 배치하고 3개를 드래그하여 모두 선택한 후
  - 오른쪽 마우스 버튼 눌러서 팝업 메뉴 Chains > Create Horizontal Chain

- 버튼 사이의 선이 chain 모양으로 바뀌어 있고 일정한 간격으로 정렬이 된다
  - 버튼간의 constraint가 서로 연결



<Chain - Mode(spread, spread_inside, packed)>
- Chain으로 연결 된 위젯 하나를 선택하고 오른쪽 마우스 버튼을 눌러서 팝업 메뉴
- Cycle Chain mode 선택
  - Spread, Spread_inside, Packed 모드로 순환하면서 바뀐다


<Chain - Bias>
- Chain으로 연결된 위젯들의 첫 위젯 Bias를 변경하면 모두 따라서 움직인다