3장 요약. 텍스트 자세히 알아보기

이 포스트의 내용은 Summary of Chapter 3. Deeper into text (https://docs.microsoft.com/en-us/xamarin/xamarin-forms/creating-mobile-apps-xamarin-forms/summaries/chapter03) 을 번역한 자료입니다. 한글로 표현하기 어색하거나 모호한 문장은 임의로 조정하거나 삭제하였으므로 필요한 경우 원문을 참고하시기 바랍니다. 또한 언제든지 원저자의 요청에 의해 게시물이 내려지거나 수정될 수 있음을 알려드립니다. 마지막으로 이 글은 개인적인 학습목적으로 번역한 자료이며, 따라서 오역이나 잘못된 해석이 포함되어 있을 수 있으며 이로인한 어떠한 일체의 보장을 하지 않습니다.

이 문서에서는 다음 주제를 다룹니다.

• 단락 줄바꿈
• 텍스트와 배경색
• Color 구조체
• Color Scheme 변경하기
• 폰트크기와 특성
• 서식있는 텍스트
• 관련 링크

단락 줄바꿈

Label의 Text Property에 장문의 문자열을 할당하면 Label은 문자열을 여러 줄로 줄바꿈하여 출력합니다. 이 내용은 Baskervills 샘플에서 확인하실 수 있습니다. 문자열에는 유니코드나 줄바꿈 문자를 포함할 수 있는데, 예를들어 유니코드 '\u2014'는 '—'로 '\r'은 줄바꿈으로 표현됩니다.

Label의 HorizontalOptions나 VerticalOptions Property에 LayoutOptions.Fill을 할당하면 Label의 크기는 Label의 부모가 제공해준 공간 전체를 차지합니다. 이 때 Label은 Constrained(제한된) 상태라고 부르며, Label의 크기는 부모의 크기와 동일합니다.

Label의 HorizontalOptions나 VerticalOptions Property를 LayoutOptions.Fill 외에 다른 값으로 지정하면 Label은 텍스트를 출력하는데 필요한 크기만큼 공간을 차지합니다. 최대 크기는 Label의 부모가 제공해주는 공간을 넘지 않습니다. 이 때 Label은 Unconstrained(제한되지 않은) 상태라고 부르며 Label의 크기는 스스로 결정하게 됩니다.

(참고: Constrained와 Unconstrained 개념은 직관적이지 않을 수 있습니다. 왜냐하면 Unconstrained View의 크기는 일반적으로 Constrained View보다 작기 때문입니다. 따라서 이 개념들은 이 책의 초반부에서 지속적으로 사용되지 않습니다.)

Label과 같은 View는 지정된 공간에 Constrained될 수 있고, 반대로 Unconstrained될 수도 있습니다. Label은 너비가 Constrained된 상태일 때 문자열을 줄바꿈하게 됩니다.

Label이 Constrained 상태면 텍스트를 표현하는데 필요한 공간보다 더 많은 공간을 차지할 수 있습니다. 텍스트는 Label이 차지한 공간 일부에 배치될 것입니다. Label 내부의 텍스트가 정렬되는 방향은 HorizontalTextAligment Property로 설정할 수 있습니다. HorizontalTextAligment Property에 TextAlignment Enum(Start, Center, End) 값을 할당하면 문단의 정렬 방향이 결정되게 됩니다. 기본 값은 Start이며 텍스트는 왼쪽 정렬되게 됩니다.

VerticaltextAlignment Property에 TextAlignment Enum 값(Start, Center, End)을 할당하면 Label이 차지하는 공간 내에서 텍스트가 상단, 중간, 하단으로 정렬되게 됩니다.

LineBreakMode Propery를 LineBreakMode Enum 값(WordWrap, CharacterWrap, NoWrap, HeadTruncation, MiddleTruncation, TailTruncation)으로 할당하면 여러 줄의 텍스트가 어떤 기준으로 줄바꿈될지 혹은 어떤 기준으로 텍스트가 잘릴지 결정할 수 있습니다. 예를들어 WordWrap은 단어를 기준으로 줄바꿈하지만 CharacterWrap는 문자를 기준으로 줄바꿈을 결정합니다.

텍스트와 배경색

Label의 TextColor와 BackgroundColor Property에 Color 값을 할당하면 텍스트 색상이나 배경색상을 변경하실 수 있습니다.

BackgroundColor는 Label이 차지한 공간의 배경색을 설정합니다. HorizontalOptions나 VerticalOptions Property 값에 따라 배경색이 출력되는 공간은 텍스트를 출력하는데 필요한 크기보다 클 수도 있고 작을 수도 있습니다. BackgroundColor를 통해서 HorizontalOptions, VerticalOptions, HorizontalExeAlignment, VerticalTextAlignment 속성이 Label의 크기, 위치, Text의 크기, 위치에 어떤 영향을 미치는지 테스트해볼 수 있습니다.

Color 구조체

Color Struct는 Red-Green-Blue(RGB), Hue-Saturation-Luminosity(HSL), 색상명을 통해 색상을 표현 수 있게 해줍니다. Alpha 채널을 통해 투명도를 설정할 수 있습니다.

Color Struct의 생성자는 아래와 같은 매개변수 유형을 받을 수 있습니다.

• 음영 값
• RGB 값
• RGBA 값

매개변수 값 유형은 double로 0~1사이의 값입니다.

Color 값을 생성하기 위해 Static Method를 사용할 수 있습니다.

• Color.FromRgb 메서드 (0~1 사이의 double RGB 값을 매개변수로 받음)
• Color.FromRgb 메서드 (0~255 사이의 int RGB 값을 매개변수로 받음)
• Color.FromRgba 메서드 (0~1 사이의 double RGBA 값을 매개변수로 받음)
• Color.FromRgba 메서드 (0~255 사이의 int RGBA 값을 매개변수로 받음)
• Color.FromHsla 메서드 (0~1 사이의 double HSL 값을 매개변수로 받음)
• Color.FromUint 메서드 ((B + 256 * (G + 256 * (R + 256 * A)))로 계산된 uint 값을 매개변수로 받음)
• Color.FromHex 메서드 ("#AARRGGBB"," #RRGGBB", "#ARGB", "#RGB"와 같은 16진수 string을 매개변수로 받음. 각 문자는 Alpha, Red, Green, Blue 채널을 나타냄. 7장 XAML vs Code의 XAML 색상 변환에 주로 사용됨)

일단 Color 인스턴스가 생성되면 값을 변경할 수 없습니다. Color 인스턴스는 아래와 같은 Property를 통해 색상을 표현합니다.

• R
• G
• B
• A
• Hue
• Saturation
• Luminosity

이 Propety의 Type은 0~1사이의 double 값입니다.

Color Struct는 자주쓰는 240개의 색상을 Static Read-only Field를 통해 제공합니다. 이 책이 작성되었을 때에는 오로지 17개의 색상만 제공했습니다.

아래 Static Read-only Field는 투명을 표현하며 모든 채널 값이 0으로 설정되어 있습니다.

• Transparent

다음 Instance Method는 기존의 Color 인스턴스로부터 새로운 Color 인스턴스를 생성하기 위해 사용합니다.

• AddLuminosity
• MultiplyAlpha
• WithHue
• WithLuminosity
• WithSaturation

마지막으로 2개의 특별한 Static Read-only Property를 제공하고 있습니다.

• Color.Default, 모든 채널은 –1로 설정되어 있음
• Color.Accent

Color.Default는 플렛폼의 색상 정책에 따라 다른 색상을 표현합니다. 실행 중인 플렛폼과 Color가 사용되는 코드 위치에 따라 색상이 달라집니다. 기본적인 플렛폼 별 색상 정책은 아래와 같습니다.

• iOS: 흰색 배경, 검정 텍스트
• Android: 검정 배경, 흰색 텍스트(구버전 Android 색상 정책이며, 이 책에서 예제로 사용됨), 또는 흰색 배경, 검정 텍스트(Material Design의 색상 정책이며 샘플코드 저장소 master 브랜치에 존재하는 코드는 AppCompat를 통해 Material Design을 사용하고 있음)
• UWP: 흰색 배경, 검정 텍스트

Color.Accent 값은 플렛폼(특정 플렛폼에서는 사용자 설정이 가능함)에 따라 다르며 Color.Default(검정이나 흰색)와 대비되는 색상을 반환합니다.

다음 예제를 통해 플렛폼 별로 색상이 어떻게 표현되는지 알 수 있습니다.

var red    = new Label { Text = "Red",   BackgroundColor = Color.Red };
var orange = new Label { Text = "Orange",BackgroundColor = Color.FromHex("FF6A00") };
var yellow = new Label { Text = "Yellow",BackgroundColor = Color.FromHsla(0.167, 1.0, 0.5, 1.0) };
var green  = new Label { Text = "Green", BackgroundColor = Color.FromRgb (38, 127, 0) };
var blue   = new Label { Text = "Blue",  BackgroundColor = Color.FromRgba(0, 38, 255, 255) };
var indigo = new Label { Text = "Indigo",BackgroundColor = Color.FromRgb (0, 72, 255) };
var violet = new Label { Text = "Violet",BackgroundColor = Color.FromHsla(0.82, 1, 0.25, 1) };

var transparent = new Label { Text = "Transparent",BackgroundColor = Color.Transparent };
var @default = new Label    { Text = "Default",    BackgroundColor = Color.Default };
var accent = new Label      { Text = "Accent",     BackgroundColor = Color.Accent };

예제코드 실행 결과는 아래와 같습니다.

Color Scheme 변경하기

플렛폼 별로 서로 다른 색상 정책을 사용하고 있습니다.

Android에서 흰색 배경에 검정 텍스트 색상정책을 사용하려면 Android.Manifest.xml 파일에서 Light Theme를 설정하시면 됩니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-sdk android:minSdkVersion="15" />
    <application android:theme="@style/android:Theme.Holo.Light">
    </application>
</manifest>

또 다른 방법으로는 AppCompat를 추가하여 Material Design을 적용하시면 됩니다.

Windows 플렛폼에서 색상 정책은 기본적으로 사용자 설정에 따릅니다. UWP 프로젝트에 존재하는 App.xaml파일의 RequestedTheme을 Light 또는 Dark로 지정하여 색상정책을 변경할 수 있습니다. 기본적으로 App.xaml파일의 RequestedTheme 값은 Light로 설정되어 있습니다.

<Application
    x:Class="Baskervilles.UWP.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Baskervilles.UWP"
    RequestedTheme="Light">
</Application>

폰트크기와 특성

Label의 FontFamily Property 값을 "Times Roman"과 같은 다른 폰트로 설정할 수 있습니다. 플렛폼에서 지원되는 폰트명을 지정해야 하며, 지원되는 폰트의 종류는 플렛폼에 따라 다릅니다.

Label의 FontSize Property는 double 값으로 대략적인 폰트의 크기를 결정합니다. 폰트 크기를 결정하기 위한 상세한 정보는 5장. 크기 다루기를 확인해주세요.

플렛폼 별로 미리 정의된 폰트 크기 값을 사용하여 폰트 크기를 지정할 수 있습니다. Device.GetnamedSize Static 메서드나 Overload 메서드에 NamedSize Enum(Default, Micro, Small, Medium, Large) 값을 매개변수로 할당하면, 플레폼 별 적절한 폰트 크기를 double 값으로 반환합니다. Medium에 해당하는 값은 반드시 Default와 일치하지 않음에 주의해주세요. NamedFontSizes 샘플은 NamedSize에 따른 텍스트 크기를 보여줍니다.

Label의 FontAttributes Property에 FontAttributes Enum(Bold, Italic, None) 값을 할당 할 수 있습니다. Bold, Italic은 C# Bitwise OR 연산자를 통해 동시에 사용할 수 있습니다.

class GreetingsPage : ContentPage
{
    public GreetingsPage()
    {
        Content = new Label
        {
            Text = "Greetings, Xamarin.Forms!",
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
            //Bitwise OR 연산자를 통해 Bold, Italic를 조합할 수 있음
            FontAttributes = FontAttributes.Bold | FontAttributes.Italic
        };
    }
}

서식있는 텍스트

지금까지 소개드렸던 Label 설정을 조합하여 서식화된 텍스트를 Label에 할당할 수 있습니다. 텍스트에 서식을 적용하려면 Text Property를 사용해서는 안됩니다. 대신 FormattedText Property에 FormattedString 인스턴스를 지정해야합니다.

FormattedString은 Spans Property를 가지고 있으며 Span 객체의 컬렉션을 할당할 수 있습니다. 각 Span 객체는 Text, FontFamily, FontSize, FontAttributes, ForegroundColor, BackgroundColor Property를 가지고 있습니다.

VariableFormattedText 샘플은 FormattedText Property를 통해 한 문장의 서식화된 텍스트를 출력합니다. VariableFormattedParagraph 샘플은 여러 문단을 표현하는 방법을 소개하며 실행 결과는 아래 그림과 같습니다.

NamedFontSize 프로그램은 하나의 Label과 FormattedString를 사용하여 플렛폼별 NamedSize 텍스트 크기를 출력합니다.

관련 링크

• 3장 전체 텍스트(PDF)
• 3장 샘플
• 3장 F# 샘플
• Label
• Color