Udostępnij za pomocą

Aktualizacje projektu wizualnego w systemie iOS 11

W systemie iOS 11 firma Apple wprowadziła nowe zmiany wizualne, w tym aktualizacje paska nawigacyjnego, paska wyszukiwania i widoków tabeli. Wprowadzono dodatkowe ulepszenia w celu zapewnienia większej elastyczności nad marginesami i zawartości pełnoekranowej. Te zmiany zostały omówione w tym przewodniku.

Aby uzyskać informacje dotyczące projektowania dla telefonu iPhone X, obejrzyj wideo Projektowanie firmy Apple dla iPhone'a X .

Zestaw interfejsu użytkownika

Paski UIKit zostały dostosowane w systemie iOS 11, aby były bardziej dostępne dla użytkowników końcowych.

Jedną z takich zmian jest nowy ekran HUD, który pojawia się, gdy użytkownik długo naciska na element paska. Aby to włączyć, ustaw largeContentSizeImage właściwość na UIBarItem i dodaj większy obraz za pośrednictwem wykazu zasobów:

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

System iOS 11 wprowadził nowe funkcje, aby ułatwić odczytywanie tytułów paska nawigacyjnego. Aplikacje mogą wyświetlać ten większy tytuł, przypisując PrefersLargeTitles właściwość do wartości true:

NavigationController.NavigationBar.PrefersLargeTitles = true;

Ustawienie większych tytułów w aplikacji sprawia, że wszystkie tytuły pasków nawigacji w aplikacji są większe, jak pokazano na poniższym zrzucie ekranu:

Duży tytuł nawigacji

Aby kontrolować, kiedy duży tytuł jest wyświetlany na pasku nawigacyjnym, ustaw LargeTitleDisplayMode element w elemencie nawigacji na Always, Neverlub Automatic.

Kontroler wyszukiwania

System iOS 11 ułatwił dodawanie kontrolera wyszukiwania bezpośrednio do paska nawigacyjnego. Po utworzeniu kontrolera wyszukiwania dodaj go do paska nawigacyjnego SearchController za pomocą właściwości :

NavigationItem.SearchController = searchController;

Duży tytuł nawigacji z paskiem wyszukiwania

W zależności od funkcjonalności aplikacji możesz lub nie chcesz, aby pasek wyszukiwania był ukrywany, gdy użytkownik przewija listę. Można to dostosować za pomocą HidesSearchBarWhenScrolling właściwości .

Marginesy

Firma Apple utworzyła nową właściwość — directionalLayoutMargins która może służyć do ustawiania przestrzeni między widokami i widokami podrzędnymi. Używaj directionalLayoutMargins z zestawami leading lub trailing . Niezależnie od tego, czy system jest językiem od lewej do prawej, czy od prawej do lewej, odstępy w aplikacji są odpowiednio ustawiane przez system iOS.

W systemie iOS 10 i wcześniej wszystkie widoki miały minimalny rozmiar marginesu, do którego zostaną wyrównane. System iOS 11 wprowadził opcję zastąpienia tej opcji przy użyciu polecenia ViewRespectsSystemMinimumLayoutMargins. Na przykład ustawienie tej właściwości na wartość false umożliwia dostosowanie zestawów krawędzi do zera:

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

Obraz przedstawiający margines z zerowym zestawem w systemie ios 11

Zawartość pełnoekranowa

System iOS 7 wprowadzono topLayoutGuide i bottomLayoutGuide jako sposób ograniczenia widoków, aby nie były ukryte przez paski UIKit i znajdują się w widocznym obszarze ekranu. Zostały one uznane za przestarzałe w systemie iOS 11 na rzecz bezpiecznego obszaru.

Bezpieczny obszar to nowy sposób myślenia o widocznej przestrzeni aplikacji i sposobie dodawania ograniczeń między widokiem a widokiem super. Rozważmy na przykład następujący obraz:

Przewodnik po bezpiecznym obszarze a u góry i u dołu

Wcześniej, jeśli dodano widok i chciał, aby był widoczny w zielonym obszarze powyżej, należy ograniczyć go do dołu TopLayoutGuide i góry BottomLayoutGuideobiektu . W systemie iOS 11 należy ograniczyć go do góry i dolnej części obszaru bezpiecznego. Oto przykład:

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

Widok tabeli

Element UITableView miał wiele małych, ale znaczących zmian w systemie iOS 11.

Domyślnie nagłówki, stopki i komórki mają teraz automatyczne rozmiary na podstawie ich zawartości. Aby zrezygnować z tego zachowania automatycznego określania rozmiaru EstimatedRowHeight, ustaw wartość , EstimatedSectionHeaderHeightlub EstimatedSectionFooterHeight na zero.

Jednak w niektórych okolicznościach (na przykład podczas dodawania kontrolki UITableViewController podczas korzystania z istniejących scenorysów w narzędziu Interface Builder) może być konieczne ręczne włączenie komórek samodzielnego określania rozmiaru. W tym celu upewnij się, że ustawiono następujące właściwości w widoku tabeli odpowiednio dla komórek, nagłówków i stopek:

// 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;

System iOS 11 rozszerzył funkcje akcji wierszy. UISwipeActionsConfiguration Wprowadzono funkcję definiowania zestawu akcji, które powinny mieć miejsce, gdy użytkownik przesuwa palcem w obu kierunkach w wierszu w widoku tabeli. To zachowanie jest podobne do zachowania natywnego Mail.app. Aby uzyskać więcej informacji, zobacz przewodnik Akcje wierszy .

Widoki tabel obsługują przeciąganie i upuszczanie w systemie iOS 11. Aby uzyskać więcej informacji, zobacz przewodnik Przeciąganie i upuszczanie.

  • Last updated on