Pembuat Antarmuka: Untuk apa Tata Letak UIView iOS 6/7 Deltas?

111

Saya baru saja melihat properti iOS 6/7 Delta yang ditemukan di bawah tata letak struct UIView.

Untuk apa ini dan mengapa ini hilang dari AutoLayout?

masukkan deskripsi gambar di sini

Frederick C. Lee
sumber

Jawaban:

83

Ini sebenarnya mengacu pada Delta antara posisi tata letak dari iOS6 ke iOS7.

Di iOS7, beberapa tampilan dapat menyembunyikan bilah status atau membuatnya transparan dan, efeknya, terhampar di atas tampilan Anda. Jadi jika Anda meletakkan elemen UI di (0.0, 0.0) di iOS6, itu akan muncul di bawah bilah status, tetapi di iOS7 itu akan muncul sebagian tertutup di bawah bilah status. Jadi dalam hal ini Anda menginginkan delta yang cocok dengan tinggi bilah status (20.0 poin) sehingga tata letak terlihat sama di iOS6 dan iOS7.

Saya yakin ini tidak diperlukan jika Anda menggunakan autolayout, tetapi tentu saja, Anda kehilangan dukungan iPad1, yang banyak dari kita tidak mau mengakui saat ini.

digarok
sumber
27
Bagi saya, saya menemukan itu adalah delta dari iOS 7 ke iOS 6. Saya menurunkan elemen saya 20 poin, kemudian menetapkan -20 untuk Delta Y.
guptron
ini sangat berguna dengan UIProgressView yang jauh lebih ramping di iOS 7
Lee Probert
108

Catatan: Saya memperhatikan pertanyaan ini beberapa waktu yang lalu, tetapi saya hanya memposting jawaban saya sekarang karena NDA telah dicabut

Mengapa tidak muncul untuk AutoLayout?

Seperti yang mungkin Anda ketahui, iOS 7 menghadirkan tampilan yang benar-benar baru. Tampilan elemen UI telah berubah, tetapi juga beberapa ukurannya (atau metrik secara umum). Ini dapat membuat desain antarmuka untuk mengakomodasi iOS 7 dan pendahulunya sedikit merepotkan.

Garis resmi Apple adalah menggunakan AutoLayout untuk menyelesaikan ini; ini seharusnya menghilangkan banyak kerumitan dalam menyusun elemen UI untuk Anda. Terkadang menggabungkan ini tidak mudah dilakukan, terutama jika Anda masih harus mendukung iOS 5 karena alasan bisnis, atau antarmuka Anda dikelola dengan cara yang membuat penerapan AutoLayout menjadi sulit. Dengan demikian, Apple tampaknya telah menyediakan cara untuk membuat pekerjaan Anda sedikit lebih mudah jika Anda termasuk dalam kategori khusus ini, dan mereka menamakannya iOS 6/7 Deltas.

Oke, apa fungsinya?

Meskipun label di Interface Builder agak tidak jelas tentang apa arti 'Delta' dalam konteks ini, kode yang terdapat dalam file .xib yang sesuai dengan fitur ini sedikit lebih jelas:

<inset key="insetFor6xAndEarlier" minX="-50" minY="-100" maxX="-50" maxY="300"/>

Nama kunci insetFor6xAndEarliersecara eksplisit menyatakan apa yang dilakukannya; Anda dapat memberikan inset alternatif untuk elemen UI saat dijalankan di iOS 7 sebelumnya. Misalnya, di atas mendefinisikan perubahan delta berikut:

x: 50
y: 100
width: -100
height: 200

Meskipun nilai yang disimpan dalam .xib tidak sesuai dengan nilai yang dikutip secara langsung, ada korelasi di antara keduanya.

x: -minX
y: -minY
width: minX + maxX
height: minY + maxY

Gambar di bawah menunjukkan perubahan ini secara visual. Ini contoh yang cukup ekstrim, tapi untuk menunjukkan kemampuannya. Saya hanya berharap dalam praktiknya memiliki perubahan delta hanya beberapa piksel.

Tampilan iOS7

Tampilan iOS6

Anda mungkin memperhatikan bahwa nilainya adalah kebalikan dari tampilan iOS 6; ini karena delta relatif terhadap jenis tampilan yang Anda kerjakan. Jika Anda mengedit untuk iOS 6, ada delta untuk mengubah elemen dengan benar untuk iOS 7 (kebalikan dari contoh di atas).

Untuk melihat gaya yang berbeda, Anda dapat mengubah cara Interface Builder menyajikannya berdasarkan OS yang akan menjalankannya. Ini terdapat dalam File Inspector-> Interface Builder Document (tab pertama di bilah kanan), sebagai berikut:

Switch Gaya Antarmuka

Apakah ini ada jika saya ingin membuat kode antarmuka saya dengan tangan?

Tidak secara langsung, tetapi Anda dapat dengan mudah mencapai efek yang sama dengan melakukan pemeriksaan bersyarat pada versi OS dalam kode Anda, dan menyetel posisi / ukuran yang sesuai. Kemampuan delta ada di Interface Builder karena tidak akan ada cara langsung untuk memiliki pemosisian bersyarat tanpa kode untuk melakukannya, dan tujuan dari Interface Builder adalah untuk mengeluarkan kode sebanyak mungkin untuk UI.

Secara keseluruhan...

Apple sangat menyarankan Anda menggunakan AutoLayout, ini membuat hidup Anda lebih mudah dalam banyak kasus. Jika Anda tidak dapat menggunakannya (karena alasan yang disebutkan di atas), delta memberi Anda fleksibilitas untuk memposisikan elemen UI dengan tepat, berdasarkan metrik OS saat ini, tanpa perlu mengubah posisinya secara manual dalam kode. Contoh yang bagus adalah menyesuaikan kekurangan bilah status, tetapi ada banyak kasus penggunaan lainnya.

Biasanya, jika Anda hanya mengembangkan untuk iOS7 ke atas, Anda tidak perlu mengetahui fitur ini / tidak akan menemukannya. Hanya jika Anda membutuhkan perangkat iOS6 yang menjalankan aplikasi Anda ketika dibangun dengan SDK iOS7, tanpa tata letak otomatis, Anda memerlukan delta.

Pada saat penulisan (21 Agustus), saya tidak dapat menemukan dokumentasi apa pun terkait fitur ini, atau penyebutan apa pun dalam materi WWDC. Saya telah bermain-main, dan setelah sedikit riset, itulah yang saya temukan.

WDUK
sumber
2
Terima kasih banyak WDUK
Kamar Shad
Sejauh ini tidak ada properti, itulah yang perlu saya ketahui
Jasper
30

Saya tahu ini sudah terjawab, hanya menambahkan varian kecil dengan harapan bisa membantu mereka yang tidak menggunakan tata letak otomatis dan masih ingin mendukung iOS 6.1 dan versi sebelumnya.

Baca Panduan Transisi Apple ini - Mendukung versi sebelumnya

Pilih 'Lihat sebagai' ke 'iOS 7.0 dan Nanti'

masukkan deskripsi gambar di sini

Base UI untuk iOS 7. Untuk iOS 6 berikan nilai delta yang sesuai. Gunakan pratinjau untuk melihat bagaimana ini akan ditampilkan di perangkat iOS 7 dan iOS 6.

masukkan deskripsi gambar di sini

Langkah cepat:

Pilih setiap turunan langsung dari tampilan root satu per satu dan tambahkan 20px ke nilai 'Y' nya.

masukkan deskripsi gambar di sini

Kemudian, pilih semua turunan langsung secara kolektif dan berikan delta Y sebagai -20px. Anda juga dapat melakukan ini dalam kelompok atau satu per satu.

masukkan deskripsi gambar di sini

Saran
sumber
9

AutoLayout membutuhkan setidaknya iOS 6.0. Jika Anda ingin mendukung iOS 5.0 Anda tidak dapat menggunakan AutoLayout.

Dan delta tersebut digunakan untuk membantu Anda menyesuaikan posisi tampilan pada versi iOS yang berbeda (terutama iOS 7 dan versi iOS lebih rendah dari 7).

Saya menggunakan nilai itu untuk membantu saya menyukai gambar ini. masukkan deskripsi gambar di sini

sunkehappy
sumber
1
Ketika saya mengubah ini, tidak ada yang terjadi sama sekali, apakah ada langkah lain yang terlibat?
Baja Daur Ulang
@RecycledSteel lihat jawaban saya di sini: tautan
Riskov
3

Untuk melihat iOS 6/7 Delta beraksi, saya akan mendemonstrasikan dengan SegmentedControl yang muncul dengan benar di perangkat iOS 6 dan iOS 7.

Pertama, pilih .Xib atau ViewController Anda di Storyboard. Hapus centang Use Autolayout dan pilih " View as iOS 7 and later "

masukkan deskripsi gambar di sini

Di kanvas Interface Builder, letakkan SegmentedControl Anda sehingga asalnya.y adalah 20. Di iOS 6/7 Delta, pilih -20 untuk DeltaY

masukkan deskripsi gambar di sini

Ini akan membuat SegmentedControl Anda diletakkan di bawah Status Bar di perangkat iOS 6 dan iOS 7

masukkan deskripsi gambar di sini masukkan deskripsi gambar di sini

Kutipan berguna lainnya dari Panduan Pengembang ke Bilah Status iOS 7

Delta dapat disetel secara individual untuk setiap tampilan dan bekerja seperti yang Anda harapkan. Jika storyboard atau ujung Anda disetel untuk melihat sebagai iOS 6, maka menyetel delta akan menyebabkan tampilan tersebut bergeser dan / atau diubah ukurannya dengan jumlah delta yang ditetapkan saat dijalankan di iOS 7. Bergantian, jika papan cerita atau ujung Anda disetel ke tampilan di iOS 7, maka delta akan diterapkan saat dijalankan di iOS 6

onmyway133
sumber
0

Jika Anda menggunakan AutoLayout, maka Delta tidak tersedia. Coba ini (diuji di iPhone 4 yang menjalankan iOS6):

- (void) viewWillLayoutSubviews {

//iOS 6 workaround offset
if ([[[UIDevice currentDevice] systemVersion] floatValue] < 7) {

    self.view.clipsToBounds = YES;
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenHeight = 0.0;
    screenHeight = screenRect.size.width;
    CGRect screenFrame = CGRectMake(0, -20, self.view.frame.size.width,self.view.frame.size.height+10);

    self.view.frame = screenFrame;
}
}
Marcelo dos Santos
sumber