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

iOS 7에는 다양한 사용자 인터페이스 변경 내용이 도입되었습니다. 이 문서에서는 컨트롤의 시각적 모양과 새 디자인을 지원하는 API 모두에서 더 큰 변경 내용 중 일부를 강조 표시합니다.

iOS 7은 크롬을 통해 콘텐츠에 중점을 둡니다. iOS 7의 사용자 인터페이스 요소는 불필요한 테두리, 상태 막대 및 탐색 모음과 같은 특성을 제거하여 크롬을 강조하지 않고 콘텐츠 보기에 사용되는 화면 공간의 양을 줄입니다. iOS 7에서 콘텐츠는 전체 화면을 사용하도록 설계되었습니다.

iOS 7에는 단추 테두리와 같은 특성 대신 사용자 인터페이스 요소를 구분하는 데 색이 사용됩니다. 이제 탐색 모음 및 상태 막대와 같은 많은 요소가 흐리게 표시되고 반투명하거나 투명하며 콘텐츠 보기가 그 아래에 영역을 사용합니다. 이러한 콘텐츠 보기는 흐리게 표시된 막대를 통해 렌더링되어 사용자 인터페이스의 깊이감을 전달합니다.

이 문서에서는 iOS 7의 사용자 인터페이스 요소에 대한 몇 가지 변경 내용과 새 사용자 인터페이스 디자인과 관련된 다양한 API에 대해 설명합니다.

변경 내용 보기 및 제어

UIKit의 모든 보기는 iOS 7의 새로운 모양과 느낌을 준수합니다. 이 섹션에서는 이러한 보기의 일부 변경 내용과 새 UI를 지원하도록 변경된 관련 API를 강조 표시합니다.

UIButton

클래스에서 UIButton 만든 단추는 이제 다음과 같이 기본적으로 배경이 없는 테두리가 없습니다.

스타일은 UIButtonType.RoundedRect 더 이상 사용되지 않습니다. iOS 7 UIButtonType.RoundedRect 에서 사용되는 경우 위와 같이 배경이나 표시되는 가장자리가 없는 기본 단추 스타일을 생성하는 사용이 발생 UIButtonType.System 합니다.

UIBarButtonItem

UIButton마찬가지로 막대 단추도 테두리가 없으므로 기본값은 아래 표시된 새 UIBarButtonItemStyle.Plain 스타일입니다.

또한 스타일은 UIBarButtonItemStyle.Bordered 더 이상 사용되지 않습니다. iOS 7에서 설정 UIBarButtonItemStyle.Bordered 하면 스타일이 UIBarButtonItemStyle.Plain 사용됩니다.

스타일은 UIBarButtonItemStyle.Done 더 이상 사용되지 않습니다. 그러나 다음과 같이 굵은 텍스트 스타일만 사용하여 테두리 없는 단추도 만듭니다.

UIAlertView

새로운 iOS 7 모양과 느낌에 대한 스타일 변경 외에도 경고 보기는 더 이상 하위 보기를 통한 사용자 지정을 지원하지 않습니다. UIAlertView 상속되지만 UIViewa를 UIAlertView 호출 AddSubview 해도 아무런 효과가 없습니다. 예를 들어, 다음 코드를 고려하세요.

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 ();
});

그러면 아래와 같이 하위 보기가 무시되는 표준 경고 보기가 생성됩니다.

참고: UIAlertView는 iOS 8에서 더 이상 사용되지 않습니다. iOS 8 이상에서 경고 보기를 사용하는 방법에 대한 경고 컨트롤러 레시피를 확인합니다.

UISegmentedControl

iOS 7의 분할된 컨트롤은 투명하며 색조 색을 지원합니다. 색조 색은 텍스트 및 테두리 색에 사용됩니다. 세그먼트를 선택하면 아래와 같이 선택한 세그먼트를 강조 표시하는 데 사용되는 색조 색을 사용하여 배경과 텍스트 간에 색이 교환됩니다.

UISegmentedControlStyle 또한 iOS 7에서는 더 이상 사용되지 않습니다.

선택기 보기

선택기 보기에 대한 API는 크게 변경되지 않습니다. 그러나 이제 iOS 7 디자인 지침은 이전 iOS 버전에서와 같이 화면 아래쪽에서 또는 탐색 컨트롤러의 스택에 푸시된 새 컨트롤러를 통해 애니메이션된 입력 보기가 아닌 인라인으로 상태 선택 보기가 표시되어야 합니다. 시스템 일정 앱에서 볼 수 있습니다.

UISearchDisplayController

이제 속성이 true로 설정되면 검색 창이 탐색 모음 UISearchDisplayController.DisplaysSearchBarInNavigationBar 내에 표시됩니다. 기본값인 false로 설정하면 검색 컨트롤러가 표시될 때 탐색 모음이 숨겨집니다.

다음 스크린샷은 다음 내의 검색 창을 보여줍니다.UISearchDisplayController

UITableView

주변의 UITableView API는 기본 변경되지 않습니다. 그러나 새 사용자 인터페이스 디자인을 준수하도록 스타일이 크게 변경되었습니다. 내부 뷰 계층 구조도 약간 다릅니다. 이 변경 내용은 대부분의 앱에 영향을 주지 않지만 주의해야 할 사항입니다.

그룹화된 표 스타일

변경된 그룹화된 스타일이 업데이트되었으며, 콘텐츠가 아래와 같이 화면 가장자리까지 확장되었습니다.

SeparatorInset

이제 속성을 설정하여 행 구분 기호를 들여쓰기 UITableVIewCell.SeparatorInset 할 수 있습니다. 예를 들어 다음 코드는 왼쪽 가장자리에서 셀을 들여쓰는 데 사용됩니다.

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

아래와 같이 들여쓰기된 셀이 있는 표 보기에서 생성됩니다.

표 단추 스타일

테이블 뷰에 사용되는 다양한 단추가 모두 변경되었습니다. 다음 스크린샷은 편집 모드의 테이블 뷰를 제공합니다.

추가 컨트롤 변경 내용

슬라이더, 스위치 및 스테퍼를 포함하여 다른 UIKit 컨트롤도 변경되었습니다. 이러한 변경 내용은 순전히 시각적입니다. 자세한 내용은 Apple의 iOS 7 UI 전환 가이드를 참조하세요.

일반 사용자 인터페이스 변경 내용

iOS 7은 UIKit의 변경 내용 외에도 다음을 포함하여 UI에 다양한 시각적 변경 내용을 도입합니다.

• 전체 화면 콘텐츠
• 막대 모양
• 색조 색

전체 화면 콘텐츠

iOS 7은 애플리케이션이 전체 화면을 활용할 수 있도록 설계되었습니다. 이제 보기 컨트롤러는 상태 및 탐색 모음 아래에 표시되는 것과 달리 상태 막대 및 탐색 모음(있는 경우)에 의해 겹쳐 표시됩니다.

iOS 7용 애플리케이션을 준비할 때 인터페이스 작성기 또는 Xamarin iOS 디자이너를 사용하여 하위 보기를 시각적으로 다시 정렬할 수 있습니다. 새 API 중 하나를 사용하여 프로그래밍 방식으로 전체 화면 콘텐츠를 처리할 수도 있습니다. 이러한 API는 아래에 도입되어 있습니다.

TopLayoutGuide 및 BottomLayoutGuide

TopLayoutGuide 및 다음 예제와 BottomLayoutGuide 같이 콘텐츠가 반투 UIKit 명 막대에 의해 겹치지 않도록 뷰가 시작되거나 끝나야 하는 위치에 대한 참조 역할을 합니다.

이러한 API를 사용하여 화면 위쪽 또는 아래쪽에서 보기의 변위를 계산하고 그에 따라 콘텐츠 배치를 조정할 수 있습니다.

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

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

        //load subviews with displacement
    }

}

위에서 계산한 값을 사용하여 화면 위쪽에서 '의 변위를 설정 ImageView하여 전체 이미지가 표시되도록 할 수 있습니다.

작업 샘플은 ImageViewer 를 참조하세요.

뷰가 계층 구조에 추가된 후 변위 값이 동적으로 생성되므로 읽기 TopLayoutGuideBottomLayoutGuide 를 시도하고 값을 ViewDidLoad 반환하면 0이 반환됩니다. 뷰가 로드된 후의 값(예: )을 ViewDidLayoutSubviews계산합니다.

Important

TopLayoutGuide 새로운 BottomLayoutGuide 안전 영역 레이아웃을 위해 iOS 11에서는 더 이상 사용되지 않습니다. Apple은 안전 영역을 사용하는 것이 iOS 11 이전 버전의 iOS와 호환된다는 사실을 밝혔습니다. 자세한 내용은 iOS 11용 앱 업데이트 가이드를 참조하세요.

EdgesForExtendedLayout

이 API는 막대 반투명성에 관계없이 전체 화면으로 확장해야 하는 보기의 가장자리를 지정합니다. iOS 7에서는 이전 iOS 버전과 달리 동일한 공간을 차지하지 않은 탐색 모음과 도구 모음이 컨트롤러 보기 위에 계층화된 상태로 표시됩니다. iOS 7 사진 애플리케이션은 기본값 UIViewController.EdgesForExtendedLayoutUIRectEdge.All을 보여 줍니다. 이 설정은 보기의 네 모서리를 모두 콘텐츠로 채우며 겹치고 전체 화면 효과를 만듭니다.

이미지를 탭하면 막대가 제거되고 이미지 전체 화면이 표시됩니다.

전체 화면 콘텐츠가 기본값이므로 iOS 6용으로 구성된 애플리케이션은 아래 스크린샷과 같이 보기의 일부를 잘립니다.

속성을 수정하면 UIViewController.EdgesForExtendedLayout 이 동작이 조정됩니다. 보기가 가장자리를 채우지 않도록 지정할 수 있으므로 모든 방향에서 탐색 또는 도구 모음이 차지하는 공간에 콘텐츠가 표시되지 않도록 할 수 있습니다.

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

앱에서 보기의 위치가 다시 변경되어 전체 이미지가 표시됩니다.

API와 EdgesForExtendedLayout API의 TopLayoutGuide/BottomLayoutGuide 효과는 비슷하지만 서로 다른 목표를 채우기 위한 것입니다. EdgesForExtendedLayout 기본값에서 설정을 변경하면 iOS 6용으로 디자인된 애플리케이션에서 잘린 보기가 수정될 수 있지만, 좋은 iOS 7 디자인은 전체 화면 미학을 존중하고 전체 화면 보기 환경을 제공해야 하며, 사용자가 편안하게 조작할 수 있는 콘텐츠에 TopLayoutGuide 의존하여 BottomLayoutGuide 적절한 위치를 지정해야 합니다.

작업 샘플은 ImageViewer 를 참조하세요.

상태 및 탐색 모음

상태 막대 및 탐색 모음은 투명도로 렌더링됩니다. 상태 표시줄은 투명하고 도구 모음과 탐색 모음은 반투명하고 흐리게 표시되어 사용자 인터페이스의 깊이감을 전달합니다. 다음 스크린샷은 컬렉션 보기의 파란색 배경색이 상태 및 탐색 모음을 통해 표시되어 연한 파란색 모양을 제공하는 이 흐리게 및 투명도를 보여 줍니다.

상태 표시줄 스타일

흐리기 및 투명도와 함께 상태 막대의 전경은 밝거나 어둡게(기본값이 되는 어둡게) 될 수 있습니다. 상태 막대 스타일은 뷰 컨트롤러에서 설정할 수 있습니다. 보기 컨트롤러는 상태 표시줄을 숨길지 표시할지 여부를 설정할 수도 있습니다.

예를 들어 다음 코드는 뷰 컨트롤러의 메서드를 재정 PreferredStatusBarStyle 의하여 상태 막대가 밝은 전경을 표시하도록 합니다.

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

이렇게 하면 상태 막대가 다음과 같이 표시됩니다.

뷰 컨트롤러의 코드에서 상태 막대를 숨기려면 아래와 같이 재정PrefersStatusBarHidden의합니다.

public override bool PrefersStatusBarHidden ()
{
    return true;
}

그러면 상태 막대가 숨겨지게 됩니다.

색조 색

이제 단추가 크롬 없는 텍스트로 표시됩니다. 에 새 TintColor 속성을 UIView사용하여 텍스트 색을 제어할 수 있습니다. 설정을 지정하면 TintColor 색을 설정하는 뷰의 전체 뷰 계층 구조에 색이 적용됩니다. 앱 전체에 적용 TintColor하려면 앱을 설정합니다 Window. 메서드를 통해 색조 색이 변경되는 시기를 감지할 수도 있습니다 UIView.TintColorDidChange .

예를 들어 다음 스크린샷은 탐색 컨트롤러 보기에서 색조 색을 자주색으로 변경하는 효과를 보여줍니다.

색조 색은 이미지에 RenderingModeUIImageRenderingMode.AlwaysTemplate적용할 수 있습니다.

Important

를 사용하여 색조 색을 UIAppearance설정할 수 없습니다.

동적 형식

iOS 7에서 사용자는 시스템 설정에서 텍스트 크기를 지정할 수 있습니다. 동적 형식을 사용하면 글꼴이 크기에 관계없이 멋지게 보이도록 동적으로 조정됩니다. UIFont.PreferredFontForTextStyle 는 사용자가 제어하는 크기에 최적화된 글꼴을 가져오는 데 사용해야 합니다.

요약

이 문서에서는 iOS 7의 사용자 인터페이스 요소에 대한 변경 내용을 설명합니다. UIKit의 보기 및 컨트롤에 대한 몇 가지 변경 내용을 검사하여 시각적 변경 내용과 관련 API의 변경 내용을 모두 강조 표시합니다. 마지막으로 전체 화면 콘텐츠, 새 색조 색 지원 및 동적 형식을 사용하는 새로운 API를 소개합니다.

관련 링크

• ImageViewer(샘플)