퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 튜토리얼
  4. 6. 룩앤필 개선하기

6. 룩앤필 개선하기

소개

이전 챕터에서 우리는 모의 백엔드를 구현하고 우리의 뷰를 묶어서 앱의 주요 부분의 흐름을 마무리했습니다. 아직 앱 스플래시 화면을 작성하지는 않았지만 프로젝트의 다음 단계인 룩앤필을 해결하기에 충분합니다. 앱의 룩앤필은 앱의 모양과 작동 방식을 나타냅니다. 앱의 일반적인 스타일/색상 및 사용자 상호 작용을 기반으로 애니메이션이 적용되는 방식에 대해 설명합니다.

이 챕터에서는 독창적인 디자인과 일치하도록 앱의 룩앤필을 조정할 것입니다. 이를 달성하기 위해 퓨즈의 실시간 재로딩 기능을 최대한 활용하여 더 빠른 반복 작업을 수행할 뿐만 아니라 앱의 일반적인 모습과 모양을 나타내는 재사용 가능한 컴포넌트를 만듭니다. 이 챕터를 마치면 앱을 완성하는 데 한 발자국만 남게 됩니다. 이제 시작하겠습니다!

이 챕터의 최종 코드는 여기에서 볼 수 있습니다.

배경색

앱의 룩앤필을 조정하는 가장 좋은 방법은 우리가 만들고자 하는 모양에 맞는 배경색을 설정하는 것입니다. 이것은 매우 쉽고 빠르며, 도움이 될 것입니다. 자, 이제 시작하겠습니다.

우리 앱의 스크린 중 하나(이 경우는 하이킹 편집 페이지)의 디자인을 잠깐 살펴보면:

여기서 우리는 디자인 전체에 짙은 녹색 – 짙은 푸른 색조가 있음을 알 수 있습니다. 그래서 그것을 배경색의 가이드로 사용합니다. 우리 앱의 배경색을 변경하려면 우리 앱의 App 클래스에 있는 Background 속성을 설정해야 합니다. 이 경우 MainView.ux에서 수행할 것입니다. 이 색을 16진수 #022328로 설정합시다:

1
2
<App Background="#022328">
    <Router ux:Name="router" />

우리의 앱은 이제 다음과 같이 보입니다:

우리는 훌륭한 출발을 했습니다! 그러나 다른 UI 컴포넌트들이 꽤 어색해 보입니다. 자, 이제 우리의 스크린을 살펴보고 조각을 하나씩 고쳐 봅시다.

HomePage 개선하기

우리는 HomePage에서 시작할 것인데, 우리는 결국 다음과 같이 보이기를 원합니다:

현재 구현과 디자인 이후의 가장 분명한 차이점 중 하나는 셀렉터의 룩앤필입니다. 현재 셀렉터는 간단한 버튼을 사용하여 구현되었습니다. 그러나 우리는 우리의 디자인과 일치하는 사용자 정의된 무언가를 만들고 싶습니다.

제일 먼저 할 일은 버튼을 가장 간단한 커스텀 UX로 대체하는 것입니다. 우리의 Pages/HomePage.ux 파일을 보면 Button은 다음과 같이 보입니다:

1
2
3
            <Each Items="{hikes}">
                <Button Text="{name}" Clicked="{goToHike}" />
            </Each>

Button 대신 Text 엘리먼트가 있는 Panel을 사용하겠습니다. 다음과 같습니다:

1
2
3
4
5
            <Each Items="{hikes}">
                <Panel>
                    <Text Value="{name}" />
                </Panel>
            </Each>

Button과 마찬가지로 이 사용자 정의된 Panel을 클릭할 수 있게 하려고 합니다. 패널과 같은 많은 다른 요소에도 Clicked 속성이 있습니다. 그래서 패널에도 추가할 것입니다:

1
2
3
                <Panel Clicked="{goToHike}">
                    <Text Value="{name}" />
                </Panel>

이 내용을 저장하고 프리뷰를 갱신한 후 Text 요소를 클릭하면 이 새로운 셀렉터가 대부분(mostly) 작동하는 것을 볼 수 있습니다. 이는 기본적으로 퓨즈가 Clicked와 같은 사용자 상호 작용을 위한 요소에서 히트 테스트를 수행할 때 요소의 투명도를 유지하려고 하기 때문입니다. Panel은 대부분 투명하기 때문에 대부분의 요소를 클릭할 수 없습니다. 이 문제를 해결하기 위해 패널의 HitTestMode를 간단히 재정의할 수 있습니다.

1
2
3
                <Panel HitTestMode="LocalBoundsAndChildren" Clicked="{goToHike}">
                    <Text Value="{name}" />
                </Panel>

이 방법으로 포인터가 Panel의 로컬 경계 또는 Panel 요소 (예: Text 요소) 중 하나가 눌러지면 포인터는 “hit” 로 계산되며 요소는 예상대로 클릭 가능하게 됩니다.

다음으로 해야할 일은 텍스트 색상을 변경하는 것입니다. 우리는 꽤 어두운 배경을 가지고 있기 때문에 간단하게 흰색으로 설정하겠습니다:

1
2
3
                <Panel HitTestMode="LocalBoundsAndChildren" Clicked="{goToHike}">
                    <Text Color="White" Value="{name}" />
                </Panel>

또한 Text 주위에 여백(Margin)을 추가합니다:

1
2
3
                <Panel HitTestMode="LocalBoundsAndChildren" Clicked="{goToHike}">
                    <Text Color="White" Value="{name}" Margin="20" />
                </Panel>

이제 상황이 꽤 좋아 보이기 시작했습니다! 그러나 한 셀렉터가 멈추고 다른 셀렉터가 시작되는 것을 보기가 약간 어렵 기 때문에 두 셀렉터 사이에 구분 기호를 추가합니다. 이를 위해 우선 모든 작은 요소 위에 투명도가 있는 작은 흰색 사각형을 배치합니다:

1
2
3
4
5
6
7
            <Each Items="{hikes}">
                <Rectangle Height="1" Fill="#fff4" />

                <Panel HitTestMode="LocalBoundsAndChildren" Clicked="{goToHike}">
                    <Text Color="White" Value="{name}" Margin="20" />
                </Panel>
            </Each>

이것은 꽤 잘 보이고 셀렉터의 경계선처럼 잘 작동하지만 마지막 경계선이 없습니다. 셀렉터 아래에 직사각형을 추가하겠습니다. 그러나 테두리가 다른 요소에 닿는지 여부에 따라 경계가 다른 두께를 갖는 것처럼 보일 것입니다. 대신 다음과 같이 셀렉터 아래에 Rectangle을 추가 할 수 있습니다:

1
2
3
4
5
6
7
8
9
10
11
        <StackPanel>
            <Each Items="{hikes}">
                <Rectangle Height="1" Fill="#fff4" />

                <Panel HitTestMode="LocalBoundsAndChildren" Clicked="{goToHike}">
                    <Text Color="White" Value="{name}" Margin="20" />
                </Panel>
            </Each>

            <Rectangle Height="1" Fill="#fff4" />
        </StackPanel>

멋지네요! 이 시점에서 우리 셀렉터는 디자인과 같아 보일 것입니다. 그러나 분리 기호에 대한 몇 가지 코드가 중복되었으므로 수정해야 합니다. 두 개의 동일한 직사각형을 만드는 대신, Separator라는 재사용 가능한 컴포넌트를 만들어 두 번 인스턴스화 할 수 있습니다. StackPanel에서는 다음과 같이 Separator 컴포넌트를 만듭니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
        <StackPanel>
            <Rectangle ux:Class="Separator" Height="1" Fill="#fff4" />

            <Each Items="{hikes}">
                <Rectangle Height="1" Fill="#fff4" />

                <Panel HitTestMode="LocalBoundsAndChildren" Clicked="{goToHike}">
                    <Text Color="White" Value="{name}" Margin="20" />
                </Panel>
            </Each>

            <Rectangle Height="1" Fill="#fff4" />
        </StackPanel>

그런 다음 Rectangle 인스턴스를 Separator 인스턴스로 대체할 수 있습니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
        <StackPanel>
            <Rectangle ux:Class="Separator" Height="1" Fill="#fff4" />

            <Each Items="{hikes}">
                <Separator />

                <Panel HitTestMode="LocalBoundsAndChildren" Clicked="{goToHike}">
                    <Text Color="White" Value="{name}" Margin="20" />
                </Panel>
            </Each>

            <Separator />
        </StackPanel>

완벽해요!

참고: 여러분이 종종 ux:Class를 사용하여 재사용 가능한 컴포넌트를 만들때 같은 파일에 저장하려 할지 모르겠네요. 그러나 재사용이 가능한 다른 파일에 컴포넌트를 만드는 것이 좋습니다. Separator 클래스의 경우, 필요한 곳에서 컴포넌트를 선언하고 사용하는 것이 가장 좋습니다.

셀렉터가 디자인처럼 보이게 되었으므로 기본 애니메이션을 추가하여 실제 누르는 것처럼 느껴지도록 합시다.

우리가 구현하고 싶은 애니메이션을 영어로 정확하게 설명하려면 다음과 같이 말할 것입니다. “For our item, while it’s pressed, scale the item smoothly by small amount over a short period of time. 짧은 시간에 살짝 아이템을 누렀을 때 부드럽게 확장됩니다.” 운 좋게도 퓨즈는 트리거와 애니메이터를 통해 영어 문장과 매우 ​​흡사한 애니메이션과 상호 작용을 설명하는 강력하고 간결한 방법을 제공합니다. 즉, 트리거는 퓨즈 앱에서 이벤트, 제스처 또는 기타 사용자 입력 또는 상태 변경을 감지하는 데 사용됩니다. 트리거는 애니메이터를 사용하여 이러한 입력에 응답하고 상태 변경, 애니메이션 수행 등을 수행할 수 있습니다. 트리거 및 애니메이터는 처음부터 구성과 사용이 매우 쉽게 설계되었습니다.

예를 들어 위에서 설명한 애니메이션을 UX에서 표현해 보겠습니다. 처음에는 셀렉터 항목을 “누르는 동안” 움직이기를 원했습니다. 그래서 Panel에 WhilePressed라고 하는 트리거를 추가합니다:

1
2
3
4
5
6
                <Panel HitTestMode="LocalBoundsAndChildren" Clicked="{goToHike}">
                    <Text Color="White" Value="{name}" Margin="20" />

                    <WhilePressed>
                    </WhilePressed>
                </Panel>

다음으로, 우리는 “아이템의 크기를 조정”하고 싶습니다. 이를 위해 WhilePressed 트리거 내부에 Scale 애니메이터를 추가합니다:

1
2
3
                    <WhilePressed>
                        <Scale />
                    </WhilePressed>

위의 영어 문장과 같이 읽는 방법을 보세요. 다음으로, 아이템이 눌려지는 동안 얼마나 커져야 하는지를 설명할 것입니다. Scale의 경우 스케일링 양을 설명하기 위해 1에 관련된 Factor를 지정합니다. Factor가 1이면 요소의 크기가 변경되지 않습니다. 2인 경우 요소의 크기가 두 배로 확장되고 .5는 크기가 절반으로 조정됩니다. 지금은 요소가 원래 크기보다 약간 작아지기를 원하므로 .95를 설정합니다:

1
2
3
                    <WhilePressed>
                        <Scale Factor=".95" />
                    </WhilePressed>

이제 저장하면 셀렉터를 누르는 동안 실제로 작아집니다. 그러나 이 스케일링은 즉시 발생합니다. 우리는 그것이 “짧은 시간동안” 일어나길 원했습니다. 이것을 설명하기 위해 Animator에 Duration을 추가합니다. 이 Duration은 요소가 일반 크기에서 Factor 속성으로 지정된 크기까지 초 단위로 변경되는 데 걸리는 시간을 나타냅니다. 우리가 누르는 애니메이션이 상당히 빠르기를 원하기 때문에 .08 초의 지속 시간을 설정합시다:

1
2
3
                    <WhilePressed>
                        <Scale Factor=".95" Duration=".08" />
                    </WhilePressed>

다시 테스트 해보면, 짧은 시간에 변화가 일어나고 훨씬 나아 졌음을 알 수 있습니다. 그러나 애니메이션은 충분히 부드럽지 않습니다. 이는 기본적으로 이 애니메이션이 선형이기 때문에 애니메이션이 처음부터 끝까지 일정한 속도로 변화하기 때문입니다. 이것은 매우 예측 가능하지만 우리의 경우에는 이상적이지 않습니다. 우리가 애니메이션을 만들고 있기 때문에, 우리의 애니메이션이 처음엔 선형으로 시작했지만 부드럽게 끝나기를 원합니다. 이를 위해 많은 애니메이터가 애니메이션 시작 및 중지 방법을 지정하는 easing을 지원합니다. 애니메이션을 지정할 때 Easing은 매우 일반적이며 많은 도구들(퓨즈 포함)이 지원하는 많은 표준 곡선이 있습니다(사용되는 이름 지정 규칙이 약간 다를 수 있음).

우리가 누르는 애니메이션의 경우 QuadraticOut easing을 지정할 수 있습니다. 이 easing은 애니메이션이 시작될 때 선형 easing(기본값)과 유사하지만 곡선이 애니메이션의 끝으로 가면서 부드럽게 됩니다:

1
2
3
                    <WhilePressed>
                        <Scale Factor=".95" Duration=".08" Easing="QuadraticOut" />
                    </WhilePressed>

다시 테스트 해보니 셀렉터가 우리가 원하는 것처럼 눌렀을 때 매우 자연스럽게 확장됩니다. 굉장해요!

참고: 트리거 및 애니메이터에 대한 자세한 내용은 트리거 및 애니메이션 기사비디오를 확인하십시오!

이제 아이템을 자세히 설명했으므로 완성되기 전에 이 페이지에 추가할 사항이 하나 더 있습니다. 이 아이템은 “Recent Hikes[최근 하이킹]” 제목 텍스트입니다. 이것은 매우 쉽습니다. 우리는 약간의 여백 등을 가지고 화면 상단에 도킹된 흰색 텍스트를 만들 것입니다. 먼저, 도킹 부분을 해결합시다. 우리 항목의 UX 코드를 DockPanel로 수정합니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    <DockPanel>
        <ScrollView>
            <StackPanel>
                <Rectangle ux:Class="Separator" Height="1" Fill="#fff4" />

                <Each Items="{hikes}">
                    <Separator />

                    <Panel HitTestMode="LocalBoundsAndChildren" Clicked="{goToHike}">
                        <Text Color="White" Value="{name}" Margin="20" />

                        <WhilePressed>
                            <Scale Factor=".95" Duration=".08" Easing="QuadraticOut" />
                        </WhilePressed>
                    </Panel>
                </Each>

                <Separator />
            </StackPanel>
        </ScrollView>
    </DockPanel>

그런 다음 DockPanel 상단에 도킹할 “Recent Hikes” 텍스트를 위한 Text 요소를 추가합니다:

1
2
3
4
    <DockPanel>
        <Text Color="White" FontSize="30" TextAlignment="Center" Dock="Top" Margin="0,50">Recent Hikes</Text>

        <ScrollView>

좋습니다! 아주 쉽네요. 그러나 코드를 살펴보면 이 파일에는 Color=”White”를 지정하는 두 개의 다른 Text 요소가 이미 있습니다. 우리 앱이 어두운 배경을 가지고 있기 때문에 이것은 아마도 이 한 페이지뿐만 아니라 꽤 많이 사용하기를 원할 것입니다. 자, 이것을 위해 재사용 가능한 컴포넌트를 만듭시다!

재사용 가능한 컴포넌트를 앱 전체에 사용하기를 원할 것이므로 같은 파일에 컴포넌트를 지정하고 싶지는 않을 것입니다. 대신, 우리는 그것을 다른 파일에 넣기를 원합니다. 프로젝트 디렉토리의 루트에서 Components 폴더를 만듭니다:

1
2
3
4
5
.
|- MainView.ux
|- Components
|- Modules
|- Pages

이 Components 디렉토리는 다양한 재사용 가능한 컴포넌트를 배치하기에 완벽한 장소입니다. 흰색 텍스트 컴포넌트가 앱 전체에서 사용되기를 원할 것이므로 이 컴포넌트가 하이킹 앱에 특정한 텍스트 요소임을 나타내기 위해 hikr.Text를 사용할 것입니다. 컴포넌트를 만들려면 다음 텍스트가 포함된 컴포넌트 디렉토리에 hikr.Text.ux라는 파일을 만듭니다.

1
<Text ux:Class="hikr.Text" Color="White" />

저장하면 컴포넌트를 프로젝트에서 사용할 수 있게 됩니다. HomePage로 돌아가서 Text Color=”White” 대신 hikr.Text를 사용하도록 하겠습니다. “Recent Hikes” 텍스트의 닫기 태그를 업데이트하는 것을 잊지 마십시오!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <DockPanel>
        <hikr.Text FontSize="30" TextAlignment="Center" Dock="Top" Margin="0,50">Recent Hikes</hikr.Text>

        <ScrollView>
            <StackPanel>
                <Rectangle ux:Class="Separator" Height="1" Fill="#fff4" />

                <Each Items="{hikes}">
                    <Separator />

                    <Panel HitTestMode="LocalBoundsAndChildren" Clicked="{goToHike}">
                        <hikr.Text Value="{name}" Margin="20" />

                        <WhilePressed>
                            <Scale Factor=".95" Duration=".08" Easing="QuadraticOut" />
                        </WhilePressed>
                    </Panel>
                </Each>

                <Separator />
            </StackPanel>
        </ScrollView>
    </DockPanel>

그리고 배경과는 별도로(이 챕터의 뒷부분에서 설명할 것입니다), 우리는 HomePage의 내용을 완전히 완성했으며 재사용 가능한 텍스트 컴포넌트도 가지고 있습니다. 좋습니다!

참고: 이 챕터에서 살펴볼 바와 같이 퓨즈의 기존 요소에 스타일/기능을 추가한 다음 재사용이 필요할 때 재사용 가능한 컴포넌트를 추출하는 것이 일반적입니다. 이는 일관되고 빠른 워크 플로우를 제공하며 퓨즈에서 어떤 것이든 개선할 수 있는 좋은 습관입니다. 이 챕터의 나머지 부분에서는 우리의 “손가락이” 이해할 수 있도록 이 패턴을 계속 반복할 것입니다.

EditHikePage 개선하기

EditHikePage를 살펴볼 차례입니다. 우리의 디자인은 다음과 같습니다:

홈페이지보다 이 페이지에 대한 작업이 조금 더 많지만, 이미 앱의 룩앤필을 수정해 봤기 때문에 아무 문제가 없습니다!

EditHikePage는 기본적으로 우리가 해야할 일을 Cancel/Save 버튼과 에디터의 두 부분으로 나눌 수 있습니다. 우리는 버튼부터 시작할 것입니다.

Cancel과 Save 버튼 개선하기

HomePage와 마찬가지로 Cancel 버튼과 Save 버튼은 현재 단순한 버튼입니다. 그러나 우리는 이러한 것들을 위해 자신 만의 맞춤형 디자인을 만들고 싶어하기 때문에 자체적인 컴포넌트를 만들 것입니다. Save 버튼을 사용자 정의하여 시작한 다음, 그 부분에서 재사용 가능한 컴포넌트를 추출합니다.

Save 버튼을 Pages/EditHikePage.ux의 Text 요소가 포함된 패널로 대체하여 HomePage의 하이킹 셀렉터와 동일한 방법으로 시작합니다. 이번에는 사용자 정의 hikr.Text를 사용합니다. 일반 Text 요소 대신 생성된 것:

1
2
3
4
            <Panel Clicked="{save}">
                <hikr.Text Value="Save" />
            </Panel>
            <Button Text="Cancel" Clicked="{cancel}" />

텍스트가 버튼의 중앙에 있기를 원하기 때문에 hikr.Text 요소에 정렬을 추가합니다. 또한 기본 글꼴 크기를 지정합니다:

1
2
3
            <Panel Clicked="{save}">
                <hikr.Text Value="Save" FontSize="16" TextAlignment="Center" />
            </Panel>

다음으로, 사용자 정의 버튼의 배경을 디자인과 일치하도록 변경하려고 합니다. 우리는 컴포넌트에 Rectangle을 추가하고, Layer=”Background”를 지정하여 컴포넌트의 배경으로 설정합니다. 사각형의 색상은 디자인의 버튼과 동일하게 적용됩니다:

1
2
3
4
5
            <Panel Clicked="{save}">
                <Rectangle Layer="Background" Color="#125F63" />

                <hikr.Text Value="Save" FontSize="16" TextAlignment="Center" />
            </Panel>

이것은 꽤 좋아 보이지만, 우리 디자인의 버튼은 모서리가 둥급니다. 그래서 이 Rectangle에 작은 CornerRadius를 추가해 보겠습니다:

1
2
3
4
5
            <Panel Clicked="{save}">
                <Rectangle Layer="Background" Color="#125F63" CornerRadius="4" />

                <hikr.Text Value="Save" FontSize="16" TextAlignment="Center" />
            </Panel>

사용자 정의 버튼의 배경에서 마지막으로 할 일은 버튼에 약간의 DropShadow를 추가하는 것입니다. 우리는 그림자를 조금만 지게 하고 앱의 테마에 맞게 투명도를 사용하여 검정색으로 만들고 Angle, Distance, Spread 및 Size 값을 지정합니다:

1
2
3
4
5
6
7
            <Panel Clicked="{save}">
                <Rectangle Layer="Background" Color="#125F63" CornerRadius="4">
                    <DropShadow Angle="90" Distance="1" Spread="0.2" Size="2" Color="#00000060" />
                </Rectangle>

                <hikr.Text Value="Save" FontSize="16" TextAlignment="Center" />
            </Panel>

아주 좋아요! 이제 버튼의 배경과 텍스트를 설정했으므로 가장 바깥쪽 패널 주위에 여백을 추가하고 안쪽 여백을 추가합니다. 답답하지 않도록 숨 쉴 여지를 주는 것입니다:

1
2
3
4
5
6
7
            <Panel Clicked="{save}" Margin="10" Padding="10">
                <Rectangle Layer="Background" Color="#125F63" CornerRadius="4">
                    <DropShadow Angle="90" Distance="1" Spread="0.2" Size="2" Color="#00000060" />
                </Rectangle>

                <hikr.Text Value="Save" FontSize="16" TextAlignment="Center" />
            </Panel>

이 맞춤 검색 버튼의 모양을 다루고 있습니다. 그러나 그 느낌은 어떨까요? 이 버튼은 우리 셀렉터가 홈 페이지에서 했던 것처럼 누르는 애니메이션을 가져야 합니다. 음, 왜 같은 것을 사용하지 않았을까요? 코드를 복사하여 사용자 정의 버튼에 붙여 넣겠습니다:

1
2
3
4
5
6
7
8
9
10
11
            <Panel Clicked="{save}" Margin="10" Padding="10">
                <Rectangle Layer="Background" Color="#125F63" CornerRadius="4">
                    <DropShadow Angle="90" Distance="1" Spread="0.2" Size="2" Color="#00000060" />
                </Rectangle>

                <hikr.Text Value="Save" FontSize="16" TextAlignment="Center" />

                <WhilePressed>
                    <Scale Factor=".95" Duration=".08" Easing="QuadraticOut" />
                </WhilePressed>
            </Panel>

모든 것을 저장하고 테스트하면, 꽤 좋은 느낌일 것입니다. 굉장해요!

Save 버튼이 잘 설정되었으므로 재사용 가능한 hikr.Button 컴포넌트를 추출하고 이 스타일을 Cancel 버튼에도 적용해 봅시다.

여기에 ux:Class=”hikr.Button” 속성을 추가하고 Save 버튼에 hikr.Button의 새 인스턴스를 추가하고 Panel에서 Clicked 핸들러를 다음과 같이 옮깁니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
            <Panel ux:Class="hikr.Button" Margin="10" Padding="10">
                <Rectangle Layer="Background" Color="#125F63" CornerRadius="4">
                    <DropShadow Angle="90" Distance="1" Spread="0.2" Size="2" Color="#00000060" />
                </Rectangle>

                <hikr.Text Value="Save" FontSize="16" TextAlignment="Center" />

                <WhilePressed>
                    <Scale Factor=".95" Duration=".08" Easing="QuadraticOut" />
                </WhilePressed>
            </Panel>

            <hikr.Button Clicked="{save}" />
            <Button Text="Cancel" Clicked="{cancel}" />

다음으로 해야할 일은 하드 코딩된 “Save” 텍스트를 컴포넌트에서 인스턴스로 옮기는 것입니다. 그러나 우리 hikr.Button에 단순히 Text=”Save” 를 썼으므로 hikr.Button 클래스에는 그러한 속성이 없기 때문에 컴파일에 실패합니다. 퓨즈는 UX만 사용하는 구성 요소에 대해 자체적인 속성을 정의할 수 있는 ux:Property라는 메커니즘을 제공하므로 쉽게 해결할 수 있습니다.

hikr.Button 컴포넌트의 Text 속성을 만들려면 우리 속성에 대한 이름을 정의하는 ux:Property 속성을 사용하여 문자열 인스턴스(텍스트에 문자열을 포함하므로)를 클래스에 추가하면 됩니다:

1
2
3
4
5
6
7
8
            <Panel ux:Class="hikr.Button" Margin="10" Padding="10">
                <string ux:Property="Text" />

                <Rectangle Layer="Background" Color="#125F63" CornerRadius="4">
                    <DropShadow Angle="90" Distance="1" Spread="0.2" Size="2" Color="#00000060" />
                </Rectangle>

                <hikr.Text Value="Save" FontSize="16" TextAlignment="Center" />

이걸로 우리만의 속성을 만들었습니다. 그러나 클래스의 hikr.Text 인스턴스에 여전히 하드 코딩된 문자열 “Save” 가 표시됩니다. 방금 생성한 Text 속성의 값을 대신 표시하고 속성 바인딩을 통해이 작업을 수행할 수 있습니다. 속성 바인딩은 이전에 UX에서 값을 JavaScript의 값에 바인딩하는 데 사용한 적이 있는 데이터 바인딩과 비슷하며 구문도 거의 같습니다. 버튼의 텍스트를 Text 속성에 바인딩하려면 hikr.Text 인스턴스의 Value를 다음과 같이 변경합니다:

1
                <hikr.Text Value="{ReadProperty Text}" FontSize="16" TextAlignment="Center" />

여기서 우리는 ux:Property에 대한 바인딩이 JS 데이터 바인딩과 거의 동일하게 보이는 반면 앞에 ReadProperty를 추가한걸 볼 수 있습니다. 이것은 퓨즈에게 다른 바인딩 유형임을 알려주는 것입니다.

새로운 Text 속성을 만들고 컴포넌트 내부에 바인딩하면 이제 Save 버튼에 맞게 Text 속성을 설정할 수 있습니다:

1
2
            <hikr.Button Text="Save" Clicked="{save}" />
            <Button Text="Cancel" Clicked="{cancel}" />

이제 저장하면 버튼이 이전과 같게 보이겠지만 지금은 Text를 컴포넌트 외부에 원하는대로 설정할 수 있습니다. 이것은 우리 컴포넌트를 진정으로 재사용 할 수 있게 된 것입니다!

참고: ux:Property 및 퓨즈가 컴포넌트를 만드는 데 제공하는 기타 유용한 도구에 대한 자세한 내용은 컴포넌트 만들기 문서를 확인하십시오.

새로운 컴포넌트를 hikr.Button.ux로 만들어서 Components 디렉토리로 옮기겠습니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
<Panel ux:Class="hikr.Button" Margin="10" Padding="10">
    <string ux:Property="Text" />

    <Rectangle Layer="Background" Color="#125F63" CornerRadius="4">
        <DropShadow Angle="90" Distance="1" Spread="0.2" Size="2" Color="#00000060" />
    </Rectangle>

    <hikr.Text Value="{ReadProperty Text}" FontSize="16" TextAlignment="Center" />

    <WhilePressed>
        <Scale Factor=".95" Duration=".08" Easing="QuadraticOut" />
    </WhilePressed>
</Panel>

마지막으로 Cancel 버튼의 스타일도 지정합니다. 이 경우, Button을 hikr.Button으로 대체하면 됩니다:

1
2
3
4
5
6
            <Text>Comments:</Text>
            <TextView Value="{comments}" TextWrapping="Wrap" />

            <hikr.Button Text="Save" Clicked="{save}" />
            <hikr.Button Text="Cancel" Clicked="{cancel}" />
        </StackPanel>

그리고 이제 우리는 재사용 가능한 hikr.Button 컴포넌트와 두 개의 멋진 버튼을 갖게 되었습니다! 이제는 디자인에 따라 화면의 올바른 영역에 배치해야 합니다. 특히 두 개의 버튼을 화면 맨 아래에 나란히 배치해야 합니다.

버튼을 나란히 배치하려면 해당 버튼을 Grid에 배치해야 합니다. Grid는 지정된 수의 행과 열을 기반으로 사용 가능한 공간을 나누고 그 결과로 생성된 셀에 자식을 배치하는 패널입니다. 기본적으로 이러한 행과 열의 크기는 동일합니다. 따라서 단일 행과 두 개의 열이 있는 Grid를 지정하면 두 개의 버튼에 대한 완벽한 컨테이너를 갖게 됩니다:

1
2
3
4
5
6
7
8
            <Text>Comments:</Text>
            <TextView Value="{comments}" TextWrapping="Wrap" />

            <Grid ColumnCount="2">
                <hikr.Button Text="Save" Clicked="{save}" />
                <hikr.Button Text="Cancel" Clicked="{cancel}" />
            </Grid>
        </StackPanel>

여기서 ColumnCount를 2로 지정합니다. 그리드에 두 개의 열이 필요하기 때문입니다. 하나만 필요하다면 행 수를 지정할 필요가 없습니다. 이렇게 하면 버튼이 나란히 배치되지만 버튼의 순서를 디자인과 일치시켜 보겠습니다:

1
2
3
4
            <Grid ColumnCount="2">
                <hikr.Button Text="Cancel" Clicked="{cancel}" />
                <hikr.Button Text="Save" Clicked="{save}" />
            </Grid>

완벽합니다! 그리드가 지정된 순서대로 자식 요소를 배치하는 것을 볼 수 있습니다. 그리드의 왼쪽 위 셀부터 시작합니다. 우리 자식 요소가 차지하는 셀을 변경하려면 다른 순서로 지정해야 합니다. 멋지고 쉽습니다!

마지막으로 이 그리드를 페이지 맨 아래에 놓습니다. 이를 위해 우리는 Page의 현재 내용을 모두 DockPanel에 배치하고 Dock=”Bottom”을 사용하여 DockPanel의 아래쪽에 Grid를 고정시킵니다. 전체적으로, 우리의 EditHikePage.ux 파일은 다음과 같습니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<Page ux:Class="EditHikePage">
    <Router ux:Dependency="router" />

    <JavaScript File="EditHikePage.js" />

    <DockPanel>
        <Grid ColumnCount="2" Dock="Bottom">
            <hikr.Button Text="Cancel" Clicked="{cancel}" />
            <hikr.Button Text="Save" Clicked="{save}" />
        </Grid>

        <ScrollView>
            <StackPanel>
                <Text Value="{name}" />

                <Text>Name:</Text>
                <TextBox Value="{name}" />

                <Text>Location:</Text>
                <TextBox Value="{location}" />

                <Text>Distance (km):</Text>
                <TextBox Value="{distance}" InputHint="Decimal" />

                <Text>Rating:</Text>
                <TextBox Value="{rating}" InputHint="Integer" />

                <Text>Comments:</Text>
                <TextView Value="{comments}" TextWrapping="Wrap" />
            </StackPanel>
        </ScrollView>
    </DockPanel>
</Page>

이를 통해 Cancel 및 Save 버튼의 룩앤필 및 배치를 모두 사용자 정의했습니다!

에디터 개선하기

이제 EditHikePage에서 다양한 값 에디터의 룩앤필을 살펴보고 조정해 봅시다. 우리의 기억을 살리기 위해 이 페이지의 디자인을 다시 한번 살펴 보는게 좋겠습니다:

우선, 현재 구현한 것에는 하이킹 이름을 표시하는 여분의 Text 요소가 있습니다. 제거하겠습니다:

1
2
3
            <StackPanel>
                <Text>Name:</Text>
                <TextBox Value="{name}" />

다음으로 모든 에디터의 제목 텍스트를 조정해 봅시다. 먼저 name 필드의 Text 요소를 hikr.Text 요소로 바꿉니다:

1
2
                <hikr.Text>Name:</hikr.Text>
                <TextBox Value="{name}" />

이것은 꽤 좋아 보이지만, 이 hikr.Text 요소의 불투명도를 약간 조정하겠습니다. 이제 완전한 흰색은 아닙니다:

1
2
                <hikr.Text Opacity=".6">Name:</hikr.Text>
                <TextBox Value="{name}" />

그런 다음 제목 텍스트와 에디터 필드 사이에 여백(margin)을 추가합니다:

1
2
                <hikr.Text Opacity=".6" Margin="0, 0, 0, 5">Name:</hikr.Text>
                <TextBox Value="{name}" />

이제 훨씬 좋아 보이므로 이 스타일을 TitleText라고 부르는 사용자 정의 컴포넌트로 만들고 name 제목 필드를 업데이트하여 사용할 것입니다:

1
2
3
4
                <hikr.Text ux:Class="TitleText" Opacity=".6" Margin="0,0,0,5" />

                <TitleText>Name:</TitleText>
                <TextBox Value="{name}" />

벌써 더 깨끗해 보이네요! ux:Class를 사용하여 서브 클래스를 다시 서브 클래스화 할 수 있는 방법에 주목하십시오. 이제 다른 에디터의 제목도 업데이트 해보겠습니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
            <StackPanel>
                <hikr.Text ux:Class="TitleText" Opacity=".6" Margin="0,0,0,5" />

                <TitleText>Name:</TitleText>
                <TextBox Value="{name}" />

                <TitleText>Location:</TitleText>
                <TextBox Value="{location}" />

                <TitleText>Distance (km):</TitleText>
                <TextBox Value="{distance}" InputHint="Decimal" />

                <TitleText>Rating:</TitleText>
                <TextBox Value="{rating}" InputHint="Integer" />

                <TitleText>Comments:</TitleText>
                <TextView Value="{comments}" TextWrapping="Wrap" />
            </StackPanel>

멋지고 쉬운 방법입니다! 다음으로 다양한 에디터/제목 주위의 간격을 조정할 것입니다. 우리가 할 수 있는 첫 번째 일은 StackPanel 테두리에 약간의 간격을 두기 위해 에디터가 포함된 StackPanel에 약간의 여백을 적용하는 것입니다:

1
2
            <StackPanel Padding="10">
                <hikr.Text ux:Class="TitleText" Opacity=".6" Margin="0,0,0,5" />

이것은 에디터와 페이지의 경계선 사이의 간격에는 도움이 되지만 다양한 다른 요소 사이에는 추가 적용이 필요합니다. StackPanel에 ItemSpacing을 추가해 봅시다. 이름에서 알 수 있듯이 StackPanel의 여러 항목 사이에 간격을 추가해 줍니다:

1
            <StackPanel ItemSpacing="10" Padding="10">

좀 더; 이제 요소들 사이에 간격이 생겼지만 제목과 에디터 사이의 간격보다 더 많은 간격이 있습니다. 이를 해결하기 위해 각 타이틀/에디터 쌍을 자체 StackPanel로 포장합니다. 이렇게하면 주변 StackPanel의 ItemSpacing이 제목/에디터 쌍 사이에만 적용되며 제목과 에디터는 적절하게 간격을 유지합니다. 그러면 다음과 같이 보일 것입니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
            <StackPanel ItemSpacing="10" Padding="10">
                <hikr.Text ux:Class="TitleText" Opacity=".6" Margin="0,0,0,5" />

                <StackPanel>
                    <TitleText>Name:</TitleText>
                    <TextBox Value="{name}" />
                </StackPanel>

                <StackPanel>
                    <TitleText>Location:</TitleText>
                    <TextBox Value="{location}" />
                </StackPanel>

                <StackPanel>
                    <TitleText>Distance (km):</TitleText>
                    <TextBox Value="{distance}" InputHint="Decimal" />
                </StackPanel>

                <StackPanel>
                    <TitleText>Rating:</TitleText>
                    <TextBox Value="{rating}" InputHint="Integer" />
                </StackPanel>

                <StackPanel>
                    <TitleText>Comments:</TitleText>
                    <TextView Value="{comments}" TextWrapping="Wrap" />
                </StackPanel>
            </StackPanel>

모든 에디터가 적절한 간격을 두고 간단한 속성과 패널을 구성하여 이를 수정할 수 있었습니다. 좋아요!

이제 에디터를 살펴봅시다. 이전과 마찬가지로, 처음에 반복적으로 수정한 다음 재사용 가능한 컴포넌트를 만든 다음 모든 컴포넌트에 적용합니다. 이 경우 유일한 예외는 다른 에디터와 마찬가지로 TextBox가 아닌 TextView인 주석 에디터입니다. 자체적인 스타일링이 필요하므로 먼저 다른 에디터의 TextBox를 처리한 다음 다시 돌아와야 합니다.

이제 이름 에디터의 TextBox를 살펴보겠습니다. 먼저 hikr.Text 컴포넌트와 마찬가지로 TextColor를 White로 설정합니다. 또한 CaretColor를 White로 설정하여 깜박이는 캐럿 인디케이터의 색상을 조절할 수 있습니다. 이제 Padding을 추가해 보겠습니다:

1
2
3
4
                <StackPanel>
                    <TitleText>Name:</TitleText>
                    <TextBox TextColor="White" CaretColor="White" Padding="10,10,0,10" Value="{name}" />
                </StackPanel>

좋아 보이네요! 이제 hikr.TextBox 인스턴스를 다른 모든 TextBox 기반 에디터에 적용해 봅시다 (해당되는 경우 바인딩 및 InputHints는 그대로 둡니다):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
            <StackPanel ItemSpacing="10" Padding="10">
                <hikr.Text ux:Class="TitleText" Opacity=".6" Margin="0,0,0,5" />

                <TextBox ux:Class="hikr.TextBox" TextColor="White" CaretColor="White" Padding="10,10,0,10" />

                <StackPanel>
                    <TitleText>Name:</TitleText>
                    <hikr.TextBox Value="{name}" />
                </StackPanel>

                <StackPanel>
                    <TitleText>Location:</TitleText>
                    <hikr.TextBox Value="{location}" />
                </StackPanel>

                <StackPanel>
                    <TitleText>Distance (km):</TitleText>
                    <hikr.TextBox Value="{distance}" InputHint="Decimal" />
                </StackPanel>

                <StackPanel>
                    <TitleText>Rating:</TitleText>
                    <hikr.TextBox Value="{rating}" InputHint="Integer" />
                </StackPanel>

마지막으로 이 컴포넌트를 Components 디렉토리로 옮길 수 있습니다. 나중에 이 컴포넌트를 앱의 다른 화면에 사용할 수 있습니다. 그래서 우리는 ux:Class를 Components 디렉토리의 새로운 hikr.TextBox.ux 파일로 옮길 것입니다:

1
<TextBox ux:Class="hikr.TextBox" TextColor="White" CaretColor="White" Padding="10,10,0,10" />

이제 이 페이지의 내용을 마무리하기 전에 주석 에디터를 시작하겠습니다. 이것은 여러 줄을 표시할 수 있는 TextView이므로 이전에 TextBox에 대한 스타일링과는 다른 스타일을 적용하고 싶습니다. 그러나 기본적으로 TextColor, CaretColor 및 Padding을 편집기에 적용하여 동일한 프로세스로 시작합니다:

1
2
3
4
                <StackPanel>
                    <TitleText>Comments:</TitleText>
                    <TextView TextColor="White" CaretColor="White" Padding="5" Value="{comments}" TextWrapping="Wrap" />
                </StackPanel>

다음으로 우리는 TextView의 배경에 약간의 불투명도를 가진 둥근 사각형을 추가하여 디자인과 일치시키길 원합니다. hikr.Button 컴포넌트에서 했던 것처럼 Layer = “Background”로 Rectangle 인스턴스를 추가하고 Color 및 CornerRadius를 설정합니다:

1
2
3
4
5
6
                <StackPanel>
                    <TitleText>Comments:</TitleText>
                    <TextView TextColor="White" CaretColor="White" Padding="5" Value="{comments}" TextWrapping="Wrap">
                        <Rectangle Layer="Background" Color="#fff2" CornerRadius="4" />
                    </TextView>
                </StackPanel>

좋습니다! 이 시점에서 우리는 이 스타일의 TextView를 다른 하나와 마찬가지로 자체 컴포넌트로 분할할 필요가 없습니다. 이 컴포넌트는 이 인스턴스에만 사용되므로 다른 요소와 마찬가지로 구성해야 합니다. 그러나, 좋은 측정을 위해 그렇게 하십시오. 이전과 마찬가지로 hikr.TextView.ux라는 Components 디렉토리에 파일을 만들고 거기에 스타일이 지정된 TextView 코드를 추가하여 ux:Class 정의를 추가합니다. 그런 다음 EditHikePage를 업데이트하여 이 hikr.TextView를 주석 에디터에 사용합니다. TextWrapping=”Wrap” 및 값 바인딩을 컴포넌트에 배치하는 대신 인스턴스에 남겨 두십시오. 컴포넌트를 사용할 때 설정해야 할 가능성이 매우 높은 속성입니다.

hikr.TextView.ux:

1
2
3
<TextView ux:Class=”hikr.TextView” TextColor="White" CaretColor="White" Padding="5">
    <Rectangle Layer="Background" Color="#fff2" CornerRadius="4" />
</TextView>

EditHikePage.ux:

1
2
3
4
                <StackPanel>
                    <TitleText>Comments:</TitleText>
                    <hikr.TextView Value="{comments}" TextWrapping="Wrap" />
                </StackPanel>

이것으로 우리의 EditHikePage에 있는 내용을 마칩니다!

페이지에 배경 이미지 추가하기

모든 페이지의 수정이 끝났다면 이 페이지들의 디자인을 마무리하는 데 집중합시다. 우리가 단색 배경을 적용했었지만, 이제 우리의 디자인과 일치하는 배경 이미지를 페이지에 추가할 차례입니다. 이 이미지는 앱에서 사용할 정적 애셋이므로 먼저 프로젝트의 루트 디렉토리에 Assets 폴더를 만듭니다:

1
2
3
4
5
6
.
|- MainView.ux
|- Assets
|- Components
|- Modules
|- Pages

다음으로 필요한 배경 이미지를 다운로드 하십시오. 이것이 우리가 사용할 배경 이미지입니다:

위 이미지를 background.jpg로 Assets 디렉토리에 저장하십시오.

이제 프로젝트 폴더에 이미지가 생겼으므로 앱에서 이미지를 사용할 수 있습니다. 우리의 디자인에 따라 이 이미지를 HomePage와 EditHikePage의 배경으로 사용하고자 합니다. 앱 전체 배경으로 적용할 수도 있지만, 각 페이지마다 적용하여 페이지에서 발생하는 전환이 배경 이미지에도 적용되는 디자인 방식을 사용하려 합니다. 자, HomePage부터 시작해 보겠습니다.

HomePage.ux에서 이 이미지를 페이지의 배경으로 적용하기 전에 Layer=”Background” 세트가 있는 이미지 요소를 추가하여 둥근 사각형을 이전에 컴포넌트에 추가한 방법과 유사하게 적용할 것입니다:

1
2
3
4
<Page ux:Class="HomePage">
    <Image Layer="Background" File="../Assets/background.jpg" />

    <Router ux:Dependency="router" />

File 속성의 값이 HomePage.ux 파일과 어떻게 관련이 있는지 확인하십시오. 이 세트를 사용하면 배경에 이미지가 생기지만 이미지 내용은 예상대로 페이지의 전체 공간을 채우지 못합니다. 이는 기본적으로 이미지 요소가 콘텐츠의 종횡비를 변경하지 않고 사용 가능한 공간에 맞게 내용을 축소하거나 늘리거나 이미지 파일의 페이지가 페이지와 약간 다르기 때문에 약간 줄어들 수 있기 때문입니다. 이 문제를 해결하기 위해 Image 요소에 대해 StretchMode=”UniformToFill” 을 지정할 수 있습니다. 이렇게하면 컨텐츠를 전체 공간에 채우고 가로 세로 비율을 유지합니다:

1
    <Image Layer="Background" File="../Assets/background.jpg" StretchMode="Fill" />

참고: Image 요소가 이미지를 표시할 수 있는 다양한 방법에 대한 자세한 내용은 이미지 기본 사항 비디오를 확인하십시오!

마지막으로 이 이미지 요소를 약간 투명하게 만들어 이미지에 어두운 청록색 배경색으로 “tint[색조]”를 적용해 봅시다:

1
    <Image Layer="Background" File="../Assets/background.jpg" StretchMode="Fill" Opacity=".7" />

좋습니다! 이제 백그라운드 이미지가 우리 홈페이지에 올바르게 적용되었으므로 EditHikePage에도 적용해 보겠습니다. 아마 어떻게 할 것인지 추측할 수 있을 것입니다. 우리는 먼저 이 배경 이미지가 적용된 재사용 가능한 hikr.Page 컴포넌트를 만든 다음 HomePage 및 EditHikePage 컴포넌트를 Page 클래스가 아닌 해당 클래스에서 직접 파생시키겠습니다.

따라서 이전과 마찬가지로 hikr.Page.ux라는 Components 디렉토리에 다음을 포함하는 새 파일을 만듭니다:

1
2
3
<Page ux:Class="hikr.Page">
    <Image Layer="Background" File="../Assets/background.jpg" StretchMode="Fill" Opacity=".7" />
</Page>

그런 다음 Pages/HomePage.ux 및 Pages/EditHikePage.ux에서 코드를 업데이트 합니다. 여는 태그와 닫는 태그를 모두 업데이트하는 것을 잊지 마십시오. 이 것들은 놓치기 쉽습니다:

HomePage.ux

1
2
3
4
5
<hikr.Page ux:Class="HomePage">
    <Router ux:Dependency="router" />

    ...
</hikr.Page>

EditHikePage.ux

1
2
3
4
5
<hikr.Page ux:Class="EditHikePage">
    <Router ux:Dependency="router" />

    ...
</hikr.Page>

멋집니다. 드디어 페이지가 완전히 완성되어 아주 멋지게 보입니다!

상태바(status bars) 개선하기

이제 앱의 전체 룩앤필 개선이 거의 끝났습니다! 좀 더 살펴볼 필요가 있는 것은 앱의 상태 표시줄 뿐입니다. 디바이스에서 앱을 실행하면 괜찮아 보일 것입니다. 그러나 상태 표시줄이 테마에 맞지 않습니다. 특히 어두운 배경 때문에 iOS의 상태 표시줄 텍스트와 아이콘이 너무 어두워 읽을 수 없으며 Android에서 상태 표시줄의 배경색이 안 어울리는 색상으로 표시됩니다.

이러한 문제를 해결하기 위해 퓨즈는 iOS 및 Android의 상태 표시줄을 각각 사용자 정의하는 데 사용할 수 있는 iOS.StatusBarConfig 및 Android.StatusBarConfig 클래스를 제공합니다. 이를 사용하려면 MainView.ux의 App 태그 상단에 각각의 인스턴스를 추가하고 각 플랫폼에 적절한 속성을 설정해야 합니다. iOS부터 시작하여 Style=”Light” 로 지정하여 퓨즈에 어두운 텍스트가 아닌 밝은 텍스트와 아이콘이 있는 상태 표시줄을 설정합니다:

1
2
3
4
<App Background="#022328">
    <iOS.StatusBarConfig Style="Light" />

    <Router ux:Name="router" />

다음으로 Android 상태 표시줄을 살펴보겠습니다. 이 경우 앱의 배경색과 일치하는 배경색을 지정합니다:

1
2
3
<App Background="#022328">
    <iOS.StatusBarConfig Style="Light" />
    <Android.StatusBarConfig Color="#022328" />

이제 우리 앱도 디바이스와 아주 잘 어울립니다!

참고: 각 플랫폼에 대한 StatusBarConfig 클래스의 각 인스턴스는 최대 하나만 갖는 것이 중요합니다. 그렇지 않으면 올바르게 작동하지 않을 수 있습니다. 상태 표시줄 및 이와 유사한 구성에 대한 자세한 내용은 상태 표시줄 기본 사항 비디오를 확인하십시오.

우리의 진행 상황

휴우, 처리해야 할 것이 많았네요! 그러나 이제 우리는 앱의 훌륭한 룩앤필을 얻었고 퓨즈에서 재사용 가능한 컴포넌트를 만드는 연습을 많이 했습니다. 굉장해요!

현재 우리의 앱은 다음과 같습니다:

코드에 관해서는 이번에는 꽤 많은 파일을 다루었기 때문에 여기에 나열하는 대신 Github의 다양한 파일에 간단하게 링크 할 것입니다:

다음으로 진행할 일

이제 앱의 주요 부분이 기능적으로 훌륭해졌으므로 모든 것을 하나로 묶을 차례입니다. 다음 챕터에서는 비디오 배경을 가진 아름다운 스플래시 스크린을 구축하여 앱을 완성할 것입니다. 우리는 이미 앱의 아키텍처와 재사용 가능한 컴포넌트를 가지고 있기 때문에 아무런 문제가 없어야 합니다. 그럼 파헤치러 갑시다!

이 챕터의 최종 코드는 여기에서 볼 수 있습니다.

Was this article helpful to you? Yes No 1

How can we help?