요약 - 17장. Grid 마스터

  • 아티클

참고 항목

이 책은 2016년 봄에 출간되었으며, 그 후로 업데이트되지 않았습니다. 이 책의 많은 내용이 지금까지도 무척 유용하나, 일부 내용은 오래되었고 올바르지 않거나 완전하지 않은 주제도 있습니다.

Grid는 자식 요소를 셀의 행과 열로 배열하는 강력한 레이아웃 메커니즘입니다. 유사한 HTML table 요소와 달리 Grid는 프레젠테이션 대신 레이아웃의 목적으로만 사용됩니다.

기본 Grid

Grid는 Grid가 상속하는 Children 속성을 정의하는 Layout<View>에서 파생됩니다. XAML 또는 코드에서 이 컬렉션을 채울 수 있습니다.

XAML의 Grid

XAML의 Grid 정의는 일반적으로 RowDefinition 및 ColumnDefinition 개체로 Grid의 RowDefinitions 및 ColumnDefinitions 컬렉션을 채우는 것으로 시작됩니다. 이는 Grid의 행 및 열 수와 해당 속성을 설정하는 방법입니다.

RowDefinition에는 Height 속성이 있고 ColumnDefinition에는 Width 속성이 있으며 둘 다 GridLength 형식의 구조체입니다.

XAML에서 GridLengthTypeConverter는 단순 텍스트 문자열을 GridLength 값으로 변환합니다. 내부적으로 GridLength 생성자는 3개의 멤버를 포함하는 열거형인 GridUnitType 형식의 값과 숫자를 기반으로 GridLength 값을 만듭니다.

  • Absolute — 너비 또는 높이가 디바이스 독립적 단위(XAML의 숫자)로 지정됩니다.
  • Auto - 높이 또는 너비는 셀 내용(XAML의 "자동")에 따라 자동 크기 조정됩니다.
  • Star- 남은 높이 또는 너비가 비례적으로 할당됩니다(XAML에서 별이라고 하는 "*"이 있는 숫자)

Grid의 각 자식 요소에도 명시적으로 또는 암시적으로 행과 열을 할당해야 합니다. 행 범위 및 열 범위는 선택 사항입니다. 이러한 속성은 모두 연결된 바인딩 가능 속성을 사용하여 지정됩니다. 이 속성은 Grid 정의된 속성이지만 자식 Grid에 설정되어 있습니다. Grid는 연결된 바인딩 가능한 정적 속성 4개를 정의합니다.

  • RowProperty - 0부터 시작하는 행입니다. 기본값은 0입니다.
  • ColumnProperty - 0부터 시작하는 열입니다. 기본값은 0입니다.
  • RowSpanProperty — 자식이 걸쳐 있는 행의 수입니다. 기본값은 1입니다.
  • ColumnSpanProperty — 자식이 포괄하는 열 수입니다. 기본값은 1입니다.

코드에서 프로그램은 8개의 정적 메서드를 사용하여 이러한 값을 설정하고 가져올 수 있습니다.

XAML에서는 다음 특성을 사용하여 이러한 값을 설정합니다.

  • Grid.Row
  • Grid.Column
  • Grid.RowSpan
  • Grid.ColumnSpan

SimpleGridDemo 샘플은 XAML에서 Grid를 만들고 초기화하는 방법을 보여줍니다.

Grid는 Layout에서 Padding 속성을 상속하고 행과 열 사이의 간격을 지정하는 두 개의 추가 속성을 정의합니다.

RowDefinitions 및 ColumnDefinitions 컬렉션이 반드시 필요한 것은 아닙니다. 없는 Grid 경우 자식에 대한 Grid 행과 열을 만들고 모든 기본값 GridLength 인 "*"(별표)를 제공합니다.

코드의 Grid

GridCodeDemo 샘플은 코드에서 Grid를 만들고 채우는 방법을 보여줍니다. Grid.IGridList<T> 인터페이스에서 정의한 것과 같은 Add 추가 Add 메서드를 호출하여 각 자식에 대해 직접 또는 간접적으로 연결된 속성을 설정할 수 있습니다.

Grid 가로 막대형 차트

GridBarChart 샘플에서는 대량 AddHorizontal 메서드를 사용하여 Grid에 여러 개의 BoxView 요소를 추가하는 방법을 보여줍니다. 기본적으로 이러한 BoxView 요소는 너비가 동일합니다. 그러면 각 BoxView의 높이를 가로 막대형 차트와 비슷하게 제어할 수 있습니다.

GridBarChart 샘플의 Grid는 처음에 표시되지 않는 Frame을 사용하여 AbsoluteLayout 부모를 공유합니다. 또한 이 프로그램은 Frame을 사용하여 탭 모음에 대한 정보를 표시하도록 각 BoxView에 대한 TapGestureRecognizer를 설정합니다.

Grid의 맞춤

GridAlignment 샘플은 VerticalOptions 및 HorizontalOptions 속성을 사용하여 Grid 셀의 자식 요소를 맞추는 방법을 보여줍니다.

SpacingButtons 샘플은 Grid 셀의 가운데에 있는 Button 요소에 동일한 간격을 지정합니다.

셀 구분선 및 테두리

Grid에는 셀 구분선 또는 테두리를 그리는 기능이 포함되어 있지 않습니다. 그러나 직접 만들 수 있습니다.

GridCellDividers에서는 얇은 BoxView 요소에 구체적으로 추가 행과 열을 정의하여 구분선처럼 보이게 하는 방법을 보여줍니다.

GridCellBorders 프로그램은 추가 셀을 만드는 대신 각 셀의 BoxView 요소를 맞춰서 셀 테두리처럼 보이게 합니다.

실제와 가까운 Grid 예

KeypadGrid 샘플에서는 Grid를 사용하여 키패드를 표시합니다.

KeypadGrid의 삼중 스크린샷

방향 변경에 응답

Grid는 방향 변경에 응답하도록 프로그램을 구성하는 데 도움이 될 수 있습니다. GridRgbSliders 샘플에서는 세로 방향 전화의 두 번째 행과 가로 방향 전화의 두 번째 열 간에 요소를 이동하는 기법을 보여줍니다.

이 프로그램은 Slider 요소를 0~255 범위로 초기화하고 데이터 바인딩을 사용하여 슬라이더의 값을 16진수로 표시합니다. Slider 값은 부동 소수점이고 16진수에 대한 .NET 서식 지정 문자열은 정수에만 유효하므로 Xamarin.FormsBook.Toolkit 라이브러리의 DoubleToIntConvert 클래스가 도움이 됩니다.