기록 블로그

레이아웃 정의

• 사용자 인터페이스를 위한 구조

종류

• relative layout

• linear layout

• frame layout

• table layout

• listVIew 와 GridView

Linear Layout

• 가로 또는 세로 정렬 레이아웃
• 중첩 X, 지정 방향으로만 쌓임
• width 는 %, px가 아닌 비율

Relative Layout

• 자식 View와의 상대적인 위치
• toRightOf : 오른쪽 배치
• below : 아래 배치
• alignParentLeft : 왼쪽 정렬
• centerInParent : 중앙 정렬
• 다중 Linear layout로 구성되어 있는것을 relative layout게 강력하지만 만들기 다소 어려움

Frame Layout

• 모달같이 여러화면을 중첩으로 구현할때 사용
• 가장 최근에 추가된 뷰만 보임
• Fragement 동일한 위치에서 다양한 뷰를 교체로 표현하고 싶을 떄

Table Layout

• html table 과 비슷 하지만 행과 열을 합칠수 없고 td역할 하는게 없음

ListView and GridView

• 동일한 뷰를 안에 컨텐츠만 다르게 반복해야하는 경우
• List : 상하로 펼쳐지는 것
• Grid : 차곡히 좌에서 우로 펼쳐지는 것 레아이웃 넘으면 아랫줄로
• for문 사용한 것과 같은 뷰 반복 효과

ConstraintLayout

• linear 와 relative 로 레이아웃을 구현하기 다소 복잡한 면이 있어 constraintLayout을 많이씀

• 중첩 가능

  <Button android:id="@+id/button1" ...
         app:layout_constraintRight_toRightOf="parent" />

• 의미

  • layout 을 constraint로 할건데 parent의 오른쪽으로 배치할것임

• 두개의 뷰를 연결하고 싶으면 chain사용

• 배치 방법

  • 형태 - layout_constraint[기준1]_to [기준2]of=[viewId / parent]
  • 예시
    • layout_constraintLeft_toLeftOf
    • layout_constraintLeft_toRightOf
    • layout_constraintRight_toRightOf
    • layout_constraintRIght_toLeftOf
    • layout_constraintTop_toTopOf
    • layout_constraintTop_toBottomOf
    • layout_constraintBottom_toTopOf
    • layout_constraintBottom_toBottomOf
    • layout_constraintStart_toStartOf
    • layout_constraintStart_toEndOf
    • layout_constraintEnd_toStartOf
    • layout_constraitnEnd_toEndOf

• 한쪽으로 치우치게 (bias)

  • 0~1값
  • default = 0.5
  • layout_constraintHorizontal_bias
  • layout_constraintVertical_bias

• 레이아웃을 빠져나간 경우

  • default = false
  • layout_constraintedWidth = [true / false ]
  • layout_constraintedHeight = [true / false ]

주의사항

• top/bottom/right/left 를 다 사용해야하지는 않지만 필수는 아니지만 레이아웃이 깨질수도 있어 확실하게 하기위해서는 네개다 명시하는 것을 지양해야함

• MATCH_CONSTRAINT

  • 부모 뷰에 꽉맞추고 싶을 때

    <Button anroid:layout_width="wrap_content"
          // wrap_content 와 같은 기능
          app:layout_constraintWidth_min 
          app:layout_constraintHegith_min
          app:layout_constraintWidth_max
          app:layout_constraintHeight_max
          // 0 1사이 값을 입력해서 비율로 길이 결정 ex- 0.2
          app:layout_constraintWidth_percent
          app:layout_constraintHeight_percent
    >

• CHAIN

  • 뷰끼리 연결시 간격을 정하고 싶은 경우 사용
  • 뷰끼리 연결할 떄
  • 수평 가장 왼쪽에 있는 값이 기준 (HEAD)
  • 요소
    • layout_constraintHorizontal_chianStyle
    • layout_constraintVertical_chainStyle
  • 스타일
    • CHAIN_SPREAD - 모든 여백을 같게함
    • CHAIN_SPREAD_INSIDE - CHAIN_SPREAD와 같지만 양끝은 부모에 붙임
    • CHAIN_PACKED - 묶어버리고 부모 여백을 같게함

cf
layout은 기본적으로 chain으로 연결되어있다 그래서 위아래로 연결하고 싶은경우
layout_constraintTop_toButtomOf 로 연결하면 위아래로 연결된다
내가 한 실수
layout_constraintBottom_toTopOf 까지 연결하면 위에 값이랑 아래값이 연결된다는 소리를 아니다