Konversi Storyboard dari iPhone ke iPad


218

Saya memiliki iPhoneaplikasi yang memiliki storyboard. Sekarang saya ingin menyediakan iPadaplikasi juga. Jadi saya bertanya kepada saya apakah ada fungsi yang membantu saya mengubah iPhonestoryboard saya menjadi iPadstoryboard.

Untuk lebih spesifik:

Apakah ada fungsi yang serupa atau hanya ada cara manual?


5
oh terima kasih saya tidak tahu saya harus menandai mereka, saya menandai satu jawaban sekarang sebagai jawaban yang benar. Saya juga melakukan ini di utas lama saya, terima kasih.
dehlen

1
Info terperinci dengan langkah-langkah dan gambar-gambar yang ditemukan di sini di datacalculation.blogspot.in/2014/09/…
iOS Test

Jawaban:


535

Saya menemukan semacam solusi:

  1. Gandakan iPhone-Storyboard Anda dan ganti namanya MainStoryboard_iPad.storyboard

  2. Tutup Xcode dan kemudian buka file ini editor teks apa pun.

  3. Cari targetRuntime="iOS.CocoaTouch"dan ubah ketargetRuntime="iOS.CocoaTouch.iPad"

  4. Ubah kode di MainStoryboard_iPad.storyboard dari:

    <simulatedScreenMetrics key="destination" type="retina4"/> untuk

    <simulatedScreenMetrics key="destination"/>

  5. Sekarang simpan semuanya dan buka kembali Xcode. IPad-Storyboard memiliki konten yang sama dengan file-iPhone tetapi semuanya bisa berantakan.

Ini menghemat waktu saya - semoga ini akan membantu Anda


20
+1 Jika saya bisa, saya akan memberi Anda +100 dari reputasi saya sendiri. Saran brilian! Satu-satunya hal yang saya tidak bisa lakukan adalah membuka storyboard dengan Dashcode, jadi saya menggunakan TextWrangler (tapi saya pikir editor teks akan melakukannya). Terima kasih!
Piotr Justyna

45
Saran yang bagus, terima kasih. Saat Anda melakukannya, Anda mungkin juga ingin mengubah semua width = "320" menjadi width = "768", height = "480" menjadi height = "1024", dll ... langsung dari sini. Karena jauh lebih sederhana daripada melakukannya elemen demi elemen di IB.
Ben G

63
jangan gunakan Dashcode, atau textWrangler, di dalam xCode cukup: klik kanan pada storyboard -> "open as" -> "Source Code" ketika selesai, lakukan hal yang sama kecuali gunakan "Interface Builder - IOS StoryBoard"
hokkuk

16
@PiotrJustyna Anda bisa melakukannya. Tekan di start a bountybawah pertanyaan, pilih jumlah yang diinginkan dan Reward existing answer...
Filip Radelic

33
untuk mendapatkan format iPad juga ubah kode di MainStoryboard_iPad.storyboard dari: <simulatedScreenMetrics key="destination" type="retina4"/>ke<simulatedScreenMetrics key="destination"/>
Marcus Schwab

61

Jika Anda telah membuat proyek universal, secara default iPad storyboard kosong akan dibuat, Anda hanya perlu memilih storyboard iPhone pilih semua (Command + A), salin (Command + C) dan tempel di storyboard iPad. Pastikan untuk memindahkan titik masuk dari storyboard kosong ke storyboard yang baru disalin sebelum kompilasi.


9
Jawaban terbaik, solusi mudah & memungkinkan Anda untuk memodifikasi antarmuka dengan mudah sesudahnya, tidak seperti jawaban teratas. :)
Matt Reid

bagaimana dengan tata letak?
tryKuldeepTanwar

10

Itu tidak berhasil bagi saya. Saya melakukan sesuatu yang sedikit berbeda.

  1. Buat file papan cerita baru untuk versi iPad
  2. Buka file baru dan file yang ingin saya salin di textwrangler (editor teks)
  3. Menyalin teks xml dari file lama ke file baru di antara tag xml ini
  4. Tag pertama <scenes> <!--Contents View Controller-->
  5. Tempel Di Sini
  6. Tag Akhir </class> </classes>

Itu berhasil bagi saya. Saya mendapat layoutout baru dengan semua outlet saya terhubung, yang saja menyelamatkan saya beberapa jam.


1
Memberi yang lain tidak berfungsi untuk saya dan ini membuat semuanya berfungsi seperti yang diharapkan
Shereef Marzouk

4
Anda dapat melakukan ini dari dalam Xcode. Klik kanan / kontrol .storyboardfile dan klik Open As > Source Codeuntuk melihat XML mentah.
Matt Kantor

8

Dari membaca banyak utas di stackoverflow saya menemukan solusinya adalah-

1.Gandakan iPhone-Storyboard Anda dan ganti namanya MainStoryboard_iPad.storyboard

2. klik kanan pada storyboard -> "open as" -> "Source Code".

3.Cari targetRuntime = "iOS.CocoaTouch" dan ubah ke targetRuntime = "iOS.CocoaTouch.iPad"

5. Cari <simulatedScreenMetrics key="destination" type="retina4"/>dan ubah ke<simulatedScreenMetrics key="destination"/>

4.Sekarang simpan semuanya dan klik kanan pada MainStoryboard_iPad.storyboard "open as" -> "IOS StoryBoard" 5. Anda mungkin juga harus mengubah batasan Anda. Itu semua yang telah kamu lakukan.


8
1. Create New Storyboard file with MainStoryboard_iPad.storyboard
2. Copy All the views from MainStoryboard and paste to MainStoryboard_iPad.storyboard

8

1 - Buat "MainStoryboard_iPad.storyboard";

2 - Klik kanan pada Anda "MainStoryboard_iPhone.storyboard"dan "Buka sebagai -> Kode Sumber". Salin semuanya;

3- Klik kanan pada Anda "MainStoryboard_iPad.storyboard"dan "Buka sebagai -> Kode Sumber". Tempel semuanya. Sekarang Cari dan ubah:

  • targetRuntime="iOS.CocoaTouch" to targetRuntime="iOS.CocoaTouch.iPad"
  • type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" to type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.iPad.XIB"

4 - Simpan. Sekarang buka kembali tetapi menggunakan pembangun antarmuka. Anda hanya perlu mengatur ulang.

Metode ini dapat digunakan untuk file .xib juga


1
Ini adalah cara terbaik untuk melakukannya. karena semua tampilan dan komponen akan diubah ukurannya ke format ipad.
Ben

1
Tidak perlu mengubah type = "com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" di versi terbaru ios7.
super9

5

Ini sebaliknya, tetapi saya bisa melakukan pilih semua & salin di storyboard iPad saya (~ 35 adegan) dan rekatkan ke storyboard iPhone saya. Ukuran adegan disesuaikan secara otomatis. Saya hanya melihat dua masalah, saya harus mengganti UISplitViewController (karena hanya iPad), dan latar belakang standar menjadi transparan alih-alih abu-abu (masih bekerja untuk memperbaikinya dengan benar, tanpa secara manual mengatur latar belakang untuk semuanya).

EDIT: Tampaknya latar belakang default untuk UITableView di inspektur Atribut agak aneh. Saya harus secara manual mengatur latar belakang ke "Group Table View Background Color" untuk tampilan tabel yang dikelompokkan, dan "White Color" untuk tampilan tabel yang tidak dikelompokkan. Itu kemudian ditampilkan sebagai "Default" (saya berasumsi karena kemudian cocok dengan nilai hardcoded). - Sebenarnya, bahkan lebih mudah, mengubah dari "Dikelompokkan" menjadi "Statis" dan kembali tampaknya mengatur ulang warna default.


4

Inilah sesuatu yang menyelamatkan saya berjam-jam dan mungkin membantu Anda dengan keterampilan Python.

Saya telah membangun sebuah aplikasi selama dua bulan terakhir, fokus hanya pada iPad yang mengulang UX bersama tim.

Hari ini fokus membangun versi iPhone, mengikuti langkah-langkah di atas (terima kasih!) Tapi saya tidak ingin kemudian harus mengubah ukuran semua elemen ui dari dimensi iPad di editor storyboard visual.

Jadi saya menulis skrip python jig kecil ini untuk memindai melalui file storyboard untuk x, y, lebar, tinggi dan skala semuanya turun dengan rasio 320./768. Maka saya diizinkan untuk hanya fokus pada penyesuaian halus.

  1. Salin papan cerita iPad Anda ke file baru. (mis. iPhoneStoryboard.storyboard)

  2. Jalankan skrip di bawah ini dengan nama file storyboard yang disalin sebagai parameter pertama.

  3. Akan menghasilkan file keluaran dengan suffix _adjusted.storyboard (mis. IPhoneStoryboard.storyboard_adjusted.storyboard)

Semoga ini bisa membantu ...

import re
import sys
import math

afile = sys.argv[1]

scale = 320./768.

number_pattern = '[-0-9]+(.[0-9]+)?'
#width_pattern = 'width="[-0-9]+( ?px)?"'
width_pattern = 'width="[-0-9]+(.[0-9]+)?( ?px)?"'
height_pattern = 'height="[-0-9]+(.[0-9]+)?( ?px)?"'
x_pattern = 'x="[-0-9]+(.[0-9]+)?( ?px)?"'
y_pattern = 'y="[-0-9]+(.[0-9]+)?( ?px)?"'


def replacescaledvalue(scale,pattern,sometext,replacefmt) :
    ip = re.search(pattern, sometext, re.IGNORECASE)
    if(ip) :
        np = re.search(number_pattern,ip.group(0))
        if(np) :
            val = float(np.group(0))
            val = int(math.floor(val*scale))
            sval = replacefmt+str(val)+'"'#+'px"'
            newtext = re.sub(pattern,sval,sometext)
            return newtext
    else :
        return sometext

fin = open(afile)
fout = open(afile+"_adjusted.storyboard", "wt")
for line in fin:
    newline = line
    newline = replacescaledvalue(scale,width_pattern,newline,'width="')
    newline = replacescaledvalue(scale,height_pattern,newline, 'height="')
    newline = replacescaledvalue(scale,x_pattern,newline, 'x="')
    newline = replacescaledvalue(scale,y_pattern,newline, 'y="')
#   print newline
    fout.write( newline )

fin.close()
fout.close()

1
Hai Chrish, saya baru di phython. jadi saya tidak bisa memahami kode untuk mengubah storyboard iphone menjadi iPad. jadi bisa tolong bantu saya dalam hal ini. Storyboard iPad saya dikonversi menjadi storyboard iphone tanpa masalah. tapi saya perlu mengubah storyboard iphone saya ke iPad. Jadi di mana memerlukan perubahan yang perlu di skrip di atas atau Anda dapat berbagi skrip yang mengubah iphone menjadi ipad. Terima kasih sebelumnya.
Shubham

@ Chris Robertson Chris, jika saya ingin menggunakan skrip ini untuk konversi iPhone ke iPad, apakah saya akan mengubah 'skala = 320./768.' untuk 'skala = 768./320.'?
Charles Robertson

3

Buka Ringkasan Target Anda dan ubah perangkat menjadi universal, lalu turun dan atur versi ipad ke storyboard apa pun yang Anda suka termasuk yang disalin dan diganti namanya jika Anda mau.


3

Seperti halnya pesan singkat kepada mereka yang mungkin memiliki masalah dengan ini:

Masalah saya:

Konten storyboard disalin dengan baik ke file papan baru yang saya tambahkan. Namun, itu tidak akan memberikan perubahan pada iPad saya yang disediakan. Memperhatikan bahwa saya harus beralih ke storyboard yang ditunjuk untuk target build (lihat gambar), biarkan perubahan muncul.

Saya akan memposting gambar jika saya memiliki poin, tetapi pengaturannya terletak di:

Navigator proyek pada menu sumber sisi kiri, target root dari tab umum proyek (panel tengah), (penyebaran kedua) informasi penyebaran, dengan tab tombol iPad dipilih.

Dari sana, pilih storyboard Anda di bawah "antarmuka utama."

Terima kasih untuk posting ini, saya harap penyebutan ini membantu masalah di suatu tempat.


3

Hanya untuk bersenang-senang, di XCode 5.1 dan iOS 7.1 Saya juga perlu mengubah nilai "toolVersion" dan "systemVersion" menjadi ini:

toolsVersion="5023" systemVersion="13A603"

Tanpa ini, file storyboard baru tidak akan dikompilasi


3

Menggunakan Kelas Ukuran XCode6 Anda tidak perlu lagi mengubah storyboard ke iPad. Storyboard yang sama dapat digunakan untuk iPhone dan iPad, sehingga Anda tidak perlu memperbarui dua file.

Storyboard yang dihasilkan kompatibel dengan iOS7 +.

Baca lebih lanjut tentang ini di sini: https://developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/chapters/AboutAdaptiveSizeDesign.html#//apple_ref/doc/uid/TP40014436-CH6-SW1

Gunakan kelas ukuran untuk mengaktifkan storyboard atau file xib untuk bekerja dengan semua ukuran layar yang tersedia. Ini memungkinkan antarmuka pengguna aplikasi Anda bekerja pada perangkat iOS apa pun.


3

Untuk Xcode10

  1. Gandakan saja Main.storyboard

  2. Kemudian namai ulang file ke Main_iPad.storyboarddanMain_iPone.storyboard

  3. Tetapkan nama yang sesuai di .plist

masukkan deskripsi gambar di sini

4.Hanya pilih .storyboard yang tepat untuk dikonfigurasi masukkan deskripsi gambar di sini


2

Fungsi ini sekarang sudah ada di dalam. Misalnya, jika seseorang mengubah pengaturan proyek di Info Penempatan -> Perangkat dari iPhone ke Universal, dialog berikut akan muncul:

masukkan deskripsi gambar di sini


3
Ini mungkin bug di Xcode, tapi saya tidak pernah memiliki pekerjaan ini. Storyboard iPad yang dihasilkan tidak ditambahkan ke proyek, dan sepertinya itu tidak dibuat.
s73v3r

2

Saya mengikuti utas ini ketika saya terkena masalah yang sama kemarin. Langkah-langkah yang saya ikuti

  1. Untuk Xcode 5.1, saya harus melakukan beberapa pembersihan storyboard iPhone seperti reuseIdentifiers sel Table hilang, memberikan id papan cerita untuk setiap controller, menghapus adegan yang tidak digunakan.
  2. Salin MainStoryboard_iPhone.storyboard ke MainStoryboard_iPad.storyboard.
  3. Menggunakan vi editor - diubah targetRuntime="iOS.CocoaTouch"menjaditargetRuntime="iOS.CocoaTouch.iPad"
  4. Ubah kode di MainStoryboard_iPad.storyboard dari: <simulatedScreenMetrics key="destination" type="retina4"/>menjadi<simulatedScreenMetrics key="destination"/>
  5. Buka proyek dalam Xcode.
  6. Mengubah perangkat Deployment ke Universal - Pilih opsi TIDAK menyalin iPhone Storyboard.
  7. Xcode akan menetapkan Target Penempatan menjadi 7.1, menangani fungsi yang sudah tidak digunakan lagi.
  8. Untuk memperbaiki kesalahan tampilan yang salah tempat di iPad Storyboard - Mengubah Layout Bingkai untuk Pengontrol yang memberikan kesalahan.

Itu saja .. Terima kasih semua atas bantuan Anda ..


1

Cara termudah dan paling dapat diandalkan untuk melakukan ini adalah dengan menyalin tempel dari storyboard iPad Anda.

  1. Buat storyboard baru dan beri nama seperti MainStoryboard_ipad.
  2. Jadikan aplikasi Anda sebagai aplikasi Universal dengan mengatur properti Perangkat ke Universal pada halaman Ringkasan properti Target untuk proyek Anda. masukkan deskripsi gambar di sini
  3. Buka storyboard iPhone Anda dan pilih semua dan salin
  4. Buka papan cerita iPad Anda dan rekatkan.

Anda harus mengubah ukuran, tetapi bisa lebih cepat daripada membuat ulang seluruh storyboard.


1

Ada solusi yang sangat sederhana untuk versi Xcode yang mendukung kelas ukuran (Diuji dalam Xcode 7 yang merupakan versi saat ini pada saat penulisan). Centang kotak "gunakan kelas ukuran" pada file papan cerita ( Pemeriksa File ), konfirmasikan dialog yang muncul. Kemudian hapus centang pada kotak yang sama - Xcode akan menanyakan Anda apakah Anda ingin menggunakan storyboard ini dengan iPhone atau iPad, dan mengonversi layar di dalamnya dengan tepat. Tidak perlu mengedit file storyboard secara langsung . Untuk iPad dan iPhone, cukup salin storyboard yang sama dan konfigurasikan satu untuk iPad dan satu untuk iPhone menggunakan metode yang dijelaskan.

Dan Sebelum seseorang menyarankan untuk menggunakan kelas ukuran - sementara hebat, mereka kurang nyaman untuk UI yang sangat disesuaikan, seperti game dll


1

Pendekatan Yang Berbeda

  1. Tambahkan kosong-View-Controller dengan Navigasi-Controller di iPad-Storyboard

  2. Ubah Kelas ke Kelas ViewController pertama Anda yang digunakan untuk iPhone, "fooViewController"

  3. Tambahkan Storyboard-Identifier di iPhone-Storyboard "fooViewController_storyboard_identifier" untuk ViewController pertama

  4. Pergi ke "fooViewController.m"

  5. Tambahkan bool variabel bool nibWasLoadForIpad=false

  6. Pergi ke viewDidLoad-Metode

if ( UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad && !nibWasLoadForIpad)
{
    nibWasLoadForIpad=true;
    UIStoryboard* Storyboard_iphone=[UIStoryboard storyboardWithName:@"Main_iPhone" bundle: nil];
    fooViewController *controller = [Storyboard_iphone instantiateViewControllerWithIdentifier:@"fooViewController_storyboard_identifier"];
    [self.navigationController pushViewController:controller animated:YES];
    self.modalPresentationStyle = UIModalPresentationCurrentContext;
}

(ps. Ketahui masalahnya adalah bahwa latar belakang tampilan akan diatur ke putih)


0

Anda harus membuat laporan bug dengan Apple. Anda dapat mengatakan itu adalah duplikat milik saya (10167030) yang telah dibuka sejak September 2011. Hal yang membuat frustrasi dari sudut pandang saya adalah bahwa fitur tersebut ada di Xcode 3 ...


0

Terima kasih atas jawaban semuanya.

Saya mengikuti langkah-langkah di atas, tetapi ketika saya menjalankan aplikasi di bawah simulator atau iPad saya itu terus hanya menggunakan storyboard iPhone.

Untuk beberapa alasan, ketika saya mengubah perangkat target menjadi Universal dan bukan iPhone, Xcode (v5.0) tidak memperbarui file app-Info.plist untuk menyertakan storyboard iPad, jadi saya harus menambahkan entri berikut secara manual ( menggunakan editor plist di Xcode):

Nama dasar file storyboard utama (iPad) ==> MainStoryboard_iPad


0

Saya baru saja mengubah (selain jawaban dari @tharkay):

 <device id="ipad9_7" orientation="landscape">

dan bekerja dengan baik!

Saya menggunakan ini di XCode 8.3.3

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.