전체 페이지뷰

2017년 2월 7일 화요일

Chapter 3. Deeper into text, part 2

The Color structure

Color 구조체는 두 가지 방법으로 색상을 저장합니다.
  • RGB값 : 0~1까지의 double 형.  R,G,B라는 읽기전용 프로퍼티
  • hue(색상), saturation(채도), luminosity(광도) : 역시 0~1까지의 double 형. Hue, Saturation, Luminosity라는 읽기 전용 속성으로 표현됨
Color 구조체는 불투명도(opacity)를 나타내는 알파 채널도 지원합니다. A라는 읽기 전용 속성이 그 값을 알려줍니다(0은 투명, 1은 불투명).

색상을 정의하는 모든 속성은 읽기 전용입니다. 따라서 한 번 Color 값이 생성되면 불변입니다.

여러 가지 방법으로 Color 값을 만들 수 있습니다. 가장 쉬운 세가지 생성자는 다음과 같습니다. 인수의 범위는 0~1입니다.

  • new Color(double grayShade)
  • new Color(double r, double g, double b)
  • new Color(double r, double g, double b, double a)
Color는 다음과 같은 몇 가지 정적 생성 메소드도 정의합니다.

  • Color.FromRgb(double r, double g, double b)
  • Color.FromRgb(int r, int g, int b)
  • Color.FromRgba(double r, double g, double b, double a)
  • Color.FromRgba(int r, int g, int b, int a)
  • Color.FromHsla(double h, double s, double l, double a)

정수 인수를 가지는 2 개의 static 메소드는, 값이 RGB 칼라의 통상의 표현 인 0 ~ 255의 범위인 것을 전제로 하고 있습니다. 내부적으로 생성자는 정수 값을 255.0으로 나누어 double로 변환합니다.

주의! 이렇게 하면 여러분은 red 칼라를 맘든다고 생각할 지도 모릅니다.

Color.FromRgb(1, 0, 0)

그러나 C# 컴파일러는 정수형으로 인식하고 첫번째 인자를 255.0으로 나누어 double로 변환할 것입니다. 따라서 아래처럼 명시적으로 double임을 알게 해 주어야 합니다,

Color.FromRgb(1.0, 0, 0)

Color는 uint형과 hexadecimal 형의 포맷도 지원하지만 잘 사용되지는 않습니다.

 Color 구조체는 Color 타입의 17개 public static 읽기 전용 필드도 정의합니다. 아래 표에는 Color가 내부적으로 이 필드를 정의하는 데 사용하는 정수 RGB 값이 그에 해당하는 색조, 채도 및 광도 값과 함께 표시됩니다. 명확성을 위해 다소 반올림 되어 있습니다.
Pink를 제외하고는 HTML에서도 지원되는 색상 이름입니다. 18번째 public static read-only 필드의 이름은 Transparent이며 R,G,B 및 A속성은 모두 0으로 설정됩니다.

색을 계산하기로 한다면, 어떤 면에서 HSL 색상 모델은 RGB보다 직관적입니다. Hue는 0에서 빨간색, 0.33에서 녹색, 0.67에서 파란색, 1에서 다시 빨간색으로 돌아오는 가시 광선 영역의 색상을 순환합니다.

Saturation은 색상의 색조 정도를 나타냅니다. 색조가 전혀없는 0(gray shade)에서 최대 채도 1까지 범위입니다.

Luminosity는 광도를 나타내며 0은 black, 1은 white입니다.

15 장 "The interactive interface"의 색상 선택 프로그램을 사용하면 RGB 및 HSL 모델을 보다 대화식으로 탐색할 수 있습니다.

Color 구조에는 기존 색상을 변형하여 새로운 색상을 만들 수 있는 재미있는 인스턴스 메서드가 포함되어 있습니다.

  • AddLuminosity(double delta)
  • MultiplyAlpha(double alpha)
  • WithHue(double newHue)
  • WithLuminosity(double newLuminosity)
  • WithSaturation(double newSaturation)

마지막으로, Color는 Color 유형의 두 가지 특별한 static read-only 속성을 정의합니다.

  • Color.Default
  • Color.Accent

Color.Default 속성은 Xamarin.Forms 내에서 뷰의 기본 색상을 정의하는데에 광범위하게 사용됩니다. VisualElement 클래스는 BackgroundColor 속성을 Color.Default로 초기화하고 Label 클래스는 TextColor 속성을 Color.Default로 초기화합니다

그러나 Color.Default는 R, G, B 및 A 속성이 모두 -1로 설정된 Color 값으로, 그 자체가 의미가 없지만 실제 값이 플랫폼 특정임을 나타내는 특수 "모의"값이라는 것을 의미합니다.

Label과 ContentPage(그리고 VisualElement에서 파생되는 대부분의 클래스)의 경우 Color.Default의 BackgroundColor 설정은 transparent를 의미합니다. 화면에 표시되는 배경색은 페이지의 배경색입니다. 페이지의 BackgroundColor 속성에는 Color.Default로 기본 설정 되어 있지만, 이 값은 의미하는 바는 플랫폼마다 다릅니다.
Label의 TextColor 속성에 대한 Color.Default의 의미 역시 장치에 따라 다릅니다.

다음은 페이지의 BackgroundColor와 Label의 TextColor에서의 기본 색상 체계입니다.
어떤 장치에서든 앱의 기본 색상은 바꿀수 있습니다. 그것은 조금 이후에 살펴 보기로 합니다.

자마린 프로그래밍에서 색을 다루는 데에는 여러 전략들이 있을 수 있습니다.
하나는 플랫폼 독립적으로 작업하고 디폴트 색상을 추측하는 것을 피하는 방식이고,
다른 하나는 다양한 플랫폼의 색상 구성에 대한 지식과 Device.OnPlatform을 사용하여 플랫폼별 색상을 지정하는 방식입니다.

그러나, 모든 플랫폼 기본값을 무시하면서 응용 프로그램의 모든 색상을 자신만의 색 구성표로 설정하진 마십시오. 그런 방식은 생각대로 잘 되지 않을 것입니다. 왜냐하면 OS별로 많은 view들이 자신만의 색상들로 유기적인 구성이 되어있지만 그 모든 프로퍼티를 자마린에서 노출하고 있지는 않기 때문입니다.

대체 text color로서 Color.Accent를 사용하는 것도 좋은 방법일 수 있습니다. iPhone 및 Android 플랫폼에서 이 색상은 기본 텍스트 색상이 아니지만 기본 배경에서 가시성이 좋으며, Windows 플랫폼에서는 사용자가 색상 테마의 일부로 선택한 색상입니다.

TextColor의 A 속성을 1보다 작은 Color 값으로 설정하여 텍스트를 반투명하게 만들 수 있습니다. 그러나 기본 텍스트 색상의 반투명 버전을 원할 경우 Label의 Opacity 속성을 대신 사용하기 바랍니다. 이 프로퍼티는 VisualElement 클래스에 의해 정의되며 기본값 1을 갖습니다. 1보다 작은 값으로 설정하면 다양한 투명도를 가지게 할 수 있습니다.



Changing the application color scheme

안드로이드나 윈도우즈의 경우 앱의 칼라 테마를 변경하는 것이 가능합니다. 이 경우 ContentPage의 BackgroundColor 설정, Label의 TextColor 속성에 대한 Color.Default 설정이 다른 의미를 갖습니다.

Android에서 색상 구성표를 설정하는 방법은 여러 가지가 있지만, 가장 간단한 방법은 Android 프로젝트의 Properties 폴더에있는 AndroidManifest.xml 파일에 single attribute를 설정하는 것입니다. 그 파일 내용은 다음과 같습니다.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"> 
    <uses-sdk android:minSdkVersion="15" /> 
    <application>
    </application> 
</manifest>
cs

application 태그에 다음과 같은 attribute를 첨가합니다.
<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>
cs
이렇게 하면 안드로이드 앱이 밝은 배경에 어두운 글씨로 보이게 될 것입니다.

세 가지 Windows 및 Windows Phone 프로젝트의 경우 특정 프로젝트에있는 App.xaml 파일을 변경해야합니다.

UWP 프로젝트에서 기본 App.xaml 파일은 다음과 같습니다.
<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>
cs

RequestedTheme attribute는 밝은 배경에 어두운 텍스트의 색 구성표를 UWP 응용 프로그램에 제공합니다. Light를 Dark로 바꾸면 반대로 어두운 배경에 밝은 텍스트가 됩니다. 사용자의 설정이 색 구성표를 결정할 수 있도록 하려면 RequestedTheme 특성을 완전히 제거합니다.

Windows Phone 8.1과 Windows 8.1의 경우도 유사합니다만 RequestedTheme attribute가 default로 들어있지 않습니다. WinPhone의 App.xaml은 다음과 같습니다.
<Application x:Class="Baskervilles.WinPhone.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:Baskervilles.WinPhone"> 
 
</Application>
cs

기본적으로 색 구성표는 사용자 설정에 따라 결정됩니다. 직접 RequestedTheme attribute를 작성하고 Light나 Dark로 지정하여 색구성을 제어할 수 있습니다.

Windows Phone 및 Windows 프로젝트에서 RequestedTheme을 설정하면 응용 프로그램이 모든 플랫폼의 기본색 구성표를 완전히 알고 있어야 합니다.
작성자: 시간:
라벨:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)