Xamarin에서 tvOS 단추 사용Working with tvOS Buttons in Xamarin

UIButton 클래스의 인스턴스를 사용 하 여 tvOS 창에 포커스를 선택할 수 있는 단추를 만듭니다.Use an instance of the UIButton class to create a focusable, selectable button in a tvOS window. 사용자가 단추를 선택 하면 대상 개체에 작업 메시지를 보내 tvOS 앱이 사용자의 입력에 응답할 수 있도록 합니다.When the user selects a button, it sends an Action message to the target object allow your Xamarin.tvOS app respond to the user's input.

온라인으로 작업 하 고 Siri 원격으로 이동 하는 방법에 대 한 자세한 내용은 탐색 및 포커스Siri 원격 및 Bluetooth 컨트롤러 사용 설명서를 참조 하세요.For more information on working with Focus and navigating with the Siri Remote, please see our Working with Navigation and Focus and Siri Remote and Bluetooth Controllers documentation.

단추 정보About Buttons

TvOS에서 단추는 앱 별 작업에 사용 되며 제목, 아이콘 또는 둘 다를 포함할 수 있습니다.In tvOS, Buttons are used for app-specific actions and may contain a title, a icon or both. 사용자가 Siri 원격을 사용 하 여 앱의 사용자 인터페이스를 탐색할 때 지정 된 단추로 포커스를 이동 하 여 텍스트 및 배경색을 변경 합니다.As the user navigates the app's User Interface using the Siri Remote, Focus shifts to the given Button making it change text and background colors. 그림자는 3D 효과를 추가 하는 단추에도 적용 되므로 사용자 인터페이스의 나머지 부분 위에 표시 됩니다.A shadow is also applied to the Button adding a 3D effect making it appear to rise above the rest of the User Interface.

Apple에는 단추 작업에 대 한 다음과 같은 제안이 있습니다.Apple has the following suggestions for working with Buttons:

  • 제목 또는 아이콘 중 하나를 사용 하 고 아이콘 및 제목을 모두 단추에 포함할 수 있는 반면 공간이 제한 되므로 양쪽을 결합 하지 마십시오.Use Either a Title or an Icon - While the both an icon and a title can be included in a Button, space is limited so try not to combine both.
  • 명확 하 게 표시 되는 단추-단추가 안전 작업 (예: 파일 삭제)을 수행 하는 경우 텍스트 및/또는 아이콘을 사용 하 여 명확 하 게 표시 합니다.Clearly Mark Destructive Buttons - If the Button performs a destructive action (such as deleting a file), clearly mark it as such using text and/or icon. 파괴적인 작업은 사용자에 게 작업을 제한 하도록 요청 하는 경고 를 항상 제공 해야 합니다.Destructive actions should always present an Alert asking the user to confine the action.
  • 뒤로 단추를 사용 하지 않음 -Siri 원격의 메뉴 단추를 사용 하 여 이전 화면으로 돌아갑니다.Don't Use Back Buttons - The Menu button on the Siri Remote is used to return to the previous screen. 이 규칙의 한 가지 예외는 앱 내 구매 또는 취소 단추가 표시 되는 파괴적인 작업에 대 한 것입니다.The one exception to this rule is for In-App Purchases or destructive actions where a Cancel button should be displayed.

포커스 및 탐색 사용에 대 한 자세한 내용은 탐색 및 포커스 사용 설명서를 참조 하세요.For more information on working with Focus and Navigation, please see our Working with Navigation and Focus documentation.

단추 아이콘Button Icons

Apple은 단추 아이콘에 대해 간단 하 고, 인식 하기 쉬운 이미지를 사용 하는 것을 제안 합니다.Apple suggests that you use simple, highly recognizable images for your Button icons. 과도 하 게 복잡 한 아이콘은 소파의 실내에서 TV 화면을 인식 하기 어렵습니다. 따라서 최대한의 아이디어를 얻기 위해 가장 간단한 표현을 사용해 보세요.Overly complex icons are hard to recognize on a TV screen across the room on a couch, so try to use the simplest representation possible to get the idea across. 가능 하면 아이콘에 대해 잘 알려진 표준 이미지를 사용 합니다 (예: 검색을 위한 돋보기).Whenever possible, use standard, well-know images for icons (such as a magnifying glass for search).

단추 제목Button Titles

Apple에는 단추의 제목을 만들 때 다음과 같은 제안이 있습니다.Apple has the following suggestions when creating the titles for your Buttons:

  • 아이콘 단추 아래 설명 텍스트를 표시 합니다 (가능한 경우). 단추를 클릭 하 여 단추의 용도를 추가로 얻을 수 있습니다.Show Descriptive Text Below Icons Buttons - Where possible, place clear, descriptive text below icon only Buttons to further get the Button's purpose across.
  • 제목에 동사 또는 동사 문구를 사용 합니다. 사용자가 단추를 클릭할 때 수행 되는 작업은 명확 합니다.Use Verbs or Verb Phrases for the Title - Clearly state the action that will take place when the user clicks the Button.
  • 제목 스타일 대/소문자 구분-문서, 접속사 또는 전치사 (4 자이 하)를 제외 하 고, 단추 제목의 모든 단어는 대문자 여야 합니다.Use Title-Style Capitalization - With the exception of articles, conjunctions or prepositions (four letters or less), every word of the Button's title should be capitalized.
  • 짧은 지점 제목 사용 -가장 짧은 가능한 용어로을 사용 하 여 단추의 작업을 설명 합니다.Use a Short, To-The-Point Title - Use the shortest possible verbiage to describe the Button's action.

단추 및 StoryboardButtons and Storyboards

TvOS 앱에서 단추를 사용 하는 가장 쉬운 방법은 Xamarin Designer for iOS를 사용 하 여 앱의 UI에 추가 하는 것입니다.The easiest way to work with buttons in a Xamarin.tvOS app is to add them to the app's UI using the Xamarin Designer for iOS.

  1. 솔루션 탐색기에서 Main.storyboard 파일을 두 번 클릭 하 여 편집용으로 엽니다.In the Solution Explorer, double-click the Main.storyboard file and open it for editing.

  2. 라이브러리 에서 단추 를 끌어서 뷰에 놓습니다.Drag a Button from the Library and drop it on the View:

  3. 속성 탐색기에서 제목텍스트 색과 같은 단추의 여러 속성을 조정할 수 있습니다.In the Properties Explorer, you can adjust several properties of the button such as its Title and Text Color:

  4. 그런 다음 이벤트 탭 으로 전환 하 고 단추 에서 이벤트 를 연결 하 고 ButtonPressed호출 합니다.Next, switch to the Events Tab and wire-up an Event from the Button and call it ButtonPressed:

  5. 위쪽아래쪽 화살표 키를 사용 하 여 코드에 새 작업을 추가할 수 있는 ViewController.cs 뷰로 자동 전환 됩니다.You will be automatically switched to the ViewController.cs view where you can place the new Action in your code using the Up and Down arrow keys:

  6. Enter 키를 눌러 위치를 선택 합니다.Press the Enter to select the location:

  7. 모든 파일의 변경 내용을 저장 합니다.Save the changes to all files.

단추의 Enabled 속성이 true 되 고 다른 컨트롤이 나 뷰에서 다루지 않는 한, Siri 원격을 사용 하 여 포커스 내 항목으로 만들 수 있습니다.As long as a button's Enabled property is true and it is not covered by another control or view, it can be made the in-focus item using the Siri Remote. 사용자가 단추를 선택 하 고 터치 화면을 클릭 하면 위에 정의 된 ButtonPressed 작업이 실행 됩니다.If the user selects the button and clicks the Touch Surface, the ButtonPressed action defined above would be executed.

중요

IOS 디자이너에서 이벤트 처리기를 만들 때 UIButtonTouchUpInside와 같은 작업을 할당 하는 것은 가능 하지만, Apple TV에 터치 스크린이 없거나 터치 이벤트가 지원 되기 때문에 호출 되지 않습니다.While it is possible to assign actions such as TouchUpInside to a UIButton in the iOS Designer when creating an Event Handler, it will never be called because Apple TV doesn't have a touch screen or support touch events. TvOS 사용자 인터페이스 요소에 대 한 작업 을 만들 때는 항상 기본 작업 형식을 사용 해야 합니다.You should always use the default Action Type when creating Actions for tvOS user interface elements.

스토리 보드 사용에 대 한 자세한 내용은 Hello, tvOS 빠른 시작 가이드를 참조 하세요.For more information on working with Storyboards, please see our Hello, tvOS Quick Start Guide.

단추 및 코드Buttons and Code

필요에 따라 UIButton를 코드에 C# 만들고 tvOS 앱의 뷰에 추가할 수 있습니다.Optionally, a UIButton can be created in C# code and added to the tvOS app's view. 예를 들면,For example:

var button = new UIButton(UIButtonType.System);
button.Frame = new CGRect (25, 25, 300, 150);
button.SetTitle ("Hello", UIControlState.Normal);
button.AllEvents += (sender, e) => {
    // Do something when the button is clicked
    ...
};
View.AddSubview (button);

코드에서 새 UIButton를 만들 때는 해당 UIButtonType를 다음 중 하나로 지정 합니다.When you create a new UIButton in code, you specify its UIButtonType as one of the following:

  • 시스템 -tvOS에서 제공 하는 표준 형식의 단추 이며 가장 자주 사용 하는 형식입니다.System - This is the standard type of button presented by tvOS and is the type that you will use most often.
  • DetailDisclosure -자세한 정보를 숨기 거 나 표시 하는 데 사용 되는 "turn" 유형의 단추를 표시 합니다.DetailDisclosure - Presents a "turn down" type of button used to hide or show detailed information.
  • Infodark -어두운 상세 정보 단추가 원에 "i"를 표시 합니다.InfoDark - A dark detailed info button displayed an "i" in a circle.
  • InfoLight -밝은 상세 정보 단추가 원에 "i"를 표시 합니다.InfoLight - A light detailed info button displayed an "i" in a circle.
  • Addcontact -연락처 추가 단추로 단추를 표시 합니다.AddContact - Display the button as an Add Contact button.
  • 사용자 지정 -단추의 여러 특성을 사용자 지정할 수 있습니다.Custom - Allows you to customize several traits of the button.

다음으로 단추의 화면 크기와 위치를 정의 합니다.Next, you define the on-screen size and location of the button. 예제:Example:

button.Frame = new CGRect (25, 25, 300, 150);

그런 다음 단추의 제목을 설정 합니다.Then, set the title for the button. UIButtons은 상태를 포함 하는 대부분의 UIKit 컨트롤과 다르며 단순히 제목만 변경할 수 없으며 지정 된 UIControlState에 대해 변경 해야 합니다.UIButtons are different than most UIKit controls in that they have a State so you can't just simply change the title, you have to change it for a given UIControlState. 예를 들면,For example:

button.SetTitle ("Hello", UIControlState.Normal);

그런 다음 AllEvents 이벤트를 사용 하 여 사용자가 단추를 클릭 했는지 확인 합니다.Next, use the AllEvents event to see when the user has clicked the button. 예제:Example:

button.AllEvents += (sender, e) => {
    // Do something when the button is clicked
    ...
};

마지막으로 보기에 단추를 추가 하 여 표시 합니다.Finally, you add the button to the view to display it:

View.AddSubview (button);

중요

TouchUpInside와 같은 작업을 UIButton에 할당할 수 있지만 Apple TV는 터치 스크린이 없거나 터치 이벤트를 지원 하기 때문에 호출 되지 않습니다.While it is possible to assign actions such as TouchUpInside to a UIButton, it will never be called because Apple TV doesn't have a touch screen or support touch events. AllEvents 또는 primaryactiontriggered이벤트와 같은 이벤트를 항상 사용 해야 합니다.You should always use events such as AllEvents or PrimaryActionTriggered.

단추 스타일 지정Styling a Button

tvOS는 제목을 제공 하는 데 사용할 수 있는 UIButton의 여러 속성을 제공 하 고 배경색 및 이미지와 같은 항목을 스타일로 지정 합니다.tvOS provides several properties of a UIButton that can be used to provide its title and style it with things like background color and images.

단추 제목Button Titles

위에서 언급 한 것 처럼 UIButtons은 상태를 포함 하는 대부분의 UIKit 컨트롤과 다르며 단순히 제목만 변경할 수 없으므로 지정 된 UIControlState에 대해 변경 해야 합니다.As we saw above, UIButtons are different than most UIKit controls in that they have a State so you can't just simply change the title, you have to change it for a given UIControlState. 예를 들면,For example:

button.SetTitle ("Hello", UIControlState.Normal);

SetTitleColor 메서드를 사용 하 여 단추에 대 한 제목 색을 설정할 수 있습니다.You can set the title color for the button using the SetTitleColor method. 예를 들면,For example:

button.SetTitleColor (UIColor.White, UIControlState.Normal);

SetTitleShadowColor를 사용 하 여 제목의 그림자를 조정할 수 있습니다.And you can adjust the title's shadow using the SetTitleShadowColor. 예를 들면,For example:

button.SetTitleShadowColor(UIColor.Black, UIControlState.Normal);

다음 코드를 사용 하 여 단추가 강조 표시 될 때 음각 에서 볼록 으로 변경 되도록 제목 그림자를 설정할 수 있습니다.You can set the title shadow to change from Engraved to Embossed when the button is highlighted using the following code:

button.ReverseTitleShadowWhenHighlighted = true;

또한 특성 사용 텍스트를 단추의 제목으로 사용할 수 있습니다.Additionally, you can use attributed text as the button's title. 예를 들면,For example:

var normalAttributedTitle = new NSAttributedString (buttonTitle, foregroundColor: UIColor.Blue, strikethroughStyle: NSUnderlineStyle.Single);
myButton.SetAttributedTitle (normalAttributedTitle, UIControlState.Normal);

var highlightedAttributedTitle = new NSAttributedString (buttonTitle, foregroundColor: UIColor.Green, strikethroughStyle: NSUnderlineStyle.Thick);
myButton.SetAttributedTitle (highlightedAttributedTitle, UIControlState.Highlighted);

단추 이미지Button Images

UIButton는 이미지에 연결 된 이미지를 포함할 수 있으며 이미지를 배경으로 사용할 수 있습니다.A UIButton can have an image attached to it and can use an image as its background.

지정 된 UIControlState단추에 대 한 배경 이미지를 설정 하려면 다음 코드를 사용 합니다.To set the background image of a button for a given UIControlState, use the following code:

button.SetBackgroundImage(UIImage.FromFile("my image.png"), UIControlState.Normal);

단추가 강조 표시 된 경우 (기본값) 이미지를 더 밝게 그리려면 AdjustsImageWhenHiglighted 속성을 true로 설정 합니다.Set the AdjustsImageWhenHiglighted property to true to draw the image lighter when the button is highlighted (this is the default). 단추를 사용할 수 없을 때 이미지를 더 진하게 그리려면 AdjustsImageWhenDisabled 속성을 true로 설정 합니다 (기본값).Set the AdjustsImageWhenDisabled property to true to draw the image darker when the button is disabled (again, this is the default).

단추에 표시 되는 이미지를 설정 하려면 다음 코드를 사용 합니다.To set the image displayed on the button, use the following code:

button.SetImage(UIImage.FromFile("my image.png"), UIControlState.Normal);

TintColor 속성을 사용 하 여 제목과 단추의 이미지에 모두 적용 되는 색 농도를 설정 합니다.Use the TintColor property to set a color tint that is applied to both the title and the button's image. Custom 형식의 단추에는이 속성이 적용 되지 않습니다. TintColor 동작을 직접 구현 해야 합니다.For buttons of the Custom type, this property has no effect, you must implement the TintColor behavior yourself.

요약Summary

이 문서에서는 tvOS 앱 내에서 단추 디자인 및 작업에 대해 설명 했습니다.This article has covered designing and working with buttons inside of a Xamarin.tvOS app. IOS 디자이너에서 단추를 사용 하는 방법 및 코드에서 C# 단추를 만드는 방법을 살펴보았습니다.It showed how to work with buttons in the iOS Designer and how to create buttons in C# code. 마지막으로, 단추의 제목을 수정 하 고 스타일 및 모양을 변경 하는 방법을 살펴보았습니다.Finally, it showed how to modify a button's title and change its style and appearance.