Bagikan melalui

Pengantar iOS 7

  • Artikel

Artikel ini membahas API baru utama yang diperkenalkan di iOS 7, termasuk transisi View Controller, penyempurnaan animasi UIView, UIKit Dynamics, dan Text Kit. Ini juga mencakup beberapa perubahan pada antarmuka pengguna, dan kemampuan multitasking yang disandikan baru.

iOS 7 adalah pembaruan utama untuk iOS. Ini memperkenalkan desain antarmuka pengguna yang benar-benar baru yang fokus pada konten daripada chrome aplikasi. Selain perubahan visual, iOS 7 menambahkan sejumlah besar API baru untuk menciptakan interaksi dan pengalaman yang lebih kaya. Dokumen ini mensurvei teknologi baru yang diperkenalkan dengan iOS 7, dan berfungsi sebagai titik awal untuk eksplorasi lebih lanjut.

Penyempurnaan Animasi UIView

iOS 7 menambah dukungan animasi di UIKit, memungkinkan aplikasi untuk melakukan hal-hal yang sebelumnya diperlukan turun langsung ke kerangka kerja Animasi Inti. Misalnya, UIView sekarang dapat melakukan animasi spring serta animasi keyframe, yang sebelumnya diterapkan CAKeyframeAnimation ke CALayer.

Animasi Spring

UIView sekarang mendukung perubahan properti animasi dengan efek spring. Untuk menambahkan ini, panggil metode AnimateNotify atau AnimateNotifyAsync , meneruskan nilai untuk rasio peredam musim semi dan kecepatan spring awal, seperti yang dijelaskan di bawah ini:

  • springWithDampingRatio – Nilai antara 0 dan 1, di mana osilasi meningkat untuk nilai yang lebih kecil.
  • initialSpringVelocity – Kecepatan spring awal sebagai persentase dari total jarak animasi per detik.

Kode berikut menghasilkan efek spring saat pusat tampilan gambar berubah:

void AnimateWithSpring ()
{
    float springDampingRatio = 0.25f;
    float initialSpringVelocity = 1.0f;

    UIView.AnimateNotify (3.0, 0.0, springDampingRatio, initialSpringVelocity, 0, () => {

        imageView.Center = new CGPoint (imageView.Center.X, 400);

    }, null);
}

Efek musim semi ini menyebabkan tampilan gambar tampak memantul saat menyelesaikan animasinya ke lokasi pusat baru, seperti yang diilustrasikan di bawah ini:

Efek musim semi ini menyebabkan tampilan gambar tampak memantul saat menyelesaikan animasinya ke lokasi pusat baru

Animasi Keyframe

Kelas UIView sekarang menyertakan AnimateWithKeyframes metode untuk membuat animasi keyframe pada UIView. Metode ini mirip dengan metode animasi lainnya UIView , kecuali bahwa tambahan NSAction diteruskan sebagai parameter untuk menyertakan keyframe. NSActionDalam , keyframe ditambahkan dengan memanggil UIView.AddKeyframeWithRelativeStartTime.

Misalnya, cuplikan kode berikut membuat animasi keyframe untuk menganimasikan pusat tampilan serta memutar tampilan:

void AnimateViewWithKeyframes ()
{
    var initialTransform = imageView.Transform;
    var initialCeneter = imageView.Center;

    // can now use keyframes directly on UIView without needing to drop directly into Core Animation

    UIView.AnimateKeyframes (2.0, 0, UIViewKeyframeAnimationOptions.Autoreverse, () => {
        UIView.AddKeyframeWithRelativeStartTime (0.0, 0.5, () => {
            imageView.Center = new CGPoint (200, 200);
        });

        UIView.AddKeyframeWithRelativeStartTime (0.5, 0.5, () => {
            imageView.Transform = CGAffineTransform.MakeRotation ((float)Math.PI / 2);
        });
    }, (finished) => {
        imageView.Center = initialCeneter;
        imageView.Transform = initialTransform;

        AnimateWithSpring ();
    });
}

Dua parameter pertama untuk AddKeyframeWithRelativeStartTime metode menentukan waktu mulai dan durasi keyframe, masing-masing, sebagai persentase dari panjang animasi keseluruhan. Contoh di atas menghasilkan tampilan gambar yang menganimasikan ke pusat barunya selama detik pertama, diikuti dengan memutar 90 derajat selama detik berikutnya. Karena animasi menentukan UIViewKeyframeAnimationOptions.Autoreverse sebagai opsi, kedua keyframe menganimasikan secara terbalik juga. Terakhir, nilai akhir diatur ke status awal dalam handler penyelesaian.

Cuplikan layar di bawah ini menggambarkan animasi gabungan melalui keyframe:

Cuplikan layar ini menggambarkan animasi gabungan melalui keyframe

Dinamika UIKit

UIKit Dynamics adalah sekumpulan API baru di UIKit yang memungkinkan aplikasi untuk membuat interaksi animasi berdasarkan fisika. UIKit Dynamics merangkum mesin fisika 2D untuk memungkinkan hal ini.

API bersifat deklaratif. Anda menyatakan bagaimana interaksi fisika berperilaku dengan membuat objek - yang disebut perilaku - untuk mengekspresikan konsep fisika seperti gravitasi, tabrakan, pegas, dll. Kemudian Anda melampirkan perilaku ke objek lain, yang disebut animator dinamis, yang merangkum tampilan. Animator dinamis mengurus penerapan perilaku fisika yang dinyatakan ke item dinamis - item yang mengimplementasikan IUIDynamicItem, seperti UIView.

Ada beberapa perilaku primitif yang berbeda yang tersedia untuk memicu interaksi yang kompleks, termasuk:

  • UIAttachmentBehavior – Melampirkan dua item dinamis sehingga mereka bergerak bersama-sama, atau melampirkan item dinamis ke titik lampiran.
  • UICollisionBehavior – Memungkinkan item dinamis untuk berpartisipasi dalam tabrakan.
  • UIDynamicItemBehavior – Menentukan sekumpulan properti umum untuk diterapkan ke item dinamis, seperti elastisitas, kepadatan, dan gesekan.
  • UIGravityBehavior - Menerapkan gravitasi pada item dinamis, menyebabkan item dipercepat ke arah gravitasi.
  • UIPushBehavior – Menerapkan paksa ke item dinamis.
  • UISnapBehavior – Memungkinkan item dinamis untuk memposisikan ke posisi dengan efek spring.

Meskipun ada banyak primitif, proses umum untuk menambahkan interaksi berbasis fisika ke tampilan menggunakan UIKit Dynamics konsisten di seluruh perilaku:

  1. Buat animator dinamis.
  2. Membuat perilaku.
  3. Tambahkan perilaku ke animator dinamis.

Contoh Dinamika

Mari kita lihat contoh yang menambahkan gravitasi dan batas tabrakan ke UIView.

UIGravityBehavior

Menambahkan gravitasi ke tampilan gambar mengikuti 3 langkah yang diuraikan di atas.

Kita akan bekerja dalam ViewDidLoad metode untuk contoh ini. Pertama, tambahkan UIImageView instans sebagai berikut:

image = UIImage.FromFile ("monkeys.jpg");

imageView = new UIImageView (new CGRect (new CGPoint (View.Center.X - image.Size.Width / 2, 0), image.Size)) {
                    Image =  image
                }

View.AddSubview (imageView);

Ini membuat tampilan gambar yang berpusat di tepi atas layar. Untuk membuat gambar "jatuh" dengan gravitasi, buat instans UIDynamicAnimatordari :

dynAnimator = new UIDynamicAnimator (this.View);

UIDynamicAnimator mengambil contoh referensi UIView atau UICollectionViewLayout, yang berisi item yang akan dianimasikan sesuai perilaku yang dilampirkan.

Selanjutnya, buat UIGravityBehavior instans. Anda dapat meneruskan satu atau beberapa objek yang mengimplementasikan IUIDynamicItem, seperti UIView:

var gravity = new UIGravityBehavior (dynItems);

Perilaku diteruskan array dari IUIDynamicItem, yang dalam hal ini berisi instans tunggal UIImageView yang kita animasikan.

Terakhir, tambahkan perilaku ke animator dinamis:

dynAnimator.AddBehavior (gravity);

Ini menghasilkan gambar yang beranimasi ke bawah dengan gravitasi, seperti yang diilustrasikan di bawah ini:

Lokasi gambar awalLokasi gambar akhir

Karena tidak ada yang membatasi batas layar, tampilan gambar hanya jatuh dari bawah. Untuk membatasi tampilan sehingga gambar bertabrakan dengan tepi layar, kita dapat menambahkan UICollisionBehavior. Kita akan membahas ini di bagian berikutnya.

UICollisionBehavior

Kita akan mulai dengan membuat UICollisionBehavior dan menambahkannya ke animator dinamis, seperti yang UIGravityBehaviorkita lakukan untuk .

Ubah kode untuk menyertakan UICollisionBehavior:

using (image = UIImage.FromFile ("monkeys.jpg")) {

    imageView = new UIImageView (new CGRect (new CGPoint (View.Center.X - image.Size.Width / 2, 0), image.Size)) {
        Image =  image
    };

    View.AddSubview (imageView);

    // 1. create the dynamic animator
    dynAnimator = new UIDynamicAnimator (this.View);

    // 2. create behavior(s)
    var gravity = new UIGravityBehavior (imageView);
    var collision = new UICollisionBehavior (imageView) {
        TranslatesReferenceBoundsIntoBoundary = true
    };

    // 3. add behaviors(s) to the dynamic animator
    dynAnimator.AddBehaviors (gravity, collision);
}

UICollisionBehavior memiliki properti yang disebut TranslatesReferenceBoundsIntoBoundry. Mengatur ini untuk true menyebabkan batas tampilan referensi digunakan sebagai batas tabrakan.

Sekarang, ketika gambar menganimasikan ke bawah dengan gravitasi, gambar memantul sedikit dari bagian bawah layar sebelum menetap untuk beristirahat di sana.

UIDynamicItemBehavior

Kita dapat lebih mengontrol perilaku tampilan gambar yang jatuh dengan perilaku tambahan. Misalnya, kita dapat menambahkan UIDynamicItemBehavior untuk meningkatkan elastisitas, menyebabkan tampilan gambar memantul lebih banyak ketika bertabrakan dengan bagian bawah layar.

UIDynamicItemBehavior Menambahkan mengikuti langkah-langkah yang sama seperti dengan perilaku lain. Pertama- tama buat perilaku:

var dynBehavior = new UIDynamicItemBehavior (dynItems) {
    Elasticity = 0.7f
};

Kemudian, tambahkan perilaku ke animator dinamis:

dynAnimator.AddBehavior (dynBehavior);

Dengan perilaku ini di tempat, tampilan gambar memantul lebih banyak ketika bertabrakan dengan batas.

Perubahan Antarmuka Pengguna Umum

Selain API UIKit baru seperti UIKit Dynamics, Transisi Pengontrol, dan animasi UIView yang ditingkatkan yang dijelaskan di atas, iOS 7 memperkenalkan berbagai perubahan visual pada UI, dan perubahan API terkait untuk berbagai tampilan dan kontrol. Untuk informasi selengkapnya, lihat Gambaran Umum Antarmuka Pengguna iOS 7.

Kit Teks

Text Kit adalah API baru yang menawarkan tata letak teks dan fitur penyajian yang canggih. Ini dibangun di atas kerangka kerja Teks Inti tingkat rendah, tetapi jauh lebih mudah digunakan daripada Core Text.

Untuk informasi selengkapnya, silakan lihat TextKit kami

Multitasking

iOS 7 berubah kapan dan bagaimana pekerjaan latar belakang dilakukan. Penyelesaian tugas di iOS 7 tidak lagi membuat aplikasi tetap terjaga ketika tugas berjalan di latar belakang, dan aplikasi dibangunkan untuk pemrosesan latar belakang dengan cara yang tidak berdekatan. iOS 7 juga menambahkan tiga API baru untuk memperbarui aplikasi dengan konten baru di latar belakang:

  • Pengambilan Latar Belakang – Memungkinkan aplikasi memperbarui konten di latar belakang secara berkala.
  • Pemberitahuan Jarak Jauh - Memungkinkan aplikasi memperbarui konten saat menerima pemberitahuan push. Pemberitahuan dapat diam atau dapat menampilkan spanduk di layar kunci.
  • Layanan Transfer Latar Belakang – Memungkinkan pengunggahan dan pengunduhan data, seperti file besar, tanpa batas waktu tetap.

Untuk detail selengkapnya tentang kemampuan multitugas baru, lihat bagian iOS dari panduan Latar Belakang Xamarin.

Ringkasan

Artikel ini membahas beberapa penambahan baru utama untuk iOS. Pertama, ini menunjukkan cara menambahkan transisi kustom ke Lihat Pengontrol. Kemudian, ini menunjukkan cara menggunakan transisi dalam tampilan koleksi, baik dari dalam pengontrol navigasi, serta secara interaktif antara tampilan koleksi. Selanjutnya, ini memperkenalkan beberapa penyempurnaan yang dilakukan pada animasi UIView, menunjukkan bagaimana aplikasi menggunakan UIKit untuk hal-hal yang sebelumnya diperlukan pemrograman langsung terhadap Core Animation. Akhirnya, UIKit Dynamics API baru, yang membawa mesin fisika ke UIKit, diperkenalkan bersama dukungan teks kaya yang sekarang tersedia dalam kerangka kerja Kit Teks.