Tampilan kustom dengan Storyboard


96

Di layar yang kompleks (View Controllers) saya biasa memisahkan semuanya menjadi bagian-bagian yang lebih kecil (saya menyebutnya widget). Widget ini pada dasarnya terdiri dari a MyWidget.hdan MyWidget.mfile serta MyWidget.xibfile, di mana elemen root adalah a UIViewdan kelas MyWidget adalah Pemilik File dari UIView. Di init widget ini saya melakukan a loadNibNamed.

Dalam View Controller saya, saya kemudian melakukan [[MyWidget alloc] init], yang saya tambahkan ke tampilan utama View Controller sebagai sub view. Sejauh ini, ini bekerja dengan sempurna.

Saya sekarang bertanya-tanya, bagaimana melakukan hal yang sama dengan storyboard, karena saya tidak bisa benar-benar mulai menyeret ke suatu UIViewtempat, saya selalu harus memulai dengan UIViewController, yang tidak saya inginkan.

Jika tidak ada cara yang mungkin untuk melakukan ini dengan Storyboard, dapatkah saya melakukannya dengan cara lama, dengan menggunakan Storyboard untuk layar utama dan segmen saya, dan menggunakan file .xib terpisah untuk menentukan tampilan kustom?


Apakah Anda ingin membuat xibs untuk pengontrol tampilan Anda secara terpisah dan bukan di papan cerita?
tipycalFlow

Apakah Anda menemukan solusi untuk ini?
aryaxt

@ Karyaxt: Saya menggunakan campuran Storyboard dan xib. Papan cerita untuk layar utama dan xib dengan hanya UIView sebagai root untuk tampilan atau widget yang kompleks. Jadi bukan jawaban atas pertanyaan asli saya (dengan menggunakan storyboard), tetapi pada dasarnya melakukan hal yang sama seperti yang saya lakukan sebelumnya.
znq

akhir-akhir ini, cukup gunakan tampilan kontainer , sesederhana itu .. stackoverflow.com/questions/23399061/…
Fattie

Jawaban:


189

Meletakkan widget / tampilan dalam file .xib yang terpisah dapat dilakukan, dan ini sesuai terutama jika Anda mungkin ingin merujuk tampilan yang sama dari beberapa Pengontrol Tampilan.

Namun, terkadang Anda ingin melihat tampilan / widget tambahan dalam storyboard yang sama, dan itu memungkinkan. Inilah cara Anda melakukannya:

  1. Pilih pengontrol tampilan Anda di IB (klik pada bilah hitam di bawah tampilan), lalu seret UIView dari Perpustakaan Objek ke dalam bilah hitam:

    masukkan deskripsi gambar di sini

  2. Saat tampilan ada di bilah hitam, itu dibuat seperti tampilan lain di IB tetapi tidak ditambahkan ke hierarki tampilan Anda sampai Anda melakukannya dalam kode. Ubah kelas tampilan agar sesuai dengan subkelas Anda sendiri jika perlu:

    masukkan deskripsi gambar di sini

  3. Anda dapat menghubungkannya ke pengontrol tampilan seperti saat Anda menghubungkan tampilan lainnya: masukkan deskripsi gambar di sini

  4. Tampilan tambahan muncul di Kerangka Dokumen Anda dan Anda juga dapat menghubungkan tindakan dan referensi di sana:

    masukkan deskripsi gambar di sini


Sekarang, masalah yang tersisa adalah Anda tidak dapat benar-benar melihat tampilan tersebut tidak peduli berapa kali Anda mencoba mengklik atau mengklik dua kali, yang akan menggagalkan seluruh tujuan untuk meletakkannya di storyboard yang sama. Untungnya ada dua solusi yang saya ketahui.

Solusi pertama adalah menyeret kembali tampilan dari bilah hitam ke tampilan pengontrol tampilan Anda, mengeditnya, lalu menyeretnya kembali ke bilah hitam setelah Anda selesai. Ini merepotkan tapi bisa diandalkan.

Solusi lain lebih rumit, tetapi saya lebih suka karena ini memungkinkan saya melihat semua pandangan saya pada saat yang sama:

  1. Seret UITableView dari Object Library ke tampilan yang baru Anda tambahkan.

  2. Kemudian seret UITableViewCell ke UITableView itu.

    masukkan deskripsi gambar di sini

  3. Setelah Anda melakukannya, tampilan Anda muncul secara ajaib di samping, tetapi Anda memiliki UITableView yang tidak Anda inginkan. Anda dapat mengubah ukurannya menjadi 0x0, atau Anda dapat menghapusnya dan UIView Anda (biasanya) akan tetap terlihat.

  4. Terkadang tampilan sekunder akan disembunyikan lagi di IB. Anda dapat mengulangi langkah-langkah di atas jika Anda menghapus UITableView, atau jika UITableView masih dalam hierarki, Anda hanya perlu mengklik UITableViewCell dan tampilan akan muncul lagi.

Metode kedua berfungsi untuk UIViews tetapi tidak begitu baik untuk UIToolbars dan tidak mungkin untuk UIButtons, jadi solusi terbersih yang saya temukan ketika Anda perlu memasukkan banyak subview yang berbeda adalah dengan melampirkan UIView sekunder tunggal ke pengontrol tampilan Anda sebagai wadah yang tidak pernah ditampilkan, letakkan semua tampilan sekunder Anda di sana, dan gunakan trik UITableViewCell untuk membuat semuanya terlihat. Saya mengubah ukuran UITableView tiruan saya menjadi 0x0 agar tidak terlihat. Berikut tangkapan layar tentang bagaimana semuanya terlihat bersama:

masukkan deskripsi gambar di sini


Maret 2013, saya tidak perlu melakukan ini - Anda harus mengabaikan bilah hitam sepenuhnya, dan seret / lepas tampilan Anda langsung ke tampilan utama, dan berfungsi dengan baik (Xcode 4.5+)
Adam

Apakah mungkin untuk menggunakan kembali uivew kustom itu pada ViewController yang sama - Jika saya mis. membutuhkan dua uivews kustom - Dan jika itu bagaimana?
Morten Gustafsson

2
Sial, saya lebih suka membuat xib terpisah. Saya mungkin tidak akan mengingat semua ini ketika saya harus memperbarui aplikasi dalam 6 bulan.
Sandy

Meskipun ini adalah jawaban yang luar biasa, saya tidak sengaja menemukan cara lain yang lebih baik menurut saya. Saat menghubungkan outlet ke komponen tampilan aktual. Jika Anda mengarahkan kursor sedikit ke atas komponen tampilan dalam seperti itu - itu akan muncul untuk pemilihan yang lebih mudah. Kemudian Anda melihatnya di papan cerita ...
Oded Ben Dov

7
Meskipun ini adalah jawaban bersejarah yang sangat mengagumkan, sebenarnya ini sudah ketinggalan zaman. Apple memperbaiki seluruh masalah dengan memperkenalkan "tampilan kontainer", yang sekarang menjadi hal utama dan dasar yang Anda lakukan saat membuat aplikasi - semuanya menjadi "tampilan kontainer" setiap saat. Syukurlah, sekarang sangat mudah!
Fattie

11

Jika Anda hanya ingin membuat pengontrol tampilan Anda di tempat lain (dan bukan di papan cerita Anda), maka ada cara yang cukup sederhana untuk melakukannya:

1) Buat CustomViewControllers Anda ( abcdControllerdalam kode yang saya coba) dengan masing-masing xibseperti biasa.

2) Tambahkan UIViewController(atau apa pun superclass Anda CustomViewController) ke papan cerita.

3) Atur CustomClass ke CustomViewControlleralih-alih UIViewControllerseperti yang ditunjukkan di sini:

masukkan deskripsi gambar di sini

4) Akhirnya, di Anda viewDidLoad, muat kustom xibdan Anda selesai.

- (void)viewDidLoad
{
    [super viewDidLoad];
    [[NSBundle mainBundle] loadNibNamed:@"abcdController" owner:self options:nil];
    // Do any additional setup after loading the view from its nib.
}

3
Terima kasih atas jawaban Anda yang sangat mendetail, tetapi saya sebenarnya tidak mencari pengontrol tampilan khusus, tetapi tampilan khusus (widget), yang akan ditambahkan ke UIViewController standar. Jadi pengontrol tampilan bukanlah masalahnya, tetapi saya bertanya-tanya apa pendekatan terbaik untuk membuat widget khusus. Entah A) melakukannya seperti yang saya lakukan sebelumnya, dengan file .xib atau B) beberapa pendekatan lain yang belum saya ketahui :-)
znq

1
Hmm ... Saya rasa saya mendapatkan apa yang Anda inginkan. Pada dasarnya Anda ingin menangani banyak tampilan dengan pengontrol yang sama, bukan? Saya tidak bisa memikirkan cara lain selain loadNibNameddalam kasus itu ... XO
tipycalFlow

Ini memecahkan masalah ini untuk saya: stackoverflow.com/questions/11047991/… Namun, alih-alih viewDidLoad, saya menggunakan loadView ...
Morkrom

1
Sekadar mengulang, ini semua (syukurlah!) Benar-benar ketinggalan zaman sekarang karena tampilan kontainer ada di sini. Cukup klik tampilan kontainer dan semuanya selesai
Fattie

1

Saya pikir Anda dapat melakukan sesuatu seperti ini untuk mendapatkan contoh viewcontroller tertentu dari Storyboard dan menggunakan view di atasnya.

ex:
MyViewController* myViewController = [[UIStoryboard storyboardWithName:@"Main"  bundle:nil] instantiateViewControllerWithIdentifier:@"myViewController"];
UIView* view = myViewController.view; //Get the view from your StoryBoard.

Semoga ini membantu

Terima kasih Vijay

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.