Uruchamianie ekranów dla aplikacji platformy Xamarin.iOS

W tym artykule wyjaśniono, jak utworzyć ekran uruchamiania aplikacji dla wszystkich urządzeń z systemem iOS w dowolnej rozdzielczości i orientacji przy użyciu jednego ujednoliconego scenorysu.

Ostrzeżenie

Projektant systemu iOS zostały wycofane w programie Visual Studio 2019 w wersji 16.8 i Visual Studio 2019 dla komputerów Mac w wersji 8.8 i usunięte w programie Visual Studio 2019 w wersji 16.9 i Visual Studio dla komputerów Mac w wersji 8.9. Zalecanym sposobem kompilowania interfejsów użytkownika systemu iOS jest bezpośrednio na komputerze Mac z uruchomionym programem Xcode. Aby uzyskać więcej informacji, zobacz Projektowanie interfejsów użytkownika za pomocą programu Xcode.

Przed systemem iOS 8 utworzenie ekranu uruchamiania dla aplikacji systemu iOS wymagało od dewelopera udostępnienia elementu zawartości obrazu dla każdego z różnych czynników formularzy i rozdzielczości urządzenia, w których aplikacja może działać. Od czasu wydania systemu iOS 8 można jednak użyć jednego ujednoliconego scenorysu do utworzenia ekranu uruchamiania, który wygląda poprawnie we wszystkich przypadkach.

W tym krótkim przewodniku opisano, jak utworzyć ekran uruchamiania z scenorysem dostarczonym domyślnie w nowym projekcie lub przy użyciu scenorysu dodanego ręcznie do istniejącego projektu. Następnie pokazano, jak za pomocą Projektant systemu iOS dodać widok obrazu i etykietę do scenorysu, ustawić ograniczenia dla tych widoków oraz sprawdzić, czy scenorys wygląda prawidłowo dla różnych urządzeń i orientacji.

Zarządzanie ekranami uruchamiania za pomocą scenorysów

W systemie iOS 8 (i nowszym) deweloper może utworzyć specjalny ujednolicony scenorys, aby udostępnić ekran uruchamiania zamiast używać jednego lub większej liczby statycznych obrazów uruchamiania. Podczas tworzenia scenorysu uruchamiania w Projektant systemu iOS użyj klas rozmiarów i automatycznego układu, aby zdefiniować różne układy dla różnych środowisk wyświetlania. Korzystając z klas rozmiarów i automatycznego układu, deweloper może utworzyć pojedynczy ekran uruchamiania, który wygląda dobrze na wszystkich urządzeniach i środowiskach wyświetlania.

Visual Studio dla komputerów Mac

1. W Visual Studio dla komputerów Mac utwórz nowy projekt, wybierając pozycję Plik > nowe rozwiązanie, a następnie wybierając pozycję Aplikacja z jednym widokiem:

   

   • Domyślnie nowy projekt zawiera plik LaunchScreen.storyboard , który definiuje interfejs Launch Screen.
   • Aby zamiast tego dodać scenorys ekranu uruchamiania do istniejącego projektu, kliknij prawym przyciskiem myszy nazwę projektu w okienku rozwiązania i wybierz polecenie Dodaj > nowy plik... a następnie wybierz polecenie Uruchom ekran:

   

   • Nadaj plikowi nazwę LaunchScreen lub inną wybraną nazwę.

2. Skonfiguruj projekt tak, aby używał odpowiedniego scenorysu dla ekranu uruchamiania:

   • Kliknij dwukrotnie plik Info.plist w okienku rozwiązania, aby otworzyć go do edycji.
   • W sekcji Uruchamianie obrazów upewnij się, że pozycja Launch Screen jest ustawiona na nazwę odpowiedniego scenorysu:

   

   • Domyślnie nowy projekt jest skonfigurowany do używania funkcji LaunchScreen.storyboard jako ekranu uruchamiania.

3. Dodaj obraz do katalogu zasobów Assets.xcassets , aby był dostępny do użycia na ekranie uruchamiania. Aby uzyskać więcej informacji, zobacz sekcję Dodawanie obrazów do zestawu obrazów wykazu zasobów w przewodniku Wyświetlanie obrazu .

4. Otwórz plik LaunchScreen.storyboard do edycji, klikając go dwukrotnie w okienku rozwiązania.

5. Wybierz urządzenie i orientację, na którym ma być wyświetlany podgląd scenorysu Launch Screen w Projektant systemu iOS. Otwórz panel wyboru urządzenia na dolnym pasku narzędzi i wybierz pozycję i Telefon 4S i Portret.

   

   • Należy pamiętać, że wybranie urządzenia i orientacji zmienia tylko sposób wyświetlania podglądu projektu przez system iOS Projektant. Niezależnie od dokonanego tutaj wyboru nowo dodane ograniczenia są stosowane we wszystkich urządzeniach i orientacjach, chyba że przycisk Edytuj cechy został użyty do określenia inaczej.

6. Ustaw kolor tła głównego widoku kontrolera widoku. Wybierz widok, klikając w środku kontrolera widoku i dostosuj kolor tła przy użyciu okienka właściwości:

   

7. Dodaj widok obrazu do ekranu uruchamiania i ustaw jego źródłowy obraz:

   • Przeciągnij widok obrazu z okienka przybornika do środka widoku.
   • Po wybraniu widoku obrazu w sekcji Widżet okienka właściwości Obraz ustaw właściwość Image Set już dodany do wykazu zasobów Assets.xcassets. Zmień położenie i rozmiar widoku obrazu zgodnie z potrzebami:

   

8. Dodaj etykietęponiżej widoku obrazu i użyj okienka właściwości, aby ustawić jego atrybuty:

   

9. Przejdź do trybu edycji ograniczeń przy użyciu przycisku po prawej stronie na pasku narzędzi ograniczeń:

   

10. Dodaj ograniczenia do widoku obrazu, ustawiając jego wysokość i szerokość oraz wyśrodkowanie w poziomie i w pionie:

    

    • Aby uzyskać więcej informacji na temat dodawania ograniczeń, zobacz Auto layout with the Xamarin Projektant for iOS (Automatyczne układ za pomocą platformy Xamarin Projektant dla systemu iOS).

11. Dodaj ograniczenia do etykiety, wyśrodkując ją w poziomie, nadając jej wysokość i szerokość, a następnie ustawiając ją na stałej odległości w pionie z widoku obrazu:

    

12. Przetestuj inne urządzenia i orientacje, aby sprawdzić, czy projekt wygląda zgodnie z oczekiwaniami we wszystkich scenariuszach. W przypadkach, gdy zmiany muszą zostać wprowadzone dla określonego urządzenia lub orientacji, użyj przycisku Edytuj cechy , aby dodać ograniczenia dla określonych klas rozmiarów:

    

13. Zapisz zmiany w scenorysie. Uruchom aplikację w symulatorze lub urządzeniu, a ekran uruchamiania będzie widoczny podczas uruchamiania aplikacji.

Program Visual Studio

1. Tworzenie nowego projektu. W programie Visual Studio wybierz pozycję File New Project Visual C# > i Telefon & iPad iOS > App (Xamarin):>>>

   

   Wybierz szablon Aplikacji z pojedynczym widokiem, a następnie kliknij przycisk OK:

   

2. Jeśli plik LaunchScreen.xib zasobów > istnieje w Eksplorator rozwiązań, usuń go, klikając go prawym przyciskiem myszy i wybierając polecenie Usuń. Ten plik zostanie zastąpiony scenorysem w następnym kroku.

3. Utwórz scenorys do użycia jako ekran uruchamiania. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt i wybierz polecenie Dodaj > nowy element... a następnie pozycję Pusty scenorys. Nadaj tej scenorysowi nazwę LaunchScreen.storyboard, a następnie kliknij pozycję Dodaj:

   

4. Skonfiguruj projekt tak, aby używał ekranu LaunchScreen.storyboard jako scenorysu Launch Screen:

   • Kliknij dwukrotnie plik Info.plist w Eksplorator rozwiązań, aby otworzyć go do edycji.
   • Na karcie Zasoby wizualne ustaw pozycję Launch Screen na LaunchScreen.

   

5. Dodaj obraz do wykazu zasobów w projekcie, aby był dostępny do użycia na ekranie uruchamiania:

   • W Eksplorator rozwiązań kliknij prawym przyciskiem myszy pozycję Wykazy zasobów i wybierz pozycję Dodaj wykaz zasobów. Nadaj nazwę nowym zasobom wykazu zasobów:

   

   • Dodaj nowy zestaw obrazów do wykazu zasobów zgodnie z opisem w sekcji Dodawanie obrazów do zestawu obrazów wykazu zasobów w przewodniku Wyświetlanie obrazu.

6. Otwórz plik LaunchScreen.storyboard do edycji, klikając go dwukrotnie w Eksplorator rozwiązań.

   • Aby edytować plik Scenorysu, program Visual Studio wymaga aktywnego połączenia z hostem kompilacji dla komputerów Mac. Aby uzyskać szczegółowe informacje, zobacz przewodnik Połączenie do komputera Mac.

7. Wybierz urządzenie i orientację, na którym ma być wyświetlany podgląd scenorysu Launch Screen w Projektant systemu iOS. Otwórz panel wyboru urządzenia na dolnym pasku narzędzi i wybierz pozycję i Telefon 4S i Portret:

   

   • Należy pamiętać, że wybranie urządzenia i orientacji zmienia tylko sposób wyświetlania podglądu projektu przez system iOS Projektant. Niezależnie od dokonanego tutaj wyboru nowo dodane ograniczenia są stosowane we wszystkich urządzeniach i orientacjach, chyba że przycisk Edytuj cechy został użyty do określenia inaczej.

8. Dodaj kontroler widoku do scenorysu, przeciągając go z przybornika na powierzchnię projektową:

   

9. Ustaw kolor tła głównego widoku kontrolera widoku. Wybierz widok, klikając w środku kontrolera widoku i dostosuj kolor tła przy użyciu okna Właściwości:

   

10. Dodaj widok obrazu do ekranu uruchamiania i ustaw jego źródłowy obraz:

    • Przeciągnij widok obrazu z przybornika do środka widoku.
    • Po wybraniu widoku obrazu w sekcji Widżet okna Właściwości ustaw właściwość Obraz na zestaw obrazów już dodany do wykazu zasobów. Zmień położenie i rozmiar widoku obrazu zgodnie z potrzebami:

    

11. Dodaj etykietę poniżej widoku obrazu:

    • Przeciągnij etykietę z przybornika na powierzchnię projektową, umieszczając ją poniżej widoku obrazu.
    • Ustaw atrybuty etykiety przy użyciu okna Właściwości:

    

12. Przejdź do trybu edycji ograniczeń przy użyciu przycisku po prawej stronie na pasku narzędzi ograniczeń:

    

13. Dodaj ograniczenia do widoku obrazu, ustawiając jego wysokość i szerokość oraz wyśrodkowanie w poziomie i w pionie:

    

    • Aby uzyskać informacje na temat dodawania ograniczeń, zobacz Auto layout with the Xamarin Projektant for iOS (Automatyczne układ za pomocą Projektant platformy Xamarin dla systemu iOS).

14. Dodaj ograniczenia do etykiety, wyśrodkując ją w poziomie, nadając jej wysokość i szerokość, a następnie ustawiając ją na stałej odległości w pionie z widoku obrazu:

    

15. Przetestuj inne urządzenia i orientacje, aby sprawdzić, czy projekt wygląda zgodnie z oczekiwaniami we wszystkich scenariuszach. W przypadkach, gdy zmiany muszą zostać wprowadzone dla określonego urządzenia lub orientacji, użyj przycisku Edytuj cechy , aby dodać ograniczenia dla określonych klas rozmiarów:

    

16. Zapisz zmiany w scenorysie. Uruchom aplikację w symulatorze lub urządzeniu, a ekran uruchamiania będzie widoczny podczas uruchamiania aplikacji.

Uwaga

Scenorys używany jako ekran uruchamiania musi zawierać tylko proste, wbudowane elementy interfejsu użytkownika i nie może wykonywać żadnych obliczeń ani pochodzić z klasy niestandardowej.

Aby uzyskać więcej informacji na temat tworzenia ekranu uruchamiania za pomocą ujednoliconego scenorysu, zobacz sekcję Dynamiczne ekrany uruchamiania w przewodniku Unified Storyboards .

Migrowanie do scenorysów ekranu uruchamiania

Visual Studio dla komputerów Mac

Podczas aktualizowania istniejącej aplikacji do używania scenorysów dla ekranów uruchamiania kliknij prawym przyciskiem myszy nazwę projektu w Eksplorator rozwiązań i wybierz polecenie Dodaj>nowy plik.... Wybierz pozycję Ekran uruchamiania systemu iOS>i kliknij przycisk Nowy:

Następnie kliknij Info.plist dwukrotnie plik w Eksplorator rozwiązań, aby otworzyć go do edycji. W obszarze Launch Screen (Ekran uruchamiania) wybierz nowy plik Scenorysu utworzony powyżej.

Aby użyć nowego scenorysu jako ekranu uruchamiania, wykonaj następujące czynności:

1. Info.plist Kliknij dwukrotnie plik w Eksplorator rozwiązań, aby otworzyć go do edycji.

2. Przewiń do sekcji Universal Launch Images w edytorze, otwórz listę rozwijaną Launch Screen i wybierz nazwę scenorysu utworzonego powyżej:

   

Program Visual Studio

1. Kliknij prawym przyciskiem myszy nazwę projektu w Eksplorator rozwiązań i wybierz polecenie Dodaj>nowy plik...:

   

2. Wprowadź nazwę ekranu uruchamiania i kliknij przycisk Dodaj :

   

3. W Eksplorator rozwiązań kliknij dwukrotnie nowo utworzony plik scenorysu, aby otworzyć go do edycji.

4. Upewnij się, że klasa Size ma ustawioną wartość any:any i View As is Generic:

   

5. Ustawianie ekranu uruchamiania z poziomu klas rozmiarów, prostych elementów interfejsu użytkownika (takich jak UIImageView) i obrazów uwzględnionych w pakiecie aplikacji:

   

6. Zapisz zmiany w scenorysie.

Linki powiązane

• Ujednolicone scenorysy
• Podstawy narzędzia iOS Designer
• Dodawanie obrazów do zestawu obrazów wykazu zasobów
• Automatyczne układ przy użyciu Projektant platformy Xamarin dla systemu iOS
• Wskazówki dotyczące interfejsu człowieka: ekran uruchamiania