요약 2 장입니다.Summary of Chapter 2. 앱 분석Anatomy of an app

샘플 다운로드 샘플 다운로드Download Sample Download the sample

참고

이 페이지에 대 한 참고 사항 Xamarin.Forms 책의 내용을에서 달라졌는지를 위치 하는 영역을 나타냅니다.Notes on this page indicate areas where Xamarin.Forms has diverged from the material presented in the book.

Xamarin.Forms 응용 프로그램에서 화면에서 공간을 차지 하는 개체 라고 시각적 요소하 여 캡슐화 된, 합니다 VisualElement 클래스입니다.In a Xamarin.Forms application, objects that occupy space on the screen are known as visual elements, encapsulated by the VisualElement class. 시각적 요소는 이러한 클래스에 해당 하는 세 가지 범주로 분할 될 수 있습니다.Visual Elements can be split into three categories corresponding to these classes:

Page 파생 클래스는 전체 화면 또는 거의 전체 화면을 차지 합니다.A Page derivative occupies the entire screen, or nearly the entire screen. 대개는 페이지의 자식은 Layout 자식 시각적 요소를 구성 하는 파생 합니다.Often, the child of a page is a Layout derivative to organize child visual elements. 자식의 합니다 Layout 다른 될 수 있습니다 Layout 클래스 또는 View 파생형 (라고도 요소), 텍스트, 비트맵, 슬라이더, 단추, 목록 상자 등과 같은 친숙 한 개체입니다.The children of the Layout can be other Layout classes or View derivatives (often called elements), which are familiar objects such as text, bitmaps, sliders, buttons, list boxes, and so on.

이 장의에 집중 하 여 응용 프로그램을 만드는 방법을 보여 줍니다 합니다 Label View 텍스트를 표시 하는 파생 합니다.This chapter demonstrates how to create an application by focusing on the Label, which is the View derivative that displays text.

살펴보기Say hello

설치 하는 Xamarin 플랫폼을 사용 하 여 만들 수 있습니다 새 Xamarin.Forms 솔루션을 Visual Studio 또는 Visual Studio for macWith the Xamarin platform installed, you can create a new Xamarin.Forms solution in Visual Studio or Visual Studio for Mac. 합니다 Hello 솔루션은 공용 코드에 대 한 이식 가능한 클래스 라이브러리를 사용 합니다.The Hello solution uses a Portable Class Library for the common code.

참고

Portable Class Library는 .NET Standard 라이브러리로 변경되었습니다.Portable Class Libraries have been replaced by .NET Standard libraries. 이 책에서 모든 샘플 코드는 .NET 표준 라이브러리를 사용하도록 변경되었습니다.All the sample code from the book has been converted to use .NET standard libraries.

이 샘플에는 수정 하지 않고도 Visual Studio에서 만들어진 Xamarin.Forms 솔루션을 보여 줍니다.This sample demonstrates a Xamarin.Forms solution created in Visual Studio with no modifications. 솔루션은 6 개 프로젝트:The solution consists of six projects:

  • Hello, 다른 프로젝트에서 공유 하는 이식 가능한 클래스 라이브러리 (PCL)Hello, a Portable Class Library (PCL) shared by the other projects
  • Hello.Droid, Android 용 응용 프로그램 프로젝트Hello.Droid, an application project for Android
  • Hello.iOS, iOS 용 응용 프로그램 프로젝트Hello.iOS, an application project for iOS
  • Hello.UWP, 유니버설 Windows 플랫폼 (Windows 10 및 Windows 10 Mobile)에 대 한 응용 프로그램 프로젝트Hello.UWP, an application project for the Universal Windows Platform (Windows 10 and Windows 10 Mobile)
  • Hello.Windows, Windows 8.1 대 한 응용 프로그램 프로젝트Hello.Windows, an application project for Windows 8.1
  • Hello.WinPhone, Windows Phone 8.1에 대 한 응용 프로그램 프로젝트Hello.WinPhone, an application project for Windows Phone 8.1

참고

Xamarin.Forms는 더 이상 Windows 8.1, Windows Phone 8.1 또는 Windows 10 Mobile을 지원하지 않지만 Windows 10 데스크톱에서 실행은 지원합니다.Xamarin.Forms no longer supports Windows 8.1, Windows Phone 8.1, or Windows 10 Mobile, but Xamarin.Forms applications do run on the Windows 10 desktop.

수의 응용 프로그램 프로젝트 시작 프로젝트 및 다음 빌드를 장치 또는 시뮬레이터에서 프로그램을 실행 합니다.You can make any of these application projects the startup project, and then build and run the program on a device or simulator.

Xamarin.Forms 프로그램의 대부분에서는 응용 프로그램 프로젝트를 수정 하지 않습니다.In many of your Xamarin.Forms programs, you won't be modifying the application projects. 이러한 프로그램을 시작 하려면 방금 작은 스텁 종종 남아 있습니다.These often remain tiny stubs just to start up the program. 대부분의 집중 라이브러리는 모든 응용 프로그램에 공통적으로 적용 됩니다.Most of your focus will be the library common to all the applications.

파일 내에서Inside the files

표시 하 여 시각적 개체를 Hello 프로그램의 생성자에 정의 된 합니다 App 클래스입니다.The visuals displayed by the Hello program are defined in the constructor of the App class. App Xamarin.Forms 클래스에서 파생 Application 합니다.App derives from the Xamarin.Forms class Application.

참고

Xamarin.Forms에 대 한 Visual Studio 솔루션 템플릿 XAML 파일을 사용 하 여 페이지를 만듭니다.The Visual Studio solution templates for Xamarin.Forms create a page with a XAML file. XAML 될 때까지이 가이드에서 다루지 7 장합니다.XAML is not covered in this book until Chapter 7.

합니다 참조 섹션을 Hello PCL 프로젝트에 다음 Xamarin.Forms 어셈블리에 포함:The References section of the Hello PCL project includes the following Xamarin.Forms assemblies:

  • Xamarin.Forms.CoreXamarin.Forms.Core
  • Xamarin.Forms.XamlXamarin.Forms.Xaml
  • Xamarin.Forms.PlatformXamarin.Forms.Platform

합니다 참조 섹션 5 응용 프로그램 프로젝트의 개별 플랫폼에 적용 되는 추가 어셈블리를 포함 합니다.The References sections of the five application projects include additional assemblies that apply to the individual platforms:

  • Xamarin.Forms.Platform.AndroidXamarin.Forms.Platform.Android
  • Xamarin.Forms.Platform.iOSXamarin.Forms.Platform.iOS
  • Xamarin.Forms.Platform.UWPXamarin.Forms.Platform.UWP
  • Xamarin.Forms.Platform.WinRTXamarin.Forms.Platform.WinRT
  • Xamarin.Forms.Platform.WinRT.TabletXamarin.Forms.Platform.WinRT.Tablet
  • Xamarin.Forms.Platform.WinRT.PhoneXamarin.Forms.Platform.WinRT.Phone

참고

합니다 참조가 섹션에서는 이러한 프로젝트의 어셈블리를 더 이상 나열 합니다.The References sections of these projects no longer list the assemblies. 대신 프로젝트 파일에는 PackageReference Xamarin.Forms NuGet 패키지를 참조 하는 태그입니다.Instead, the project file contains a PackageReference tags referencing the Xamarin.Forms NuGet package. 합니다 참조 Visual Studio 목록의 섹션의 Xamarin.Forms Xamarin.Forms 어셈블리 대신 패키지 합니다.The References section in Visual Studio lists the Xamarin.Forms package rather than the Xamarin.Forms assemblies.

정적 호출이 포함 되어 응용 프로그램 프로젝트의 각 Forms.Init 의 메서드는 Xamarin.Forms 네임 스페이스입니다.Each of the application projects contains a call to the static Forms.Init method in the Xamarin.Forms namespace. 이 Xamarin.Forms 라이브러리를 초기화합니다.This initializes the Xamarin.Forms library. 다른 버전의 Forms.Init 각 플랫폼에 대해 정의 됩니다.A different version of Forms.Init is defined for each platform. 다음 클래스에이 메서드의 호출을 찾을 수 있습니다.The calls to this method can be found in the following classes:

또한 각 플랫폼을 인스턴스화해야 합니다 App 공유 라이브러리의 위치를 클래스.In addition, each platform must instantiate the App class location in the shared library. 이에 대 한 호출에서 발생 LoadApplication 다음 클래스에:This occurs in a call to LoadApplication in the following classes:

그렇지 않으면 이러한 응용 프로그램 프로젝트는 일반 "아무 작업도 수행" 프로그램입니다.Otherwise, these application projects are normal "do nothing" programs.

PCL 또는 SAP?PCL or SAP?

이식 가능한 클래스 라이브러리 (PCL) 또는 공유 자산 프로젝트 (SAP)에서 공통 코드를 사용 하 여 Xamarin.Forms 솔루션을 만들 수는 것입니다.It's possible to create a Xamarin.Forms solution with the common code in either a Portable Class Library (PCL) or a Shared Asset Project (SAP). SAP 솔루션을 만들려면 Visual Studio에서 공유 옵션을 선택 합니다.To create an SAP solution, select the Shared option in Visual Studio. 합니다 HelloSap 솔루션은 수정 하지 않고도 SAP 템플릿을 보여 줍니다.The HelloSap solution demonstrates the SAP template with no modifications.

참고

이식 가능한 클래스 라이브러리는.NET Standard 라이브러리로 바뀌었습니다.Portable Class Libraries has been replaced by .NET Standard libraries. 이 책에서 모든 샘플 코드는 .NET 표준 라이브러리를 사용하도록 변경되었습니다.All the sample code from the book has been converted to use .NET standard libraries. 그렇지 않은 경우 PCL 및.NET Standard 라이브러리는 개념적으로 유사 합니다.Otherwise, the PCL and .NET Standard libraries are conceptually very similar.

모든 일반적인 플랫폼 응용 프로그램 프로젝트에서 참조 하는 라이브러리 프로젝트에서 코드 라이브러리 접근 방식 번들입니다.The library approach bundles all the common code in a library project referenced by the platform application projects. SAP 방식의 경우 공통 코드는 효과적으로 모든 플랫폼 응용 프로그램 프로젝트에 존재 하 고 그 중 공유 됩니다.With the SAP approach, the common code effectively exists in all the platform application projects and is shared among them.

대부분의 개발자 들은 Xamarin.Forms 라이브러리 접근 방식을 선호합니다.Most Xamarin.Forms developers prefer the library approach. 이 책에이 나온 대부분의 솔루션이 라이브러리를 사용 합니다.In this book, most of the solutions use a library. SAP를 사용 하는 포함 된 Sap 프로젝트 이름에서 접미사.Those that use SAP include an Sap suffix in the project name.

SAP 접근 방식으로 공유 프로젝트에서 코드를 실행할 수 있습니다는 다양 한 플랫폼에 대해 서로 다른 코드를 사용 하 여 C# 전처리기 지시문 (#if, #elif, 및 #endif) 이러한 미리 정의 된 식별자:With the SAP approach the code in the shared project can execute different code for the various platforms by using C# preprocessor directives (#if, #elif, and #endif) with these predefined identifiers:

  • iOS: __IOS__iOS: __IOS__
  • Android: __ANDROID__Android: __ANDROID__
  • UWP: WINDOWS_UWPUWP: WINDOWS_UWP

공유 라이브러리의이 장 뒷부분에서 살펴보겠지만 런타임 시 실행 중인 플랫폼을 확인할 수 있습니다.In a shared library, you can determine what platform you're running on at runtime, as you'll see later in this chapter.

텍스트에 대 한 레이블Labels for text

Greetings 솔루션에 추가 하는 방법을 보여 줍니다 C# 파일을 Greetings 프로젝트.The Greetings solution demonstrates how to add a new C# file to the Greetings project. 이 파일은 라는 클래스를 정의 GreetingsPage 에서 파생 되는 ContentPage합니다.This file defines a class named GreetingsPage that derives from ContentPage. 이 책에이 나온 대부분의 프로젝트는 단일 포함 ContentPage 접미사를 사용 하 여 프로젝트의 이름인 이름이 파생 Page 추가 합니다.In this book, most projects contain a single ContentPage derivative whose name is the name of the project with the suffix Page appended.

GreetingsPage 생성자를 인스턴스화하는 Label 뷰를 텍스트를 표시 하는 Xamarin.Forms 보기.The GreetingsPage constructor instantiates a Label view, which is the Xamarin.Forms view that displays text. Text 으로 표시 되는 텍스트 속성을 Label입니다.The Text property is set to the text displayed by the Label. 이 프로그램을 설정 합니다 LabelContent 의 속성 ContentPage합니다.This program sets the Label to the Content property of ContentPage. 생성자는 App 클래스를 인스턴스화하고 GreetingsPage 로 설정 하 고 해당 MainPage 속성입니다.The constructor of the App class then instantiates GreetingsPage and sets it to its MainPage property.

텍스트는 페이지의 왼쪽 위 모퉁이에 표시 됩니다.The text is displayed in the upper-left corner of the page. Ios의 경우 페이지의 상태 표시줄을 겹치는 것을 의미 합니다.On iOS, this means that it overlaps the page's status bar. 이 문제에 대 한 솔루션 몇 가지가 있습니다.There are several solutions to this problem:

솔루션 1입니다.Solution 1. 페이지의 안쪽 여백을 포함Include padding on the page

설정 된 Padding 페이지의 속성입니다.Set a Padding property on the page. Padding 유형의 Thickness , 네 가지 속성을 사용 하 여 구조:Padding is of type Thickness, a structure with four properties:

Padding 콘텐츠는 제외 하는 페이지 내의 영역을 정의 합니다.Padding defines an area inside a page where content is excluded. 따라서는 Label iOS 상태 표시줄을 덮어쓰지 않도록 합니다.This allows the Label to avoid overwriting the iOS status bar.

솔루션 2입니다.Solution 2. IOS (SAP에만 해당)에 대 한 안쪽 여백을 포함Include padding just for iOS (SAP only)

'안쪽 여백' 속성을 사용 하 여 SAP를 사용 하 여 iOS에만 설정 된 C# 전처리기 지시문입니다.Set a 'Padding' property only on iOS using an SAP with a C# preprocessor directive. 에 설명 되어이 GreetingsSap 솔루션입니다.This is demonstrated in the GreetingsSap solution.

3 솔루션입니다.Solution 3. IOS (PCL 또는 SAP)에 대 한 안쪽 여백을 포함Include padding just for iOS (PCL or SAP)

Xamarin.forms 책에 사용 되는 버전에는 Padding 를 사용 하는 PCL 또는 SAP에서 iOS에 대 한 속성을 선택할 수 있습니다 합니다 Device.OnPlatform 또는 Device.OnPlatform<T> 정적 메서드.In the version of Xamarin.Forms used for the book, a Padding property specific to iOS in either a PCL or SAP can be selected using the Device.OnPlatform or Device.OnPlatform<T> static method. 이러한 메서드는 이제 사용 되지 않습니다.These methods are now deprecated

Device.OnPlatform 메서드 플랫폼별 코드를 실행 하거나 플랫폼 특정 값을 선택 하는 데 사용 합니다.The Device.OnPlatform methods are used to run platform-specific code or to select platform-specific values. 할 내부적으로 사용 합니다 Device.OS 정적 읽기 전용 속성의 멤버를 반환 합니다 TargetPlatform 열거형:Internally, they make use of the Device.OS static read-only property, which returns a member of the TargetPlatform enumeration:

합니다 Device.OnPlatform 메서드를 Device.OS 속성인 및 TargetPlatform 열거형은 이제 사용 되지 않는 모든 합니다.The Device.OnPlatform methods, the Device.OS property, and the TargetPlatform enumeration are all now deprecated. 대신 사용 하 여는 Device.RuntimePlatform 속성과 비교는 string 다음 정적 필드를 사용 하 여 값을 반환 합니다.Instead, use the Device.RuntimePlatform property and compare the string return value with the following static fields:

  • iOS"iOS" 문자열iOS, the string "iOS"
  • Android"Android" 문자열Android, the string "Android"
  • UWP"UWP", 유니버설 Windows 플랫폼에 참조 문자열UWP, the string "UWP", referring to the Universal Windows Platform

합니다 Device.Idiom 정적 읽기 전용 속성 관련 됩니다.The Device.Idiom static read-only property is related. 멤버를 반환 하는이 TargetIdiom , 이러한 멤버에는:This returns a member of the TargetIdiom, which has these members:

IOS 및 Android 간에 구분 TabletPhone 600 단위는 세로 너비입니다.For iOS and Android, the cutoff between Tablet and Phone is a portrait width of 600 units. Windows 플랫폼용 Desktop Windows 10에서 실행 되는 UWP 응용 프로그램을 나타내는 및 Phone Windows 10 응용 프로그램에서 실행 되는 UWP 응용 프로그램을 나타냅니다.For the Windows platform, Desktop indicates a UWP application running under Windows 10, and Phone indicates a UWP application running under Windows 10 application.

솔루션 3a 합니다.Solution 3a. 레이블에 여백 설정Set margin on the Label

합니다 Margin 속성이 너무 늦게 책에 포함 될 도입 하지만 형식 이기도 Thickness 에서 설정할 수 있습니다는 Label 계산에 포함 된 보기의 외부 영역을 정의 하는 뷰의 레이아웃입니다.The Margin property was introduced too late to be included in the book, but it is also of type Thickness and you can set it on the Label to define an area outside the view that is included in the calculation of the view's layout.

Padding 속성은 에서만 사용할 수 Layout 하 고 Page 파생형입니다.The Padding property is only available on Layout and Page derivatives. 합니다 Margin 속성은 모두에서 사용할 수 있습니다 View 파생 합니다.The Margin property is available on all View derivatives.

4 솔루션입니다.Solution 4. 페이지 내에서 레이블을 가운데합니다Center the label within the page

Center 수를 Label 내에서 Page (또는 다른 위치를 8 중 하나에 배치) 설정 하 여를 HorizontalOptions VerticalOptions 속성을는 Label 형식의 값으로 LayoutOptions 합니다.You can center the Label within the Page (or put it in one of eight other places) by setting the HorizontalOptions and VerticalOptions properties of the Label to a value of type LayoutOptions. LayoutOptions 구조 두 속성을 정의 합니다.The LayoutOptions structure defines two properties:

일반적으로 이러한 속성을 직접 사용 되지 않습니다.Generally these properties are not used directly. 이러한 두 속성의 조합도 형식의 8 개의 정적 읽기 전용 속성에서 제공 하는 대신 LayoutOptions:Instead, combinations of these two properties are provided by eight static read-only properties of type LayoutOptions:

HorizontalOptionsVerticalOptions Xamarin.Forms 레이아웃에서 가장 중요 한 속성은 및에서 자세히 설명 4 장입니다. 스택 스크롤합니다.HorizontalOptions and VerticalOptions are the most important properties in Xamarin.Forms layout, and are discussed in more detail in Chapter 4. Scrolling the Stack.

사용 하 여 결과 HorizontalOptions 하 고 VerticalOptions 의 속성 Label 둘 다로 설정 LayoutOptions.Center:Here's the result with the HorizontalOptions and VerticalOptions properties of Label both set to LayoutOptions.Center:

Greetings 프로그램의 3 배가 스크린 샷Triple screenshot of greetings program

5 솔루션입니다.Solution 5. 레이블 내에서 텍스트를 가운데Center the text within the Label

가운데 텍스트 (하거나 수도 페이지의 다른 8 개 위치에 배치) 설정 하 여는 HorizontalTextAlignment 하 고 VerticalTextAlignment 의 속성 Label 합니다 의멤버에 TextAlignment 열거형:You can also center the text (or place it in eight other locations on the page) by setting the HorizontalTextAlignment and VerticalTextAlignment properties of Label to a member of the TextAlignment enumeration:

  • Start를 의미 왼쪽 또는 위쪽 (방향)에 따라 다름Start, meaning left or top (depending on orientation)
  • Center
  • End즉 오른쪽 또는 아래쪽 (방향)에 따라 다름End, meaning right or bottom (depending on orientation)

이러한 두 속성 에서만 정의 됩니다 Label반면 합니다 HorizontalAlignmentVerticalAlignment 속성으로 정의 된 View 모든 상속 View 파생형입니다.These two properties are defined only by Label, whereas the HorizontalAlignment and VerticalAlignment properties are defined by View and inherited by all View derivatives. Visual 결과 수 비슷해 보이지만 다음 장에서 보여 주듯이 매우 다릅니다.The visual results might seem similar, but they are very different as the next chapter demonstrates.