NativeScript-레이아웃 컨테이너

NativeScript는 UI 위젯 구성 요소를 레이아웃하기위한 목적으로 만 컨테이너 구성 요소 모음을 제공합니다. 레이아웃 컨테이너는 상위 구성 요소 역할을하며 하나 이상의 하위 구성 요소를 가질 수 있습니다. 레이아웃 컨테이너의 모든 자식 구성 요소는 부모 레이아웃 컨테이너에서 제공하는 기술을 기반으로 정렬 할 수 있습니다.

NativeScript는 6 개의 레이아웃 컨테이너를 지원하며 다음과 같습니다.

• 절대 레이아웃 컨테이너

• Dock 레이아웃 컨테이너

• 그리드 레이아웃 컨테이너

• 스택 레이아웃 컨테이너

• 레이아웃 컨테이너 포장

• FlexBox 레이아웃 컨테이너

이 장에서 모든 레이아웃 컨테이너 개념을 자세히 알아 보겠습니다.

절대 레이아웃

AbsoluteLayoutcontainer는 NativeScript에서 가장 간단한 레이아웃 컨테이너입니다. AbsoluteLayout은 자식에 어떤 제약도 적용하지 않으며 왼쪽 상단 모서리를 원점으로하는 2 차원 좌표계를 사용하여 자식을 그 안에 배치합니다.

AbsoluteLayout은 자식의 네 가지 속성을 사용하여 위치를 지정하며 다음과 같습니다.

top − Y 방향으로 아래로 이동하는 원점에서 자식의 배치를 정의합니다.

left − 원점에서 x 방향으로 옆으로 이동하는 자식의 배치를 정의합니다.

width -아이의 너비를 정의합니다.

height -아이의 키를 정의합니다.

다음과 같이 애플리케이션의 홈 페이지에 AbsoluteLayout 컨테이너를 추가하겠습니다.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 

<AbsoluteLayout width="200" height="300" backgroundColor="blue"> 
   <Label text="Top Left" left="0" top="0" width="100" height="150" backgroundColor="green">
   </Label> 
   <Label text="Top Right" left="100" top="0" width="100" height="150" backgroundColor="blue"></Label> 
   <Label text="Bottom Left" left="0" top="150" width="100" height="150" backgroundColor="orange">
   </Label>
   <Label text="Bottom Right" left="100" top="150" width="100" height="150" backgroundColor="red"></Label> 
</AbsoluteLayout>

산출

AbsoluteLayout의 출력은 다음과 같습니다.

DockLayout

Docklayout컨테이너 구성 요소를 사용하면 자식이 내부에 도킹 할 수 있습니다. 컨테이너의 각면 (위쪽, 아래쪽, 왼쪽, 오른쪽)은 자식 구성 요소를 도킹 할 수 있습니다. DockLayout 컨테이너는 자식의 dock 속성을 사용하여 올바르게 도킹합니다.

dock 속성의 가능한 값은 다음과 같습니다.

top − 레이아웃 컨테이너는 상단 모서리에 자식 컴포넌트를 도킹합니다.

bottom − 레이아웃 컨테이너는 하단 모서리에 자식 컴포넌트를 도킹합니다.

left − 레이아웃 컨테이너는 왼쪽 모서리에 자식 컴포넌트를 도킹합니다.

right − 레이아웃 컨테이너는 오른쪽 모서리에 자식 컴포넌트를 도킹합니다.

기본적으로, DockLayout컨테이너는 마지막 자식 구성 요소를 도킹합니다. stretchLastChild 속성을 0으로 설정하여 재정의 할 수 있습니다.

추가하자 DockLayout 다음과 같이 응용 프로그램의 홈 페이지에있는 컨테이너-

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<DockLayout width="250" height="300" backgroundColor="blue" stretchLastChild="false"> 
   <Label text="left" dock="left" width="50" backgroundColor="green"></Label> 
   <Label text="top" dock="top" height="50" backgroundColor="orange"></Label> 
   <Label text="right" dock="right" width="50" backgroundColor="red"></Label< 
   <Label text="bottom" dock="bottom" height="50" 
   backgroundColor="orange"></Label> 
</DockLayout>

산출

아래는 DockLayout의 출력입니다.

그리드 레이아웃

GridLayout 컨테이너 구성 요소는 복잡한 레이아웃 컨테이너 중 하나이며 행과 열이있는 표 형식으로 자식 요소를 정렬합니다. 기본적으로 행과 열이 하나씩 있습니다. 그것은 다음과 같은 속성을 가지고 있습니다-

columns−,로 구분 된 각 열의 기본 너비를 나타내는 데 사용됩니다. 가능한 값은 숫자, * 및 자동 키워드입니다.

어디,

• 숫자는 절대 열 너비를 나타냅니다.

• 다른 열에 상대적인 열의 너비를 나타냅니다. 열 너비가 다른 열에 대해 상대적이어야하는 횟수를 나타 내기 위해 숫자가 앞에 올 수 있습니다. 예를 들어 2 *는 열 너비가 가장 작은 열 너비의 2 배 여야 함을 나타냅니다.

• auto는 가장 넓은 자식만큼 열의 너비를 나타냅니다.

예를 들어 *, 2 *는 두 개의 열을 의미하고 두 번째는 첫 번째 열 크기의 두 배가됩니다.

rows −,로 구분 된 각 행의 기본 높이를 나타내는 데 사용됩니다. 값 표현은 열과 유사합니다.

GridLayout은 아래에 지정된 하위 속성을 사용하여 레이아웃합니다.

row − 행 번호

col-열 번호

rowSpan − 레이아웃 내에서 자식 콘텐츠가 포함하는 총 행 수.

colSpan − 레이아웃 내에서 자식 콘텐츠에 걸쳐있는 총 열 수.

다음과 같이 응용 프로그램의 홈 페이지에 GridLayout 컨테이너를 추가하겠습니다.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210"
   backgroundColor="blue"> 
   <Label text="Row: 0; Column 0" row="0" col="0" backgroundColor="green"></Label> 
   <Label text="Row: 0; Column 1" row="0" col="1" colSpan="1" backgroundColor="brown"></Label> 
   <Label text="Row: 1; Column 0" row="1" col="0" rowSpan="1" backgroundColor="red"></Label> 
   <Label text="Row: 1; Column 1" row="1" col="1" backgroundColor="orange"></Label> 
</GridLayout>

산출

아래는 GridLayout의 출력입니다.

StackLayout

StackLayout은 자식을 수평 또는 수직으로 1 차원 선으로 구성합니다. 레이아웃 옵션을 사용하여 레이아웃의 공간에 따라 크기를 조정할 수 있습니다. 방향, 수평 또는 수직을 지정하는 데 사용할 수있는 방향 속성이 있습니다.

다음과 같이 애플리케이션의 홈 페이지에 StackLayout 컨테이너를 추가하겠습니다.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<StackLayout orientation="vertical" width="200" height="200" backgroundColor="blue"> 
   <Label text="Label1" width="50" height="50" backgroundColor="green"></Label> 
   <Label text="Label2" width="50" height="50" backgroundColor="brown"></Label> 
   <Label text="Label3" width="50" height="50" backgroundColor="red"></Label> 
   <Label text="Label4" width="50" height="50" backgroundColor="orange"></Label> 
</StackLayout>

산출

StackLayout의 출력은 다음과 같습니다.

WrapLayout

WrapLayout은 새 행이나 열의 내용을 래핑하는 데 사용됩니다.

그것은 다음 세 가지 속성을 가지고 있습니다-

orientation − 수평 또는 수직으로 표시합니다.

itemWidth − 각 자식의 레이아웃 너비.

itemHeight − 각 어린이의 레이아웃 높이.

다음과 같이 응용 프로그램의 홈 페이지에 WrapLayout 컨테이너를 추가하겠습니다.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <WrapLayout orientation="horizontal" width="200" height="200" backgroundColor="blue">
   <Label text="Label1" width="70" height="70" backgroundColor="green"></Label> 
   <Label text="Label2" width="70" height="70" backgroundColor="brown"></Label 
   <Label text="Label3" width="70" height="70" backgroundColor="red"></Label> 
   <Label text="Label4" width="70" height="70" backgroundColor="orange"></Label> 
</WrapLayout>

산출

Flexbox 레이아웃

FlexboxLayout 컨테이너 구성 요소는 고급 레이아웃 컨테이너 중 하나입니다. 간단한 레이아웃을 매우 복잡하고 정교한 레이아웃으로 렌더링하는 옵션을 제공합니다. CSS Flexbox를 기반으로합니다.

FlexboxLayout 구성 요소에는 많은 속성이 있으며 다음과 같습니다.

flexDirection

하위 구성 요소가 정렬되는 방향을 나타냅니다. flexDirection의 가능한 값은 다음과 같습니다.

row − 하위 구성 요소가 나란히 정렬됩니다.

row-reverse − 하위 구성 요소가 나란히 있지만 반대 방향으로 배열됩니다.

column − 하위 구성 요소가 서로 아래에 배열됩니다.

column-reverse − 하위 구성 요소가 서로 아래에 있지만 반대 방향으로 배열됩니다.

다음과 같이 응용 프로그램의 홈 페이지에 FlexLayout 컨테이너를 추가하겠습니다.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="row"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

산출

아래는 FlexLayout – Row –의 출력입니다.

이제 flexDirection 값을 row에서 row-reverse로 변경하고 레이아웃에 어떤 영향을 미치는지 확인하겠습니다.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <FlexboxLayout flexDirection="row-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

산출

아래는 Flex Layout-Row Reverse-

flexDirection 값을 row-reverse에서 column으로 변경하고 레이아웃에 어떤 영향을 미치는지 확인하겠습니다.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

산출

FlexLayout의 출력 – 열은 다음과 같습니다.

flexDirection 값을 column에서 column-reverse로 변경하고 레이아웃에 어떤 영향을 미치는지 확인하겠습니다.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

산출

다음은 FlexLayout – Column Reverse –

flexWrap

자식 구성 요소가 단일 행 / 열로 렌더링되는지 또는 flexDirection에서 설정 한 방향으로 래핑하여 여러 행으로 흐를 지 여부를 나타냅니다.

가능한 값은 다음과 같습니다.

wrap − 주어진 방향 (flexDirection)에 사용 가능한 공간이없는 경우 하위 구성 요소를 래핑합니다.

wrap-reverse − 구성 요소가 반대 방향으로 흐르는 것을 제외하고 랩과 동일합니다.

flexWrap 속성을 추가 한 다음 값을 wrap으로 설정하겠습니다. 또한 아래 지정된대로 세 자녀를 더 추가하십시오.

<ActionBar> 
   <Label text="Home"></Label> 
&tl;/ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label>
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

산출

다음은 flexWrap의 출력입니다.

JustifyContent

하위 구성 요소가 서로 및 전체 구조에 대해 정렬되는 방식을 나타냅니다. 아래에 지정된 세 가지 속성이 있습니다.

flex-end − 하위 구성 요소를 끝선을 향해 포장합니다.

space-between − 일렬로 균등하게 분포하여 자식 컴포넌트를 패킹합니다.

space-around − 공간 사이와 비슷하지만 주위에 동일한 공간뿐만 아니라 일렬로 균등하게 분포하여 자식 구성 요소를 압축합니다.

justifyContent도 추가하고 작동 방식을 확인합니다.

<ActionBar> 
   <Label text="Home"></Label>
</ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap" justifyContent="space-around"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

산출

아래는 Flex Layout – JustifyContent의 출력입니다.

FlexLayout 컨테이너는 하위 항목이 축소 순서와 기능을 지정할 수 있도록 두 가지 추가 속성을 제공합니다. 그들은 다음과 같습니다-

order − FlexLayout 컨테이너의 자식이 렌더링되는 순서를 결정합니다.

flexShrink -아이들이 레벨 0으로 축소하는 능력을 결정합니다.