iOS 11의 시각적 디자인 업데이트

iOS 11에서 Apple은 탐색 모음, 검색 창 및 테이블 보기에 대한 업데이트를 포함하여 새로운 시각적 변경 내용을 도입했습니다. 또한 여백 및 전체 화면 콘텐츠에 대한 유연성을 높일 수 있도록 개선되었습니다. 이러한 변경 내용은 이 가이드에서 다룹니다.

i전화 X용 디자인에 대한 자세한 내용은 Apple's Designing for i전화 X 비디오를 시청하세요.

UIKit

UIKit 막대는 최종 사용자가 더 쉽게 액세스할 수 있도록 iOS 11에서 조정되었습니다.

이러한 변경 사항 중 하나는 사용자가 막대 항목을 길게 누를 때 나타나는 새로운 HUD 디스플레이입니다. 이를 사용하도록 설정하려면 속성을 설정하고 largeContentSizeImageUIBarItem 자산 카탈로그를 통해 더 큰 이미지를 추가합니다.

barItem.LargeContentSizeImage = UIImage.FromBundle("AccessibleImage");

iOS 11에는 탐색 모음 제목을 더 쉽게 읽을 수 있는 새로운 기능이 도입되었습니다. 앱은 속성을 true에 할당하여 이 더 큰 제목을 PrefersLargeTitles 표시할 수 있습니다.

NavigationController.NavigationBar.PrefersLargeTitles = true;

앱에서 더 큰 제목을 설정하면 다음 스크린샷과 같이 앱 전체의 모든 탐색 모음 제목이 더 크게 표시됩니다.

Large navigation title

탐색 모음에 큰 제목이 표시되는 시기를 제어하려면 탐색 항목AlwaysLargeTitleDisplayMode 이름을 < Nevera0/> 또는 Automatic.로 설정합니다.

검색 컨트롤러

iOS 11을 사용하면 검색 컨트롤러를 탐색 모음에 직접 쉽게 추가할 수 있습니다. 검색 컨트롤러를 만든 후에는 속성을 사용하여 탐색 모음에 SearchController 추가합니다.

NavigationItem.SearchController = searchController;

Large navigation title with search bar

앱의 기능에 따라 사용자가 목록을 스크롤할 때 검색 창이 숨겨지도록 할 수도 있고 원하지 않을 수도 있습니다. 속성을 사용하여 HidesSearchBarWhenScrolling 조정할 수 있습니다.

여백

Apple은 뷰와 하위 뷰 사이의 공간을 설정하는 데 사용할 수 있는 새 속성을 directionalLayoutMargins 만들었습니다. 세트와 함께 leading 사용하거나 trailing 설정에서 사용합니다directionalLayoutMargins. 시스템이 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽 언어인지에 관계없이 앱의 간격은 iOS에 의해 적절하게 설정됩니다.

iOS 10 이전의 모든 보기에는 정렬할 최소 여백 크기가 있었습니다. iOS 11에서는 .를 사용하여 ViewRespectsSystemMinimumLayoutMargins재정의하는 옵션을 도입했습니다. 예를 들어 이 속성을 false로 설정하면 에지 인셋을 0으로 조정할 수 있습니다.

ViewRespectsSystemMinimumLayoutMargins = false;
View.LayoutMargins = UIEdgeInsets.Zero;

Image showing margin with zero inset in ios 11

전체 화면 콘텐츠

iOS 7 topLayoutGuidebottomLayoutGuide UIKit 막대에 의해 숨겨지지 않고 화면의 표시 영역에 있도록 보기를 제한하는 방법으로 도입되었습니다. 이는 안전 영역을 위해 iOS 11에서 더 이상 사용되지 않습니다.

안전 영역은 애플리케이션의 표시되는 공간과 보기와 슈퍼 뷰 간에 제약 조건이 추가되는 방식에 대한 새로운 사고 방식입니다. 예를 들어 다음과 같은 이미지를 생각해 보세요.

Safe area vs Top and bottom layout guide

이전에 보기를 추가하고 위의 녹색 영역에 표시되도록 하려면 뷰를 아래쪽TopLayoutGuide위쪽BottomLayoutGuide으로 제한했습니다. iOS 11에서는 대신 금고 영역의 위쪽아래쪽으로 제한합니다. 이러한 예제는 다음과 같습니다.

var safeGuide = View.SafeAreaLayoutGuide;
imageView.TopAnchor.ConstraintEqualTo(safeGuide.TopAnchor).Active = true;
safeGuide.BottomAnchor.ConstraintEqualTo(imageView.BottomAnchor).Active = true;

테이블 보기

UITableView에는 iOS 11에서 작지만 중요한 변경 내용이 많이 있습니다.

기본적으로 머리글, 바닥글 및 셀은 이제 내용에 따라 자동으로 크기가 조정됩니다. 이 자동 크기 조정 동작을 옵트아웃하려면 0 EstimatedRowHeightEstimatedSectionHeaderHeightEstimatedSectionFooterHeight 으로 설정합니다.

그러나 인터페이스 작성기에서 기존 Storyboard를 사용할 때 UITableViewController를 추가하는 경우와 같은 일부 상황에서는 자체 크기 조정 셀을 수동으로 사용하도록 설정해야 할 수 있습니다. 이렇게 하려면 셀, 머리글 및 바닥글에 대한 표 보기에서 각각 다음 속성을 설정해야 합니다.

// Cells
TableView.RowHeight = UITableView.AutomaticDimension;
TableView.EstimatedRowHeight = UITableView.AutomaticDimension;

// Header
TableView.SectionHeaderHeight = UITableView.AutomaticDimension;
TableView.EstimatedSectionHeaderHeight = 40f;

//Footer
TableView.SectionFooterHeight = UITableView.AutomaticDimension;
TableView.EstimatedSectionFooterHeight = 40f;

iOS 11은 행 작업의 기능을 확장했습니다. UISwipeActionsConfiguration 는 사용자가 테이블 보기의 행에서 어느 방향으로든 살짝 밀 때 수행해야 하는 작업 집합을 정의하기 위해 도입되었습니다. 이 동작은 네이티브 Mail.app 동작과 비슷합니다. 자세한 내용은 행 작업 가이드를 참조하세요.

테이블 뷰는 iOS 11에서 끌어서 놓기 지원을 제공합니다. 자세한 내용은 끌어서 놓기 가이드를 참조하세요.