iOS 7 사용자 인터페이스 개요iOS 7 User Interface Overview

iOS 7에는 사용자 인터페이스 변경 다양 한 도입 되었습니다. 이 문서에서는 컨트롤의 시각적 모양과 새로운 디자인을 지 원하는 Api 모두의 큰 변경 내용 중 일부를 중점적으로 설명 합니다.iOS 7 introduces a plethora of user interface changes. This article highlights some of the larger changes, both in the visual appearance of controls and in the APIs that support the new design.

iOS 7은 chrome을 통해 콘텐츠를 집중적으로 다룹니다.iOS 7 focuses on content over chrome. IOS 7의 사용자 인터페이스 요소 불필요 한 테두리, 상태 표시줄 및 탐색 모음과 같은 특성을 제거 하 여 크롬을 강조 하 여 콘텐츠 보기에서 사용 되는 화면 공간의 크기를 줄입니다.User interface elements in iOS 7 de-emphasize chrome by removing attributes such as extraneous borders, status bars, and navigation bars, which reduce the amount of screen space used by content views. IOS 7에서는 콘텐츠가 전체 화면을 사용 하도록 디자인 되었습니다.In iOS 7, content is designed to use the entire screen.

iOS 7에는 여러 가지 변경 사항이 도입 되었습니다. 색은 단추 테두리와 같은 특성 대신 사용자 인터페이스 요소를 구분 하는 데 사용 됩니다.iOS 7 introduces several other changes: color is used to distinguish user interface elements, in lieu of attributes such as button borders. 탐색 모음, 상태 표시줄 등의 많은 요소가 이제 희미 하 고 반투명 하거나 투명 하 게 됩니다. 콘텐츠 뷰는 아래 영역을 차지 합니다.Many elements, such as navigation bars and status bars, are now either blurred and translucent or transparent, with content views taking area beneath them. 이러한 콘텐츠 뷰는 흐리게 막대를 통해 렌더링 되어 사용자 인터페이스에서 깊이 느낌을 전달 합니다.These content views render through the blurred bars, conveying a feeling of depth in the user interface.

이 문서에서는 iOS 7의 사용자 인터페이스 요소에 대 한 몇 가지 변경 내용 및 새로운 사용자 인터페이스 디자인과 관련 된 다양 한 Api에 대해 설명 합니다.This article covers several of the changes to user interface elements in iOS 7 as well as various APIs related to the new user interface design.

변경 내용 보기 및 제어View and Control Changes

UIKit의 모든 보기는 iOS 7의 새로운 모양과 느낌을 준수 합니다.All of the views in UIKit conform to the new look and feel of iOS 7. 이 섹션에서는 이러한 보기에 대 한 일부 변경 내용과 새 UI를 지원 하기 위해 변경 된 관련 Api에 대해 중점적으로 설명 합니다.This section highlights some of the changes to these views, as well as the related APIs that have changed to support the new UI.

UIButtonUIButton

UIButton 클래스에서 만든 단추는 이제 아래와 같이 기본적으로 배경 없이 테두리가 표시 됩니다.Buttons created from the UIButton class are now borderless, with no background by default, as shown below:

UIButtonType.RoundedRect 스타일은 더 이상 사용 되지 않습니다.The UIButtonType.RoundedRect style has been deprecated. IOS 7에서 사용 하는 경우 UIButtonType.RoundedRectUIButtonType.System 사용 됩니다 .이 경우 위에 나와 있는 것 처럼 배경이 나 가장자리가 표시 되지 않는 기본 단추 스타일을 생성 합니다.If used in iOS 7, UIButtonType.RoundedRect will result in UIButtonType.System being used, which produces the default button style with no background or visible edges, as shown above.

Ui바 ButtonitemUIBarButtonItem

UIButton와 마찬가지로 가로 막대형 단추도 여백 하지 않으며 아래에 표시 된 새 UIBarButtonItemStyle.Plain 스타일을 기본값으로 합니다.Similar to UIButton, bar buttons are also borderless, defaulting to the new UIBarButtonItemStyle.Plain style shown below:

또한 UIBarButtonItemStyle.Bordered 스타일은 더 이상 사용 되지 않습니다.Additionally, the UIBarButtonItemStyle.Bordered style has been deprecated. IOS 7에서 UIBarButtonItemStyle.Bordered를 설정 하면 UIBarButtonItemStyle.Plain 스타일이 사용 됩니다.Setting UIBarButtonItemStyle.Bordered in iOS 7 will result in the UIBarButtonItemStyle.Plain style being used.

UIBarButtonItemStyle.Done 스타일이 사용 되지 않습니다.The UIBarButtonItemStyle.Done style has not been deprecated. 그러나 다음과 같이 굵게 표시 된 텍스트 스타일을 사용 하는 경우에만 테두리 없는 단추가 만들어집니다.However, it will also create a borderless button, only with a bold text style as shown:

UIAlertViewUIAlertView

새 iOS 7 모양과 느낌에 대 한 스타일 변경 외에도, 경고 보기는 하위 뷰를 통한 사용자 지정을 더 이상 지원 하지 않습니다.In addition to the style change for the new iOS 7 look and feel, alert views no longer support customization via subview. UIAlertView UIView에서 상속 되더라도 UIAlertView에서 AddSubview를 호출 해도 아무런 효과가 없습니다.Even though UIAlertView inherits from UIView, calling AddSubview on a UIAlertView has no effect. 예를 들어, 다음 코드를 고려하세요.For example, consider the following code:

UIBarButtonItem button = new UIBarButtonItem ("Bar Button", UIBarButtonItemStyle.Plain, (s,e) =>
{
    UIAlertView alert = new UIAlertView ("Title", "Message", null, "Cancel", "OK");

    alert.AddSubview (new UIView () {
        Frame = new CGRect(50, 50,100, 100),
        BackgroundColor = UIColor.Green
    });

    alert.Show ();
});

그러면 아래와 같이 하위 뷰가 무시 되는 표준 경고 보기가 생성 됩니다.This produces a standard alert view, with the subview being ignored, as shown below:

참고: UIAlertView는 iOS 8에서 더 이상 사용 되지 않습니다.Note: UIAlertView was deprecated in iOS 8. IOS 8 이상에서 경고 보기를 사용 하 여 경고 컨트롤러 조리법을 봅니다.View the Alert Controller recipe on using an Alert View in iOS 8 and above.

UISegmentedControlUISegmentedControl

IOS 7의 분할 된 컨트롤은 투명 하 고 색조 색을 지원 합니다.Segmented controls in iOS 7 are transparent and support tint color. 색조 색은 텍스트와 테두리 색에 사용 됩니다.The tint color is used for the text and border color. 세그먼트를 선택 하면 아래와 같이 선택한 세그먼트를 강조 표시 하는 데 사용 되는 색조 색을 사용 하 여 배경색과 텍스트 사이에 색이 바뀝니다.When a segment is selected, the color is swapped between the background and the text, with the tint color used to highlight the selected segment, as shown below:

또한 UISegmentedControlStyle은 iOS 7에서 더 이상 사용 되지 않습니다.Additionally, the UISegmentedControlStyle has been deprecated in iOS 7.

선택 보기Picker Views

선택 뷰의 API는 대체로 변경 되지 않습니다. 그러나 iOS 7 디자인 지침 이제 상태 선택 뷰가 화면 아래쪽에서 애니메이션 효과가 적용 되는 것이 아니라, 이전 iOS 버전과 같이 탐색 컨트롤러의 스택으로 푸시되는 새 컨트롤러를 통해 인라인으로 표시 되어야 합니다.The API for picker views is largely unchanged; however, iOS 7 design guidelines now state picker views should be presented inline rather than as input views animated from the bottom of the screen or via a new controller pushed onto a navigation controller’s stack, as in previous iOS versions. 이는 시스템 달력 앱에서 볼 수 있습니다.This can be seen in the system calendar app:

UISearchDisplayControllerUISearchDisplayController

이제 UISearchDisplayController.DisplaysSearchBarInNavigationBar 속성이 true로 설정 된 경우 검색 표시줄이 탐색 모음 내에 표시 됩니다.The search bar is now shown inside the navigation bar when the UISearchDisplayController.DisplaysSearchBarInNavigationBar property is set to true. False로 설정 하면 (기본값) 검색 컨트롤러가 표시 될 때 탐색 모음이 숨겨집니다.When set to false - the default - the navigation bar is hidden when the search controller is displayed.

다음 스크린샷은 UISearchDisplayController내의 검색 창을 보여 줍니다.The following screenshot shows the search bar within a UISearchDisplayController:

UITableViewUITableView

UITableView 관련 된 Api는 주로 변경 되지 않습니다. 그러나 스타일은 새로운 사용자 인터페이스 디자인을 따르도록 크게 변경 되었습니다.The APIs around UITableView are mainly unchanged; however, the style has changed dramatically to conform to the new user interface design. 내부 뷰 계층 구조도 약간 다릅니다.The internal view hierarchy is also somewhat different. 이러한 변경 내용은 대부분의 앱에 영향을 주지 않지만 알아야 할 사항이 있습니다.This change won't affect most apps, but it is something to be aware of.

그룹화 된 테이블 스타일Grouped Table Style

그룹화 된 스타일 변경 내용이 아래와 같이 화면 가장자리까지 확장 되어 업데이트 되었습니다.The grouped style changed has updated, with the content now extending to the edges of the screen as shown below:

SeparatorInsetSeparatorInset

이제 UITableVIewCell.SeparatorInset 속성을 설정 하 여 행 구분 기호를 들여쓸 수 있습니다.Row separators can now be indented by setting the UITableVIewCell.SeparatorInset property. 예를 들어, 다음 코드를 사용 하 여 왼쪽 가장자리에서 셀을 들여씁니다.For example, the following code would be used to indent the cells from the left edge:

cell.SeparatorInset = new UIEdgeInsets (0, 50, 0, 0);

이렇게 하면 아래와 같이 들여쓴 셀이 포함 된 테이블 뷰가 생성 됩니다.This produces in the table view with indented cells as shown below:

테이블 단추 스타일Table Button Styles

테이블 뷰에서 사용 되는 다양 한 단추가 모두 변경 되었습니다.The various buttons used in table views have all changed. 다음 스크린샷은 편집 모드의 테이블 뷰를 제공 합니다.The following screenshot presents a table view in editing mode:

추가 제어 변경 내용Additional Control Changes

다른 UIKit 컨트롤도 슬라이더, 스위치 및 steppers를 포함 하 여 변경 되었습니다.Other UIKit controls have changed as well, including sliders, switches and steppers. 이러한 변경 내용은 순수 하 게 표시 됩니다.These changes are purely visual. 자세한 내용은 Apple의 iOS 7 UI 전환 가이드를 참조 하세요.For more information, refer to Apple’s iOS 7 UI Transition Guide.

일반 사용자 인터페이스 변경 내용General User Interface Changes

UIKit의 변경 내용 외에도 iOS 7은 다음을 비롯 하 여 UI에 대 한 다양 한 시각적 변화를 소개 합니다.In addition to the changes in UIKit, iOS 7 introduces a variety of visual changes to the UI, including:

  • 전체 화면 콘텐츠Full Screen Content
  • 막대 모양Bar Appearance
  • 색조 색Tint Color

전체 화면 콘텐츠Full-Screen Content

iOS 7은 응용 프로그램이 전체 화면을 활용할 수 있도록 설계 되었습니다.iOS 7 is designed to let applications take advantage of the entire screen. 이제 뷰 컨트롤러는 상태 표시줄 및 탐색 모음으로 겹쳐진 것으로 표시 됩니다 (상태 표시줄 및 탐색 모음 아래에 표시 되는 것이 아님).View controllers now appear overlapped by a status bar and navigation bar - if one exists - as opposed to appearing below the status and navigation bars.

IOS 7 용 응용 프로그램을 준비할 때 Interface Builder 또는 Xamarin iOS 디자이너를 사용 하 여 하위 뷰를 시각적으로 다시 정렬할 수 있습니다.As you prepare your application for iOS 7, you can realign subviews visually using Interface Builder or the Xamarin iOS Designer. 새 Api 중 하나를 사용 하 여 프로그래밍 방식으로 전체 화면 콘텐츠를 처리할 수도 있습니다.You can also use one of the new APIs to help handle full-screen content programmatically. 이러한 Api는 아래에 도입 되었습니다.These APIs are introduced below.

TopLayoutGuide 및 BottomLayoutGuideTopLayoutGuide and BottomLayoutGuide

TopLayoutGuideBottomLayoutGuide는 뷰가 시작 또는 종료 되는 위치에 대 한 참조로 사용 되므로 다음 예제와 같이 콘텐츠가 반투명 UIKit 막대로 겹치지 않습니다.TopLayoutGuide and BottomLayoutGuide serve as a reference for where views should begin or end, so that the content is not overlapped by a translucent UIKit bar, as in the following example:

이러한 Api를 사용 하 여 화면 위쪽 또는 아래쪽에서 보기의 변위를 계산 하 고 그에 따라 콘텐츠 배치를 조정할 수 있습니다.These APIs can be used to calculate a view's displacement from the top or bottom of the screen, and adjust content placement accordingly:

public override void ViewDidLayoutSubviews ()
{
    base.ViewDidLayoutSubviews ();

    if (UIDevice.CurrentDevice.CheckSystemVersion (7, 0)) { 
        nfloat displacement_y = this.TopLayoutGuide.Length;

        //load subviews with displacement
    }

}

위에 계산 된 값을 사용 하 여 화면 위쪽에서 ImageView의 변위를 설정할 수 있으므로 전체 이미지가 표시 됩니다.We can use the value calculated above to set our ImageView's displacement from the top of the screen, so the whole image is visible:

작업 샘플은 Imageviewer 를 참조 하세요.Refer to the ImageViewer for a working sample.

변위 값은 뷰가 계층에 추가 된 후 동적으로 생성 되므로 ViewDidLoad에서 TopLayoutGuideBottomLayoutGuide 값을 읽으려고 시도 하면 0이 반환 됩니다.The displacement value is generated dynamically after the View has been added to the hierarchy, so attempting to read TopLayoutGuide and BottomLayoutGuide values in ViewDidLoad will return 0. 뷰가 로드 된 후의 값을 계산 합니다 (예: ViewDidLayoutSubviews).Calculate the value after the View has loaded - for example, in the ViewDidLayoutSubviews.

중요

TopLayoutGuideBottomLayoutGuide은 새로운 안전 영역 레이아웃을 위해 iOS 11에서 더 이상 사용 되지 않습니다.TopLayoutGuide and BottomLayoutGuide are deprecated in iOS 11 in favor of the new safe area layout. Apple은 safe 영역 사용이 iOS 11 이전의 iOS 버전과 호환 된다는 것을 언급 했습니다.Apple have stated that using the safe area is compatible with iOS version earlier than iOS 11. 자세한 내용은 iOS 11 용 응용 프로그램 업데이트 가이드를 참조 하세요.For more information, see the Updating your app for iOS 11 guide.

EdgesForExtendedLayoutEdgesForExtendedLayout

이 API는 가로 막대형 반투명도 관계 없이 전체 화면으로 확장 되어야 하는 뷰의 가장자리를 지정 합니다.This API specifies which edges of a view should be extended to full screen, regardless of bar translucency. IOS 7에서 탐색 모음과 도구 모음은 컨트롤러의 뷰 위에 계층화 된 상태로 표시 됩니다. 이전 iOS 버전과 달리 동일한 공간을 차지 하지 않습니다.In iOS 7, navigation bars and toolbars appear layered above the controller’s view - unlike in previous iOS versions, where they didn’t take up the same space. IOS 7 사진 응용 프로그램은 기본 UIViewController.EdgesForExtendedLayoutUIRectEdge.All를 보여 줍니다.The iOS 7 Photos application illustrates the default UIViewController.EdgesForExtendedLayout value, UIRectEdge.All. 이 설정은 보기의 네 가장자리를 모두 콘텐츠로 채우고 겹치는 효과 및 전체 화면 효과를 만듭니다.This setting fills all four edges in the view with content, creating the overlapping and full-screen effect:

이미지를 누르면 막대가 제거 되 고 이미지가 전체 화면으로 표시 됩니다.Tapping the image removes the bars and shows the image full-screen:

전체 화면 콘텐츠가 기본값 이기 때문에 iOS 6 용으로 구성 된 응용 프로그램은 아래 스크린샷에 나와 있는 것 처럼 뷰의 일부가 잘립니다.Because full-screen content is the default, applications configured for iOS 6 will have part of the view clipped, as in the screenshot below:

이 동작에 대 한 UIViewController.EdgesForExtendedLayout 속성을 수정 합니다.Modifying the UIViewController.EdgesForExtendedLayout property adjusts for this behavior. 뷰가 모든 가장자리를 채우지 않도록 지정할 수 있으므로 보기는 탐색 또는 도구 모음이 차지 하는 공간 (모든 방향)에서 콘텐츠를 표시 하지 않도록 합니다.We can specify that the view not fill any edges, so our view will avoid displaying content in the space occupied by navigation or toolbars (at every orientation):

if (UIDevice.CurrentDevice.CheckSystemVersion (7, 0)) { 
    this.EdgesForExtendedLayout = UIRectEdge.None;
}

앱에서 뷰의 위치가 다시 변경 되는 것을 볼 수 있으므로 전체 이미지가 표시 됩니다.In our app, we'll see the view is again repositioned, so the whole image is visible:

TopLayoutGuide/BottomLayoutGuideEdgesForExtendedLayout Api가 비슷한 효과는 있지만 서로 다른 목표를 채우는 것을 의미 합니다.Note that while the effects of the TopLayoutGuide/BottomLayoutGuide and EdgesForExtendedLayout APIs are similar, they are meant to fill different goals. EdgesForExtendedLayout 설정을 기본값에서 변경 하면 iOS 6 용으로 설계 된 응용 프로그램의 잘린 보기가 수정 될 수 있지만, 좋은 iOS 7 디자인은 전체 화면 미적을 준수 하 고 TopLayoutGuideBottomLayoutGuide를 적절히 활용 하 여 전체 화면 보기 환경을 제공 해야 합니다. 사용자를 위한 편안 하 게 조작할 콘텐츠를 배치 합니다.Changing the EdgesForExtendedLayout setting from the default may fix clipped views in applications designed for iOS 6, but a good iOS 7 design should honor the full-screen aesthetic and provide a full-screen viewing experience, relying on TopLayoutGuide and BottomLayoutGuide to properly position content that's meant to be manipulated into a comfortable place for the user.

작업 샘플은 Imageviewer 를 참조 하세요.Refer to the ImageViewer for a working sample.

상태 및 탐색 모음Status and Navigation Bars

상태 표시줄과 탐색 모음은 투명도를 사용 하 여 렌더링 됩니다.The status bar and navigation bars are rendered with transparency. 상태 표시줄은 투명 하 고, 도구 모음 및 탐색 모음은 투명 하 고 흐리게 되어 사용자 인터페이스에서 깊이 느낌을 전달 합니다.Status bars are transparent, while toolbars and navigation bars are translucent and blurred to convey the feeling of depth in the user interface. 다음 스크린샷에서는 이러한 흐림 효과와 투명도를 보여 줍니다. 컬렉션 뷰의 파란색 배경색은 상태와 탐색 막대를 모두 통해 표시 되어 연한 파란색 모양을 제공 합니다.The following screenshot shows this blurring and transparency, where the blue background color of the collection view shows through both the status and navigation bars, giving them a light blue appearance:

상태 표시줄 스타일Status Bar Styles

흐림 효과 및 투명도와 함께 상태 표시줄의 전경에는 밝은 색 또는 어두운 색 (기본값)이 있을 수 있습니다.Along with blurring and transparency, the foreground of a status bar can be either light or dark (dark being the default). 상태 표시줄 스타일은 보기 컨트롤러에서 설정할 수 있습니다.The status bar style can be set from the view controller. 뷰 컨트롤러는 상태 표시줄이 숨겨지거나 표시 되는지 여부를 설정할 수도 있습니다.A view controller can also set whether the status bar is hidden or displayed.

예를 들어 다음 코드는 뷰 컨트롤러의 PreferredStatusBarStyle 메서드를 재정의 하 여 상태 표시줄이 밝은 전경으로 표시 되도록 합니다.For example, the following code overrides the PreferredStatusBarStyle method of a view controller to make the status bar display a light foreground:

public override UIStatusBarStyle PreferredStatusBarStyle ()
{
    return UIStatusBarStyle.LightContent;
}

이렇게 하면 상태 표시줄이 아래와 같이 표시 됩니다.This causes the status bar to appear as below:

뷰 컨트롤러의 코드에서 상태 표시줄을 숨기려면 아래와 같이 PrefersStatusBarHidden를 재정의 합니다.To hide the status bar from the view controller’s code, override PrefersStatusBarHidden, as shown below:

public override bool PrefersStatusBarHidden ()
{
    return true;
}

그러면 상태 표시줄을 숨깁니다.This hides the status bar:

색조 색Tint Color

이제 단추가 chrome 없는 텍스트로 표시 됩니다.Buttons are now displayed as chrome-less text. 텍스트 색은 UIView의 새 TintColor 속성을 사용 하 여 제어할 수 있습니다.The text color can be controlled using the new TintColor property on UIView. TintColor 설정 하면 해당 색을 설정 하는 뷰의 전체 뷰 계층 구조에 색이 적용 됩니다.Setting the TintColor applies the color to the entire view hierarchy for the view that sets it. 앱 전체에 TintColor를 적용 하려면 Window에 설정 합니다.To apply a TintColorthroughout an app, set it on the Window. UIView.TintColorDidChange 메서드를 통해 색조 색이 변경 되는 경우를 감지할 수도 있습니다.You can also detect when the tint color changes via the UIView.TintColorDidChange method.

예를 들어 다음 스크린샷은 탐색 컨트롤러 보기의 색조 색을 자주색으로 변경 하는 경우의 효과를 보여 줍니다.For example, the following screenshot shows the effect of changing the tint color on a navigation controller’s view to purple:

RenderingMode UIImageRenderingMode.AlwaysTemplate으로 설정 된 경우에도 색조 색을 이미지에 적용할 수 있습니다.The tint color can be applied to images as well when the RenderingMode is set to UIImageRenderingMode.AlwaysTemplate.

중요

UIAppearance를 사용 하 여 색조 색을 설정할 수 없습니다.Tint color cannot be set using UIAppearance.

동적 형식Dynamic Type

IOS 7에서 사용자는 시스템 설정에서 텍스트 크기를 지정할 수 있습니다.In iOS 7, the user can specify text size in the system settings. 동적 유형을 사용 하면 글꼴을 동적으로 조정 하 여 크기에 관계 없이 제대로 보이도록 합니다.With dynamic type, the font is adjusted dynamically to look good regardless of the size. 사용자가 제어 하는 크기에 맞게 최적화 된 글꼴을 가져오려면 UIFont.PreferredFontForTextStyle를 사용 해야 합니다.UIFont.PreferredFontForTextStyle should be used to get a font that is optimized for the user-controlled size.

요약Summary

이 문서에서는 iOS 7의 사용자 인터페이스 요소에 대 한 변경 내용을 다룹니다.This article covers the changes to user interface elements in iOS 7. UIKit의 뷰 및 컨트롤에 대 한 몇 가지 변경 내용을 검사 하 여 시각적 변경 내용과 관련 Api의 변경 내용을 모두 강조 표시 합니다.It examines several of the changes made to views and controls in UIKit, highlighting both the visual changes as well as changes to related APIs. 마지막으로 전체 화면 콘텐츠, 새 농도 색 지원 및 동적 형식으로 작업 하는 새로운 Api를 소개 합니다.Finally, it introduces new APIs to work with full screen content, new tint color support, and dynamic type.