Papan Cerita Terpadu di Xamarin.iOS

iOS 8 menyertakan mekanisme baru yang lebih sederhana untuk digunakan untuk membuat antarmuka pengguna — papan cerita terpadu. Dengan satu papan cerita untuk mencakup semua ukuran layar perangkat keras yang berbeda, tampilan yang cepat dan responsif dapat dibuat dengan gaya "design-once, use-many".

Karena pengembang tidak perlu lagi membuat papan cerita terpisah dan spesifik untuk perangkat i Telepon dan iPad, mereka memiliki fleksibilitas untuk merancang aplikasi dengan antarmuka umum dan kemudian menyesuaikan antarmuka tersebut untuk kelas ukuran yang berbeda. Dengan cara ini, aplikasi dapat disesuaikan dengan kekuatan setiap faktor bentuk dan setiap antarmuka pengguna dapat disetel untuk memberikan pengalaman terbaik.

Kelas Ukuran

Sebelum iOS 8, pengembang menggunakan UIInterfaceOrientation dan UIInterfaceIdiom untuk membedakan antara mode potret dan lanskap, dan antara perangkat i Telepon dan iPad. Di iOS8, orientasi dan perangkat ditentukan adalah dengan menggunakan Kelas Ukuran.

Perangkat didefinisikan oleh Kelas Ukuran, dalam sumbu vertikal dan horizontal, dan ada dua jenis kelas ukuran di iOS 8:

• Reguler – Ini untuk ukuran layar besar (seperti iPad) atau gadget yang memberikan kesan ukuran besar (seperti UIScrollView
• Ringkas - Ini untuk perangkat yang lebih kecil (seperti i Telepon). Ukuran ini memperhitungkan orientasi perangkat.

Jika kedua konsep digunakan bersama-sama, hasilnya adalah kisi 2 x 2 yang menentukan berbagai kemungkinan ukuran yang dapat digunakan dalam kedua orientasi yang berbeda, seperti yang terlihat dalam diagram berikut:

Pengembang dapat membuat Pengontrol Tampilan yang menggunakan salah satu dari empat kemungkinan yang akan menghasilkan tata letak yang berbeda (seperti yang terlihat pada grafik di atas).

Kelas Ukuran iPad

iPad, karena ukurannya, memiliki ukuran kelas reguler untuk kedua orientasi.

Kelas Ukuran i Telepon

i Telepon memiliki kelas ukuran yang berbeda berdasarkan orientasi perangkat:

• Saat perangkat dalam mode potret, layar memiliki kelas yang ringkas secara horizontal dan teratur secara vertikal
• Saat perangkat dalam mode lanskap, kelas layar dibalik dari mode potret.

i Telepon 6 Kelas Ukuran Plus

Ukurannya sama dengan i sebelumnya Telepon s ketika dalam orientasi potret, tetapi berbeda dalam lanskap:

Karena i Telepon 6 Plus memiliki layar yang cukup besar, i Telepon 6 Plus dapat memiliki Kelas Ukuran Lebar Reguler dalam mode Lanskap.

Dukungan untuk Skala Layar Baru

i Telepon 6 Plus menggunakan layar Retina HD baru dengan faktor skala layar 3,0 (tiga kali resolusi layar i Telepon asli). Untuk memberikan pengalaman terbaik pada perangkat ini, sertakan karya seni baru yang dirancang untuk skala layar ini. Dalam Xcode 6 ke atas, katalog aset dapat menyertakan gambar pada ukuran 1x, 2x, dan 3x; cukup tambahkan aset gambar baru dan iOS akan memilih aset yang benar saat berjalan pada i Telepon 6 Plus.

Perilaku pemuatan gambar di iOS juga mengenali akhiran @3x pada file gambar. Misalnya, jika pengembang menyertakan aset gambar (pada resolusi yang berbeda) dalam bundel aplikasi dengan nama file berikut: MonkeyIcon.png, , MonkeyIcon@2x.pngdan MonkeyIcon@3x.png. Pada i Telepon 6 Plus MonkeyIcon@3x.png gambar akan digunakan secara otomatis jika pengembang memuat gambar menggunakan kode berikut:

UIImage icon = UIImage.FromFile("MonkeyImage.png");

Layar Peluncuran Dinamis

File layar peluncuran ditampilkan sebagai layar percikan saat aplikasi iOS diluncurkan untuk memberikan umpan balik kepada pengguna bahwa aplikasi benar-benar memulai. Sebelum iOS 8, pengembang harus menyertakan beberapa Default.png aset gambar untuk setiap jenis perangkat, orientasi, dan resolusi layar yang akan dijalankan aplikasi.

Baru menggunakan iOS 8, pengembang dapat membuat satu file atomik .xib di Xcode yang menggunakan Tata Letak Otomatis dan Kelas Ukuran untuk membuat Layar Peluncuran Dinamis yang akan berfungsi untuk setiap perangkat, resolusi, dan orientasi. Ini tidak hanya mengurangi jumlah pekerjaan yang diperlukan pengembang untuk membuat dan memelihara semua aset gambar yang diperlukan, tetapi mengurangi ukuran bundel aplikasi yang diinstal.

Sifat

Sifat adalah properti yang dapat digunakan untuk menentukan bagaimana tata letak berubah saat lingkungannya berubah. Mereka terdiri dari sekumpulan properti ( HorizontalSizeClass dan VerticalSizeClass berdasarkan UIUserInterfaceSizeClass), serta idiom antarmuka ( UIUserInterfaceIdiom) dan skala tampilan.

Semua status di atas dibungkus dalam kontainer yang disebut Apple sebagai Koleksi Sifat ( UITraitCollection), yang tidak hanya berisi properti tetapi juga nilainya.

Lingkungan Sifat

Trait Environments adalah antarmuka baru di iOS 8 dan dapat mengembalikan Koleksi Sifat untuk objek berikut:

• Layar ( UIScreens ).
• Windows ( UIWindows ).
• Lihat Pengontrol ( UIViewController ).
• Tampilan ( UIView ).
• Pengontrol Presentasi ( UIPresentationController ).

Pengembang menggunakan Koleksi Sifat yang dikembalikan oleh Lingkungan Sifat untuk menentukan bagaimana antarmuka pengguna harus ditata.

Semua Lingkungan Sifat membuat hierarki seperti yang terlihat dalam diagram berikut:

Koleksi Sifat yang dimiliki masing-masing Lingkungan Sifat di atas akan mengalir, secara default, dari induk ke lingkungan anak.

Selain mendapatkan Koleksi Sifat saat ini, Lingkungan Sifat memiliki TraitCollectionDidChange metode, yang dapat ditimpa dalam subkelas Tampilan atau Lihat Pengontrol. Pengembang dapat menggunakan metode ini untuk memodifikasi salah satu elemen UI yang bergantung pada sifat ketika sifat tersebut telah berubah.

Koleksi Sifat Khas

Bagian ini akan mencakup jenis khas koleksi sifat yang akan dialami pengguna saat bekerja dengan iOS 8.

Berikut ini adalah Koleksi Sifat khas yang mungkin dilihat pengembang pada i Telepon:

Properti	Nilai
HorizontalSizeClass	Ringkas
VerticalSizeClass	Reguler
UserInterfaceIdom	Nomor
DisplayScale	2.0

Set di atas akan mewakili Koleksi Sifat yang Sepenuhnya Memenuhi Syarat, karena memiliki nilai untuk semua properti sifatnya.

Dimungkinkan juga untuk memiliki Koleksi Sifat yang kehilangan beberapa nilainya (yang disebut Apple sebagai Tidak Ditentukan):

Properti	Nilai
HorizontalSizeClass	Ringkas
VerticalSizeClass	Tidak disebutkan
UserInterfaceIdom	Tidak disebutkan
DisplayScale	Tidak disebutkan

Namun, umumnya, ketika pengembang meminta Trait Environment untuk Koleksi Sifatnya, ia akan mengembalikan koleksi yang sepenuhnya memenuhi syarat seperti yang terlihat dalam contoh di atas.

Jika Lingkungan Sifat (seperti Pengontrol Tampilan atau Tampilan) tidak berada di dalam hierarki tampilan saat ini, pengembang mungkin mendapatkan kembali nilai yang tidak ditentukan untuk satu atau beberapa properti sifat.

Pengembang juga akan mendapatkan Koleksi Sifat yang memenuhi syarat sebagian jika mereka menggunakan salah satu metode pembuatan yang disediakan oleh Apple, seperti UITraitCollection.FromHorizontalSizeClass, untuk membuat koleksi baru.

Satu operasi yang dapat dilakukan pada beberapa Koleksi Sifat membandingkannya satu sama lain, yang melibatkan menanyakan satu Koleksi Sifat jika berisi yang lain. Apa yang dimaksud dengan Containment adalah bahwa, untuk sifat apa pun yang ditentukan dalam koleksi kedua, nilai harus sama persis dengan nilai dalam koleksi pertama.

Untuk menguji dua sifat, gunakan Contains metode UITraitCollection passing dalam nilai sifat yang akan diuji.

Pengembang dapat melakukan perbandingan secara manual dalam kode untuk menentukan cara tata letak Tampilan atau Lihat Pengontrol. Namun, UIKit menggunakan metode ini secara internal untuk menyediakan beberapa fungsionalitasnya, seperti dalam Proksi Tampilan, misalnya.

Proksi Tampilan

Proksi Tampilan diperkenalkan di versi iOS sebelumnya untuk memungkinkan pengembang menyesuaikan properti Tampilan mereka. Ini telah diperluas di iOS 8 untuk mendukung Koleksi Sifat.

Proksi Tampilan sekarang menyertakan metode baru, AppearanceForTraitCollection, yang mengembalikan Proksi Penampilan baru untuk Koleksi Sifat yang diberikan yang telah diteruskan. Setiap penyesuaian yang dilakukan pengembang pada Proksi Tampilan tersebut hanya akan berlaku pada Tampilan yang sesuai dengan Koleksi Sifat yang ditentukan.

Umumnya pengembang akan meneruskan Koleksi Sifat yang ditentukan sebagian ke AppearanceForTraitCollection metode , seperti yang baru saja menentukan Kelas Ukuran Horizontal Ringkas, sehingga mereka dapat menyesuaikan tampilan apa pun dalam aplikasi yang ringkas secara horizontal.

UIImage

Kelas lain yang telah ditambahkan Apple Trait Collection adalah UIImage. Di masa lalu pengembang harus menentukan versi @1X dan @2x dari aset grafis bitmapped apa pun yang akan mereka sertakan dalam aplikasi (seperti ikon).

iOS 8 telah diperluas untuk memungkinkan pengembang menyertakan beberapa versi gambar dalam Katalog Gambar berdasarkan Koleksi Sifat. Misalnya, pengembang dapat menyertakan gambar yang lebih kecil untuk bekerja dengan Kelas Sifat Ringkas dan gambar berukuran penuh untuk koleksi lain.

Ketika salah satu gambar digunakan di dalam UIImageView kelas, Tampilan Gambar akan secara otomatis menampilkan versi gambar yang benar untuk Koleksi Sifatnya. Jika Lingkungan Sifat berubah (seperti pengguna mengalihkan perangkat dari potret ke lanskap), Tampilan Gambar akan secara otomatis memilih ukuran gambar baru agar sesuai dengan Koleksi Sifat baru dan mengubah ukurannya agar sesuai dengan versi gambar saat ini yang ditampilkan.

UIImageAsset

Apple telah menambahkan kelas baru ke iOS 8 yang dipanggil UIImageAsset untuk memberi pengembang kontrol yang lebih besar atas pemilihan gambar.

Aset Gambar membungkus semua versi gambar yang berbeda dan memungkinkan pengembang untuk meminta gambar tertentu yang cocok dengan Koleksi Sifat yang telah diteruskan. Gambar dapat ditambahkan atau dihapus dari Aset Gambar, dengan cepat.

Untuk informasi selengkapnya tentang Aset Gambar, lihat dokumentasi UIImageAsset Apple.

Menggabungkan Koleksi Sifat

Fungsi lain yang dapat dilakukan pengembang pada Koleksi Sifat adalah menambahkan dua bersama-sama yang akan menghasilkan koleksi gabungan, di mana nilai yang tidak ditentukan dari satu koleksi digantikan oleh nilai yang ditentukan dalam yang kedua. Ini dilakukan menggunakan FromTraitsFromCollections metode UITraitCollection kelas .

Seperti yang dinyatakan di atas, jika salah satu sifat tidak ditentukan dalam salah satu Koleksi Sifat dan ditentukan di yang lain, nilai akan diatur ke versi yang ditentukan. Namun, jika ada beberapa versi nilai tertentu yang ditentukan, nilai dari Koleksi Sifat terakhir akan menjadi nilai yang digunakan.

Pengontrol Tampilan Adaptif

Bagian ini akan membahas detail bagaimana iOS View and View Controllers telah mengadopsi konsep Traits dan Size Classes agar secara otomatis lebih adaptif dalam aplikasi pengembang.

Pisahkan Pengontrol Tampilan

Salah satu kelas View Controller yang paling banyak berubah di iOS 8 adalah UISplitViewController kelas . Di masa lalu, pengembang akan sering menggunakan Split View Controller pada versi iPad aplikasi dan kemudian mereka harus menyediakan versi hierarki tampilan mereka yang sama sekali berbeda untuk versi i Telepon aplikasi.

Di iOS 8, UISplitViewController kelas tersedia di kedua platform (iPad dan i Telepon), yang memungkinkan pengembang membuat satu hierarki View Controller yang akan berfungsi untuk i Telepon dan iPad.

Saat i Telepon berada di Lanskap, Pengontrol Tampilan Terpisah akan menyajikan Tampilannya secara berdampingan, seperti saat ditampilkan di iPad.

Mengesampingkan Sifat

Trait Environments berskala dari kontainer induk ke kontainer turunan, seperti pada grafik berikut yang menunjukkan Pengontrol Tampilan Terpisah pada iPad dalam orientasi lanskap:

Karena iPad memiliki Kelas Ukuran Reguler dalam orientasi horizontal dan vertikal, Tampilan Terpisah akan menampilkan tampilan master dan detail.

Pada i Telepon, di mana Kelas Ukuran padat di kedua orientasi, Pengontrol Tampilan Terpisah hanya menampilkan tampilan detail, seperti yang terlihat di bawah ini:

Dalam aplikasi di mana pengembang ingin menampilkan tampilan master dan detail pada i Telepon dalam orientasi lanskap, pengembang harus menyisipkan kontainer induk untuk Pengontrol Tampilan Terpisah dan mengambil alih Koleksi Sifat. Seperti yang terlihat pada grafik di bawah ini:

UIView diatur sebagai induk Pengontrol Tampilan Terpisah dan SetOverrideTraitCollection metode dipanggil pada tampilan yang melewati Koleksi Sifat baru dan menargetkan Pengontrol Tampilan Terpisah. Koleksi Sifat baru mengambil alih HorizontalSizeClass, mengaturnya ke Regular, sehingga Pengontrol Tampilan Terpisah akan menampilkan tampilan master dan detail pada i Telepon dalam orientasi lanskap.

Perhatikan bahwa VerticalSizeClass diatur ke unspecified, yang memungkinkan Koleksi Sifat baru ditambahkan ke Koleksi Sifat pada induk, menghasilkan Compact VerticalSizeClass untuk Pengontrol Tampilan Terpisah anak.

Perubahan Sifat

Bagian ini akan melihat, secara rinci, tentang bagaimana transisi Koleksi Sifat saat Lingkungan Sifat berubah. Misalnya, ketika perangkat diputar dari potret ke lanskap.

Pertama, iOS 8 melakukan beberapa penyiapan untuk mempersiapkan transisi berlangsung. Selanjutnya, sistem menganimasikan status transisi. Terakhir, iOS 8 membersihkan status sementara yang diperlukan selama transisi.

iOS 8 menyediakan beberapa panggilan balik yang dapat digunakan pengembang untuk berpartisipasi dalam Perubahan Sifat seperti yang terlihat dalam tabel berikut:

Fase	Panggilan balik	Deskripsi
Siapkan	WillTransitionToTraitCollection TraitCollectionDidChange	Metode ini dipanggil di awal Perubahan Sifat sebelum Koleksi Sifat diatur ke nilai barunya. Metode ini dipanggil ketika nilai Koleksi Sifat telah berubah tetapi sebelum animasi terjadi.
Animasi	WillTransitionToTraitCollection	Koordinator Transisi yang diteruskan ke metode ini memiliki AnimateAlongside properti yang memungkinkan pengembang untuk menambahkan animasi yang akan dijalankan bersama dengan animasi default.
Pembersihan	WillTransitionToTraitCollection	Menyediakan metode bagi pengembang untuk menyertakan kode pembersihan mereka sendiri setelah transisi berlangsung.

Metode WillTransitionToTraitCollection ini sangat bagus untuk menganimasikan Pengontrol Tampilan bersama dengan perubahan Koleksi Sifat. Metode WillTransitionToTraitCollection ini hanya tersedia pada View Controllers ( UIViewController) dan bukan di Lingkungan Sifat lainnya, seperti UIViews.

TraitCollectionDidChange Sangat bagus untuk bekerja dengan UIView kelas , di mana pengembang ingin memperbarui UI karena sifatnya berubah.

Menciutkan Pengontrol Tampilan Terpisah

Sekarang mari kita lihat lebih dekat apa yang terjadi ketika Pengontrol Tampilan Terpisah diciutkan dari dua kolom ke tampilan satu kolom. Sebagai bagian dari perubahan ini, ada dua proses yang perlu terjadi:

• Secara default, Pengontrol Tampilan Terpisah akan menggunakan pengontrol tampilan utama sebagai tampilan setelah ciutkan terjadi. Pengembang dapat mengambil alih perilaku ini dengan mengambil GetPrimaryViewControllerForCollapsingSplitViewController alih metode UISplitViewControllerDelegate dan menyediakan Pengontrol Tampilan apa pun yang ingin mereka tampilkan dalam status diciutkan.
• Pengontrol Tampilan Sekunder harus digabungkan ke dalam Pengontrol Tampilan Utama. Umumnya pengembang tidak perlu mengambil tindakan apa pun untuk langkah ini; Pengontrol Tampilan Terpisah mencakup penanganan otomatis fase ini berdasarkan perangkat keras. Namun, mungkin ada beberapa kasus khusus di mana pengembang ingin berinteraksi dengan perubahan ini. Memanggil CollapseSecondViewController metode UISplitViewControllerDelegate memungkinkan pengontrol tampilan master ditampilkan ketika ciutkan terjadi, alih-alih tampilan detail.

Memperluas Pengontrol Tampilan Terpisah

Sekarang mari kita lihat lebih dekat apa yang terjadi ketika Pengontrol Tampilan Terpisah diperluas dari status diciutkan. Sekali lagi, ada dua tahap yang perlu terjadi:

• Pertama, tentukan Pengontrol Tampilan Utama baru. Secara default, Pengontrol Tampilan Terpisah akan secara otomatis menggunakan Pengontrol Tampilan Utama dari tampilan yang diciutkan. Sekali lagi, pengembang dapat mengambil alih perilaku ini menggunakan GetPrimaryViewControllerForExpandingSplitViewController metode UISplitViewControllerDelegate .
• Setelah Pengontrol Tampilan Utama dipilih, Pengontrol Tampilan Sekunder harus dibuat ulang. Sekali lagi, Split View Controller mencakup penanganan otomatis fase ini berdasarkan perangkat keras. Pengembang dapat mengambil alih perilaku ini dengan memanggil SeparateSecondaryViewController metode UISplitViewControllerDelegate .

Dalam Pengontrol Tampilan Terpisah, Pengontrol Tampilan Utama memainkan peran dalam memperluas dan menciutkan tampilan dengan menerapkan CollapseSecondViewController metode dan SeparateSecondaryViewController dari UISplitViewControllerDelegate. UINavigationController menerapkan metode ini untuk secara otomatis mendorong dan memunculkan pengontrol Tampilan Sekunder.

Menampilkan Pengontrol Tampilan

Perubahan lain yang telah dilakukan Apple ke iOS 8 adalah cara pengembang menunjukkan Lihat Pengontrol. Di masa lalu, jika aplikasi memiliki Pengontrol Tampilan Daun (seperti Pengontrol Tampilan Tabel), dan pengembang menunjukkan yang berbeda (misalnya, sebagai respons terhadap pengguna yang mengetuk sel), aplikasi akan mencapai kembali melalui hierarki pengontrol ke Pengontrol Tampilan Navigasi dan memanggil PushViewController metode terhadapnya untuk menampilkan tampilan baru.

Ini menyajikan kopling yang sangat ketat antara Pengontrol Navigasi dan lingkungan tempat pengontrol berjalan. Di iOS 8, Apple telah memisahkan ini dengan menyediakan dua metode baru:

• ShowViewController – Beradaptasi untuk menampilkan pengontrol tampilan baru berdasarkan lingkungannya. Misalnya, di dalamnya UINavigationController hanya mendorong tampilan baru ke tumpukan. Di Pengontrol Tampilan Terpisah, Pengontrol Tampilan baru akan disajikan di sisi kiri sebagai Pengontrol Tampilan Utama baru. Jika tidak ada pengontrol tampilan kontainer yang ada, tampilan baru akan ditampilkan sebagai Pengontrol Tampilan Modal.
• ShowDetailViewController – Bekerja dengan cara ShowViewControlleryang mirip dengan , tetapi diimplementasikan pada Pengontrol Tampilan Terpisah untuk mengganti tampilan detail dengan Pengontrol Tampilan baru yang diteruskan. Jika Pengontrol Tampilan Terpisah diciutkan (seperti yang mungkin terlihat dalam Aplikasi i Telepon), panggilan akan dialihkan ke ShowViewController metode , dan tampilan baru akan ditampilkan sebagai Pengontrol Tampilan Utama. Sekali lagi, jika tidak ada pengontrol tampilan kontainer yang ada, tampilan baru akan ditampilkan sebagai Pengontrol Tampilan Modal.

Metode ini bekerja dengan memulai di Pengontrol Tampilan Daun dan memanjat hierarki tampilan sampai mereka menemukan pengontrol tampilan kontainer yang tepat untuk menangani tampilan tampilan baru.

Pengembang dapat menerapkan ShowViewController dan ShowDetailViewController di Pengontrol Tampilan kustom mereka sendiri untuk mendapatkan fungsionalitas otomatis yang sama yang UINavigationController dan UISplitViewController menyediakan.

Cara kerjanya

Di bagian ini kita akan melihat bagaimana metode ini benar-benar diterapkan di iOS 8. Pertama mari kita lihat metode baru GetTargetForAction :

Metode ini berjalan rantai hierarki sampai pengontrol tampilan kontainer yang benar ditemukan. Contohnya:

1. ShowViewController Jika metode dipanggil, Pengontrol Tampilan pertama dalam rantai yang mengimplementasikan metode ini adalah Pengontrol Navigasi, sehingga digunakan sebagai induk tampilan baru.
2. ShowDetailViewController Jika metode dipanggil sebagai gantinya, Pengontrol Tampilan Terpisah adalah Pengontrol Tampilan pertama yang mengimplementasikannya, sehingga digunakan sebagai induk.

Metode ini GetTargetForAction bekerja dengan menemukan Pengontrol Tampilan yang mengimplementasikan Tindakan tertentu lalu meminta pengontrol Tampilan jika ingin menerima tindakan tersebut. Karena metode ini bersifat publik, pengembang dapat membuat metode kustom mereka sendiri yang berfungsi seperti metode dan ShowDetailViewController bawaanShowViewController.

Presentasi Adaptif

Di iOS 8, Apple juga telah membuat Presentasi Popover ( UIPopoverPresentationController) adaptif. Jadi Pengontrol Tampilan Presentasi Popover akan secara otomatis menyajikan Tampilan Popover normal di Kelas Ukuran Reguler, tetapi akan menampilkannya layar penuh di Kelas Ukuran yang ringkas secara horizontal (seperti pada i Telepon).

Untuk mengakomodasi perubahan dalam sistem papan cerita terpadu, objek pengontrol baru telah dibuat untuk mengelola Pengontrol Tampilan yang disajikan — UIPresentationController. Pengontrol ini dibuat sejak Pengontrol Tampilan disajikan hingga diberhentikan. Karena merupakan kelas pengelola, kelas ini dapat dianggap sebagai kelas super atas Pengontrol Tampilan karena merespons perubahan perangkat yang memengaruhi Pengontrol Tampilan (seperti orientasi) yang kemudian disalurkan kembali ke Pengontrol Tampilan kontrol Pengontrol Presentasi.

Ketika pengembang menyajikan Pengontrol Tampilan menggunakan PresentViewController metode , manajemen proses presentasi diserahkan ke UIKit. UIKit menangani (antara lain) pengontrol yang benar untuk gaya yang dibuat, dengan satu-satunya pengecualian adalah ketika Pengontrol Tampilan memiliki gaya yang diatur ke UIModalPresentationCustom. Di sini, aplikasi dapat menyediakan PresentationController sendiri daripada menggunakan UIKit pengontrol.

Gaya Presentasi Kustom

Dengan gaya presentasi kustom, pengembang memiliki opsi untuk menggunakan Pengontrol Presentasi kustom. Pengontrol kustom ini dapat digunakan untuk memodifikasi tampilan dan perilaku Tampilan yang disekutukan dengannya.

Bekerja dengan Kelas Ukuran

Proyek Xamarin Foto Adaptif yang disertakan dengan artikel ini memberikan contoh kerja menggunakan Kelas Ukuran dan Pengontrol Tampilan Adaptif dalam aplikasi Antarmuka Terpadu iOS 8.

Meskipun aplikasi membuat UI-nya sepenuhnya dari kode, dibandingkan dengan membuat Unified Storyboard menggunakan Interface Builder Xcode, teknik yang sama berlaku.

Sekarang mari kita lihat lebih dekat bagaimana proyek Foto Adaptif mengimplementasikan beberapa fitur Kelas Ukuran di iOS 8 untuk membuat Aplikasi Adaptif.

Beradaptasi dengan Perubahan Lingkungan Sifat

Saat menjalankan aplikasi Foto Adaptif pada i Telepon, ketika pengguna memutar perangkat dari potret ke lanskap, Pengontrol Tampilan Terpisah akan menampilkan tampilan master dan detail:

Ini dicapai dengan mengambil UpdateConstraintsForTraitCollection alih metode Pengontrol Tampilan dan menyesuaikan batasan berdasarkan nilai VerticalSizeClass. Contohnya:

public void UpdateConstraintsForTraitCollection (UITraitCollection collection)
{
    var views = NSDictionary.FromObjectsAndKeys (
        new object[] { TopLayoutGuide, ImageView, NameLabel, ConversationsLabel, PhotosLabel },
        new object[] { "topLayoutGuide", "imageView", "nameLabel", "conversationsLabel", "photosLabel" }
    );

    var newConstraints = new List<NSLayoutConstraint> ();
    if (collection.VerticalSizeClass == UIUserInterfaceSizeClass.Compact) {
        newConstraints.AddRange (NSLayoutConstraint.FromVisualFormat ("|[imageView]-[nameLabel]-|",
            NSLayoutFormatOptions.DirectionLeadingToTrailing, null, views));

        newConstraints.AddRange (NSLayoutConstraint.FromVisualFormat ("[imageView]-[conversationsLabel]-|",
            NSLayoutFormatOptions.DirectionLeadingToTrailing, null, views));

        newConstraints.AddRange (NSLayoutConstraint.FromVisualFormat ("[imageView]-[photosLabel]-|",
            NSLayoutFormatOptions.DirectionLeadingToTrailing, null, views));

        newConstraints.AddRange (NSLayoutConstraint.FromVisualFormat ("V:|[topLayoutGuide]-[nameLabel]-[conversationsLabel]-[photosLabel]",
            NSLayoutFormatOptions.DirectionLeadingToTrailing, null, views));

        newConstraints.AddRange (NSLayoutConstraint.FromVisualFormat ("V:|[topLayoutGuide][imageView]|",
            NSLayoutFormatOptions.DirectionLeadingToTrailing, null, views));

        newConstraints.Add (NSLayoutConstraint.Create (ImageView, NSLayoutAttribute.Width, NSLayoutRelation.Equal,
            View, NSLayoutAttribute.Width, 0.5f, 0.0f));
    } else {
        newConstraints.AddRange (NSLayoutConstraint.FromVisualFormat ("|[imageView]|",
            NSLayoutFormatOptions.DirectionLeadingToTrailing, null, views));

        newConstraints.AddRange (NSLayoutConstraint.FromVisualFormat ("|-[nameLabel]-|",
            NSLayoutFormatOptions.DirectionLeadingToTrailing, null, views));

        newConstraints.AddRange (NSLayoutConstraint.FromVisualFormat ("|-[conversationsLabel]-|",
            NSLayoutFormatOptions.DirectionLeadingToTrailing, null, views));

        newConstraints.AddRange (NSLayoutConstraint.FromVisualFormat ("|-[photosLabel]-|",
            NSLayoutFormatOptions.DirectionLeadingToTrailing, null, views));

        newConstraints.AddRange (NSLayoutConstraint.FromVisualFormat ("V:[topLayoutGuide]-[nameLabel]-[conversationsLabel]-[photosLabel]-20-[imageView]|",
            NSLayoutFormatOptions.DirectionLeadingToTrailing, null, views));
    }

    if (constraints != null)
        View.RemoveConstraints (constraints.ToArray ());

    constraints = newConstraints;
    View.AddConstraints (constraints.ToArray ());
}

Menambahkan Animasi Transisi

Ketika Pengontrol Tampilan Terpisah di aplikasi Foto Adaptif berubah dari diciutkan ke diperluas, animasi ditambahkan ke animasi default dengan mengambil WillTransitionToTraitCollection alih metode pengontrol tampilan. Contohnya:

public override void WillTransitionToTraitCollection (UITraitCollection traitCollection, IUIViewControllerTransitionCoordinator coordinator)
{
    base.WillTransitionToTraitCollection (traitCollection, coordinator);
    coordinator.AnimateAlongsideTransition ((UIViewControllerTransitionCoordinatorContext) => {
        UpdateConstraintsForTraitCollection (traitCollection);
        View.SetNeedsLayout ();
    }, (UIViewControllerTransitionCoordinatorContext) => {
    });
}

Mengesampingkan Lingkungan Sifat

Seperti yang ditunjukkan di atas, aplikasi Foto Adaptif memaksa Pengontrol Tampilan Terpisah untuk menampilkan detail dan tampilan master saat perangkat i Telepon berada dalam tampilan lanskap.

Ini dicapai dengan menggunakan kode berikut di Pengontrol Tampilan:

private UITraitCollection forcedTraitCollection = new UITraitCollection ();
...

public UITraitCollection ForcedTraitCollection {
    get {
        return forcedTraitCollection;
    }

    set {
        if (value != forcedTraitCollection) {
            forcedTraitCollection = value;
            UpdateForcedTraitCollection ();
        }
    }
}
...

public override void ViewWillTransitionToSize (SizeF toSize, IUIViewControllerTransitionCoordinator coordinator)
{
    ForcedTraitCollection = toSize.Width > 320.0f ?
         UITraitCollection.FromHorizontalSizeClass (UIUserInterfaceSizeClass.Regular) :
         new UITraitCollection ();

    base.ViewWillTransitionToSize (toSize, coordinator);
}

public void UpdateForcedTraitCollection ()
{
    SetOverrideTraitCollection (forcedTraitCollection, viewController);
}

Memperluas dan Menciutkan Pengontrol Tampilan Terpisah

Selanjutnya mari kita periksa bagaimana perilaku memperluas dan menciutkan Pengontrol Tampilan Terpisah diterapkan di Xamarin. AppDelegateDi , saat Pengontrol Tampilan Terpisah dibuat, delegasinya ditetapkan untuk menangani perubahan ini:

public class SplitViewControllerDelegate : UISplitViewControllerDelegate
{
    public override bool CollapseSecondViewController (UISplitViewController splitViewController,
        UIViewController secondaryViewController, UIViewController primaryViewController)
    {
        AAPLPhoto photo = ((CustomViewController)secondaryViewController).Aapl_containedPhoto (null);
        if (photo == null) {
            return true;
        }

        if (primaryViewController.GetType () == typeof(CustomNavigationController)) {
            var viewControllers = new List<UIViewController> ();
            foreach (var controller in ((UINavigationController)primaryViewController).ViewControllers) {
                var type = controller.GetType ();
                MethodInfo method = type.GetMethod ("Aapl_containsPhoto");

                if ((bool)method.Invoke (controller, new object[] { null })) {
                    viewControllers.Add (controller);
                }
            }

            ((UINavigationController)primaryViewController).ViewControllers = viewControllers.ToArray<UIViewController> ();
        }

        return false;
    }

    public override UIViewController SeparateSecondaryViewController (UISplitViewController splitViewController,
        UIViewController primaryViewController)
    {
        if (primaryViewController.GetType () == typeof(CustomNavigationController)) {
            foreach (var controller in ((CustomNavigationController)primaryViewController).ViewControllers) {
                var type = controller.GetType ();
                MethodInfo method = type.GetMethod ("Aapl_containedPhoto");

                if (method.Invoke (controller, new object[] { null }) != null) {
                    return null;
                }
            }
        }

        return new AAPLEmptyViewController ();
    }
}

Metode menguji SeparateSecondaryViewController untuk melihat apakah foto sedang ditampilkan dan mengambil tindakan berdasarkan status tersebut. Jika tidak ada foto yang ditampilkan, foto akan menciutkan Pengontrol Tampilan Sekunder sehingga Pengontrol Tampilan Master ditampilkan.

Metode CollapseSecondViewController ini digunakan saat memperluas Pengontrol Tampilan Terpisah untuk melihat apakah ada foto di tumpukan, jika demikian foto tersebut akan diciutkan kembali ke tampilan tersebut.

Berpindah Antar Pengontrol Tampilan

Selanjutnya, mari kita lihat bagaimana aplikasi Foto Adaptif bergerak di antara pengontrol tampilan. AAPLConversationViewController Di kelas saat pengguna memilih sel dari tabel, metode dipanggil ShowDetailViewController untuk menampilkan tampilan detail:

public override void RowSelected (UITableView tableView, NSIndexPath indexPath)
{
    var photo = PhotoForIndexPath (indexPath);
    var controller = new AAPLPhotoViewController ();
    controller.Photo = photo;

    int photoNumber = indexPath.Row + 1;
    int photoCount = (int)Conversation.Photos.Count;
    controller.Title = string.Format ("{0} of {1}", photoNumber, photoCount);
    ShowDetailViewController (controller, this);
}

Menampilkan Indikator Pengungkapan

Dalam aplikasi Foto Adaptif ada beberapa tempat di mana Indikator Pengungkapan disembunyikan atau ditampilkan berdasarkan perubahan pada Lingkungan Sifat. Ini ditangani dengan kode berikut:

public bool Aapl_willShowingViewControllerPushWithSender ()
{
    var selector = new Selector ("Aapl_willShowingViewControllerPushWithSender");
    var target = this.GetTargetViewControllerForAction (selector, this);

    if (target != null) {
        var type = target.GetType ();
        MethodInfo method = type.GetMethod ("Aapl_willShowingDetailViewControllerPushWithSender");
        return (bool)method.Invoke (target, new object[] { });
    } else {
        return false;
    }
}

public bool Aapl_willShowingDetailViewControllerPushWithSender ()
{
    var selector = new Selector ("Aapl_willShowingDetailViewControllerPushWithSender");
    var target = this.GetTargetViewControllerForAction (selector, this);

    if (target != null) {
        var type = target.GetType ();
        MethodInfo method = type.GetMethod ("Aapl_willShowingDetailViewControllerPushWithSender");
        return (bool)method.Invoke (target, new object[] { });
    } else {
        return false;
    }
}

Ini diimplementasikan menggunakan metode yang GetTargetViewControllerForAction dibahas secara rinci di atas.

Saat Pengontrol Tampilan Tabel menampilkan data, pengontrol menggunakan metode yang diterapkan di atas untuk melihat apakah pendorongan akan terjadi atau tidak, dan apakah akan menampilkan atau tidak menampilkan atau menyembunyikan Indikator Pengungkapan yang sesuai:

public override void WillDisplay (UITableView tableView, UITableViewCell cell, NSIndexPath indexPath)
{
    bool pushes = ShouldShowConversationViewForIndexPath (indexPath) ?
         Aapl_willShowingViewControllerPushWithSender () :
         Aapl_willShowingDetailViewControllerPushWithSender ();

    cell.Accessory = pushes ? UITableViewCellAccessory.DisclosureIndicator : UITableViewCellAccessory.None;
    var conversation = ConversationForIndexPath (indexPath);
    cell.TextLabel.Text = conversation.Name;
}

Tipe Baru ShowDetailTargetDidChangeNotification

Apple telah menambahkan jenis pemberitahuan baru untuk bekerja dengan Kelas Ukuran dan Lingkungan Sifat dari dalam Pengontrol Tampilan Terpisah, ShowDetailTargetDidChangeNotification. Pemberitahuan ini dikirim setiap kali Tampilan Detail target untuk Pengontrol Tampilan Terpisah berubah, seperti ketika pengontrol meluas atau menciutkan.

Aplikasi Foto Adaptif menggunakan pemberitahuan ini untuk memperbarui status Indikator Pengungkapan saat Pengontrol Tampilan Detail berubah:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();
    TableView.RegisterClassForCellReuse (typeof(UITableViewCell), AAPLListTableViewControllerCellIdentifier);
    NSNotificationCenter.DefaultCenter.AddObserver (this, new Selector ("showDetailTargetDidChange:"),
        UIViewController.ShowDetailTargetDidChangeNotification, null);
    ClearsSelectionOnViewWillAppear = false;
}

Lihat lebih dekat aplikasi Foto Adaptif untuk melihat semua cara agar Kelas Ukuran, Koleksi Sifat, dan Pengontrol Tampilan Adaptif dapat digunakan untuk dengan mudah membuat Aplikasi Terpadu di Xamarin.iOS.

Papan Cerita Terpadu

Baru menggunakan iOS 8, Unified Storyboards memungkinkan pengembang untuk membuat satu, file papan cerita terpadu yang dapat ditampilkan di perangkat i Telepon dan iPad dengan menargetkan beberapa Kelas Ukuran. Dengan menggunakan Unified Storyboards, pengembang menulis lebih sedikit kode khusus UI dan hanya memiliki satu desain antarmuka untuk membuat dan memelihara.

Manfaat utama Dari Unified Storyboards adalah:

• Gunakan file papan cerita yang sama untuk i Telepon dan iPad.
• Sebarkan mundur ke iOS 6 dan iOS 7.
• Pratinjau tata letak untuk perangkat, orientasi, dan versi OS yang berbeda.

Mengaktifkan Kelas Ukuran

Secara default, setiap proyek Xamarin.iOS baru akan menggunakan kelas ukuran. Untuk menggunakan Kelas Ukuran dan Lidah Adaptif di dalam papan cerita dari proyek lama, pertama-tama harus dikonversi ke format Papan Cerita Terpadu Xcode 6 dan kotak centang Gunakan Kelas Ukuran dipilih dalam Pemeriksa File Xcode untuk papan cerita Anda.

Layar Peluncuran Dinamis

File layar peluncuran ditampilkan sebagai layar percikan saat aplikasi iOS diluncurkan untuk memberikan umpan balik kepada pengguna bahwa aplikasi benar-benar memulai. Sebelum iOS 8, pengembang harus menyertakan beberapa Default.png aset gambar untuk setiap jenis perangkat, orientasi, dan resolusi layar yang akan dijalankan aplikasi. Misalnya, Default@2x.png, Default-Landscape@2x~ipad.png, Default-Portrait@2x~ipad.png, dll.

Memperhitungkan perangkat i Telepon 6 dan i Telepon 6 Plus baru (dan Apple Watch yang akan datang) dengan semua perangkat i Telepon dan iPad yang ada, ini mewakili berbagai ukuran, orientasi, dan resolusi Default.png aset gambar layar startup yang harus dibuat dan dipertahankan. Selain itu, file-file ini bisa cukup besar dan akan "membengkokkan" bundel aplikasi yang dapat dikirimkan, meningkatkan jumlah waktu yang diperlukan untuk mengunduh aplikasi dari iTunes App Store (mungkin mencegahnya agar tidak dapat dikirim melalui jaringan seluler) dan meningkatkan jumlah penyimpanan yang diperlukan pada perangkat pengguna akhir.

Baru menggunakan iOS 8, pengembang dapat membuat satu file atomik .xib di Xcode yang menggunakan Tata Letak Otomatis dan Kelas Ukuran untuk membuat Layar Peluncuran Dinamis yang akan berfungsi untuk setiap perangkat, resolusi, dan orientasi. Ini tidak hanya mengurangi jumlah pekerjaan yang diperlukan pengembang untuk membuat dan memelihara semua aset gambar yang diperlukan, tetapi sangat mengurangi ukuran bundel aplikasi yang diinstal.

Layar Peluncuran Dinamis memiliki batasan dan pertimbangan berikut:

• Gunakan hanya UIKit kelas.
• Gunakan tampilan akar tunggal yang merupakan UIView objek atau UIViewController .
• Jangan membuat koneksi apa pun ke kode aplikasi (jangan tambahkan Tindakan atau Outlet).
• Jangan tambahkan UIWebView objek.
• Jangan gunakan kelas kustom apa pun.
• Jangan gunakan atribut runtime.

Dengan mempertimbangkan panduan di atas, mari kita lihat menambahkan Layar Peluncuran Dinamis ke proyek Xamarin iOS 8 yang ada.

Lakukan:

1. Buka Visual Studio untuk Mac dan muat Solusi untuk menambahkan Layar Peluncuran Dinamis.

2. Di Penjelajah Solusi, klik MainStoryboard.storyboard kanan file dan pilih Buka Dengan>Penyusun Antarmuka Xcode:

   

3. Di Xcode, pilih File>Baru>... :

   

4. Pilih Layar Peluncuran Antarmuka>Pengguna iOS>dan klik tombol Berikutnya:

   

5. Beri nama file LaunchScreen.xib dan klik tombol Buat :

   

6. Edit desain layar peluncuran dengan menambahkan elemen grafis dan menggunakan Batasan Tata Letak untuk memosisikannya untuk perangkat, orientasi, dan ukuran layar yang diberikan:

   

7. Simpan perubahan ke LaunchScreen.xib.

8. Pilih Target Aplikasi dan tab Umum:

   

9. Klik tombol Pilih Info.plist , pilih Info.plist untuk aplikasi Xamarin dan klik tombol Pilih :

   

10. Di bagian Ikon Aplikasi dan Luncurkan Gambar , buka menu dropdown Luncurkan File Layar dan pilih yang LaunchScreen.xib dibuat di atas:

    

11. Simpan perubahan ke file dan kembali ke Visual Studio untuk Mac.

12. Tunggu Hingga Visual Studio untuk Mac selesai menyinkronkan perubahan dengan Xcode.

13. Di Penjelajah Solusi, klik kanan folder Sumber Daya dan pilih Tambahkan>File...:

    

14. Pilih file yang LaunchScreen.xib dibuat di atas dan klik tombol Buka :

    

15. Bangun aplikasi.

Menguji Layar Peluncuran Dinamis

Di Visual Studio untuk Mac, pilih simulator i Telepon 4 Retina dan jalankan aplikasi. Layar Peluncuran Dinamis akan ditampilkan dalam format dan orientasi yang benar:

Hentikan aplikasi di Visual Studio untuk Mac dan pilih perangkat iPad iOS 8. Jalankan aplikasi dan layar peluncuran akan diformat dengan benar untuk perangkat dan orientasi ini:

Kembali ke Visual Studio untuk Mac dan hentikan aplikasi agar tidak berjalan.

Bekerja dengan iOS 7

Untuk mempertahankan kompatibilitas mundur dengan iOS 7, cukup sertakan aset gambar biasa Default.png seperti biasa dalam aplikasi iOS 8. iOS akan kembali ke perilaku sebelumnya dan menggunakan file tersebut sebagai layar startup saat berjalan di perangkat iOS 7.

Ringkasan

Artikel ini melihat sekilas Kelas Ukuran dan pengaruhnya terhadap tata letak di perangkat i Telepon dan iPad. Ini membahas bagaimana Sifat, Lingkungan Sifat, dan Koleksi Sifat bekerja dengan Kelas Ukuran untuk membuat Antarmuka Terpadu. Perlu beberapa saat melihat Pengontrol Tampilan Adaptif dan cara kerjanya dengan Kelas Ukuran di dalam Antarmuka Terpadu. Ini melihat penerapan Kelas Ukuran dan Antarmuka Terpadu sepenuhnya dari kode C# di dalam aplikasi Xamarin iOS 8.

Terakhir, artikel ini membahas dasar-dasar pembuatan satu Layar Peluncuran Dinamis yang akan ditampilkan sebagai layar startup di setiap perangkat iOS 8.

Link Terkait

• Pengantar iOS 8
• Tata Letak Dinamis di iOS8 - Evolve 2014 (video)
• UIPresentationController
• UIImageAsset