이런 이유로 텍스트라는 주제는 몇 챕터-가장 중요한 Chapter5. dealing with sizes를 비롯하여- 동안 이어질 것입니다. Chapter 12에서는 폰트에 대해서도 다뤄 볼 예정입니다.
단락 배치(Wrapping paragraphs)
텍스트 단락을 표시하는 것은 한 줄의 텍스트를 표시하는 것처럼 간단합니다. 텍스트를 여러 줄로 묶을만큼 길게 만드십시오.
public class BaskervillePage : ContentPage
{
public BaskervillePage()
{
Content = new Label
{
VerticalOptions=LayoutOptions.Center,
Text= "Mr. Sherlock Holmes, who was usually very late in " +
"the mornings, save upon those not infrequent " +
"occasions when he was up all night, was seated at " +
"the breakfast table. I stood upon the hearth-rug " +
"and picked up the stick which our visitor had left " +
"behind him the night before. It was a fine, thick " +
"piece of wood, bulbous-headed, of the sort which " +
"is known as a \u201CPenang lawyer.\u201D Just " +
"under the head was a broad silver band, nearly an " +
"inch across, \u201CTo James Mortimer, M.R.C.S., " +
"from his friends of the C.C.H.,\u201D was engraved " +
"upon it, with the date \u201C1884.\u201D It was " +
"just such a stick as the old-fashioned family " +
"practitioner used to carry\u2014dignified, solid, " +
"and reassuring."
};
Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5);
}
}
| cs |
왼쪽 인용부호( ",\u201C), 오른쪽 인용 부호(",\u201D), 대시(-,\u2014) 유니코드가 텍스트 내부에 사용된 것이 보일 것입니다. 화면 가장자리 침범을 막기 위해 Padding이 5 unit으로 지정되었고, VerticalOptions는 가운데로 맞춰 두었습니다.
이 텍스트 단락에서, iOS 또는 Windows Phone의 경우 HorizontalOptions를 시작, 가운데 또는 끝으로 설정하면 단락 전체가 왼쪽, 가운데 또는 오른쪽으로 약간 수평 이동합니다(Android는 조금 다르게 작동합니다). 단락의 폭은 가장 긴 줄에 맞춰져 있으므로 수평 이동은 아주 미미합니다. 단어 줄 바꿈은 페이지 너비 (빼기 Padding)에 의해 결정되므로 단락은 페이지에서 사용할 수 있는 너비보다 약간 작습니다.
그러나 Label의 HorizontalTextAlignment 속성을 설정하면 훨씬 효과가 현저합니다. 이 속성을 설정하면 각 라인의 정렬에 영향을 줍니다. TextAlignment.Center를 설정하면 단락의 모든 행이 가운데에 배치되고 TextAlignment.Right가 사용되면 모두 오른쪽에 정렬됩니다. HorizontalTextAlignment 외에도 HorizontalOptions를 사용하여 전체 단락을 가운데 또는 약간 오른쪽으로 이동할 수 있습니다.
그러나 VerticalOptions을 Start, Center 또는 End로 설정하면 VerticalTextAlignment의 설정이 적용되지 않습니다.
Label에서 줄바꿈(wrap) 옵션이나 잘림(truncation) 옵션을 선택하지 않으려면 LineBreakMode 속성을 정의합니다.이 속성은 LineBreakMode 열거형의 멤버로 설정할 수 있습니다.
단락의 첫 줄 들여 쓰기를 지정하는 속성은 없지만 공백(Unicode \u2003)과 같이 다양한 유형의 공백 문자를 추가 할 수 있습니다.
개행문자(\n)로 각 단락을 끝내면 단일 레이블보기로 여러 단락을 표시 할 수 있습니다. 그러나 더 나은 방법은 Environment.NewLine static property에서 반환된 문자열을 사용하는 것입니다. 이 속성은 iOS 및 Android 장치에서 "\n"을 반환하고 모든 Windows 및 Windows Phone 장치에서 "\r\n"을 반환합니다.
그러나 줄 바꿈 문자를 포함하여 단락을 만드는 대신 Chpater 4, "Scrolling the stack"에서 설명하는 것처럼 각 단락에 대해 별도의 Label view를 사용하는 것이 좋습니다.
Label 클래스에는 다양한 서식을 지원합니다. Label에 정의된 프로퍼티를 사용하여 font size, bold, italic을 지정할 수 있으며 한 단락 내에 다른 텍스트 서식을 지정할 수도 있습니다
Label을 사용하면 색상을 지정할 수 있는데, 색상을 사용하여 실험을 해보면 HorizontalOptions ,VerticalOptions 속성과 HorizontalTextAlignment ,VerticalTextAlignment 속성 간의 중요한 차이가 있음을 알 수 있습니다.
Text and background color
Label view는 장치에 적합한 색으로 텍스트를 표시합니다. TextColor 및 BackgroundColor라는 두 가지 속성을 설정하여 해당 동작을 오버라이드할 수 있습니다. Label 자체는 TextColor를 정의하지만 VisualElement의 BackgroundColor를 상속합니다. 그 말은, Page 및 Layout에도 BackgroundColor 속성이 있다는 뜻입니다.
TextColor 및 BackgroundColor를 Color 타입의 값으로 설정합니다. Color는 색상을 얻기 위해 17개의 정적 필드를 정의하는 구조체입니다. 앞 챕터에서 사용했던 Greetings 프로그램으로 이 속성들을 테스트해볼 수 있습니다. 정렬에 덧붙여 두가지 색상을 지정해 보는 예를 보여 드리겠습니다.
결과를 보면 놀라실 겁니다. 아래 스크린 샷에서 알 수 있듯이 Label은 실제로는 페이지의 전체 영역 (iOS 상태 표시줄 포함)을 차지하며 HorizontalTextAlignment 및 VerticalTextAlignment 속성은 해당 영역 내부에 텍스트를 배치합니다.
TextColor 및 BackgroundColor를 Color 타입의 값으로 설정합니다. Color는 색상을 얻기 위해 17개의 정적 필드를 정의하는 구조체입니다. 앞 챕터에서 사용했던 Greetings 프로그램으로 이 속성들을 테스트해볼 수 있습니다. 정렬에 덧붙여 두가지 색상을 지정해 보는 예를 보여 드리겠습니다.
public class GreetingsPage : ContentPage
{
public GreetingsPage()
{
Content = new Label
{
Text = "Greetings Xamarin.Forms!",
HorizontalTextAlignment = TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center,
BackgroundColor = Color.Yellow,
TextColor = Color.Blue
};
Device.OnPlatform(iOS:() =>
{
Padding = new Thickness(0, 20, 0, 0);
});
}
}
| cs |
결과를 보면 놀라실 겁니다. 아래 스크린 샷에서 알 수 있듯이 Label은 실제로는 페이지의 전체 영역 (iOS 상태 표시줄 포함)을 차지하며 HorizontalTextAlignment 및 VerticalTextAlignment 속성은 해당 영역 내부에 텍스트를 배치합니다.
만약 HorizontalOptions 및 VerticalOptions 속성을 사용하여 텍스트를 가운데에 맞추면 어떻게 될까요?
public class GreetingsPage : ContentPage
{
public GreetingsPage()
{
Content = new Label
{
Text = "Greetings Xamarin.Forms!",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
BackgroundColor = Color.Yellow,
TextColor = Color.Blue
};
Device.OnPlatform(iOS:() =>
{
Padding = new Thickness(0, 20, 0, 0);
});
}
}
| cs |
이제 레이블은 텍스트에 필요한 만큼만 공간을 차지하며 페이지 중심에 배치됩니다.
HorizontalOptions 및 VerticalOptions의 기본값은 LayoutOptions.Start가 아니고, text의 모양이 결정하는 것입니다. 기본값은 오히려 LayoutOptions.Fill입니다. 이것은 라벨이 페이지를 채우게 합니다. 따라서 이전 챕터에서 Greetings 프로그램의 첫 버젼 출력 결과가 좌상단에 나타났던 것은 이 기본값 때문입니다.
HorizontalOptions, VerticalOptions, HorizontalTextAlignment, VerticalTextAlignment을 다양하게 조합하여 여러가지 효과를 볼 수 있습니다.
여러분은 TextColor와 BackgroundColor의 기본값이 무엇인지, 다른 플랫폼에서는 다른 색으로 나타나는지도 궁금할 것입니다.
TextColor 및 BackgroundColor의 기본값은 사실 Color.Default라는 특수 색상 값이며, 특정 색상을 나타내지는 않습니다. 대신 특정 플랫폼에 적합한 텍스트 및 배경색을 참조하는 데 사용됩니다.
이제 색상에 대해 좀 더 자세히 알아 봅시다.
댓글 없음:
댓글 쓰기