Chuyển đổi Storyboard từ iPhone sang iPad


218

Tôi có một iPhoneứng dụng có bảng phân cảnh. Bây giờ tôi cũng muốn cung cấp một iPadứng dụng. Vì vậy, tôi đã hỏi tôi liệu có một chức năng giúp tôi chuyển đổi iPhonebảng phân cảnh của mình thành iPadbảng phân cảnh hay không.

Để được cụ thể:

Có một chức năng tương tự hoặc chỉ có cách thủ công?


5
oh cảm ơn tôi không biết tôi phải đánh dấu chúng, bây giờ tôi đã đánh dấu một câu trả lời là đúng. Tôi cũng đã làm điều này trong chủ đề cũ của tôi, cảm ơn.
dehlen

1
Thông tin chi tiết với các bước và hình ảnh được tìm thấy tại đây tại datacalculation.blogspot.in/2014/09/ trên
Thử nghiệm iOS

Câu trả lời:


535

Tôi tìm ra một loại giải pháp:

  1. Sao chép iPhone-Storyboard của bạn và đổi tên nó MainStoryboard_iPad.storyboard

  2. Đóng Xcode và sau đó mở tệp này bất kỳ trình soạn thảo văn bản.

  3. Tìm kiếm targetRuntime="iOS.CocoaTouch"và thay đổi nó thànhtargetRuntime="iOS.CocoaTouch.iPad"

  4. Thay đổi mã trong MainStoryboard_iPad.storyboard từ:

    <simulatedScreenMetrics key="destination" type="retina4"/> đến

    <simulatedScreenMetrics key="destination"/>

  5. Bây giờ hãy lưu mọi thứ và mở lại Xcode. Bảng phân cảnh iPad có cùng nội dung với tệp iPhone nhưng mọi lỗi có thể bị xáo trộn.

Điều này giúp tôi tiết kiệm hàng giờ - hy vọng điều này sẽ giúp bạn


20
+1 Nếu tôi có thể, tôi sẽ cung cấp cho bạn +100 từ danh tiếng của riêng tôi. Lời khuyên tuyệt vời! Điều duy nhất tôi không thể làm là mở bảng phân cảnh bằng Dashcode, vì vậy tôi đã sử dụng TextWrangler (nhưng tôi nghĩ rằng bất kỳ trình soạn thảo văn bản nào cũng sẽ làm được). Cảm ơn!
Piotr Justyna

45
Lời khuyên tốt, cảm ơn. Trong khi bạn đang ở đó, có lẽ bạn cũng có thể muốn thay đổi tất cả width = "320" thành width = "768", height = "480" thành height = "1024", v.v ... trực tiếp từ đây. Vì nó đơn giản hơn nhiều so với thực hiện từng yếu tố trong IB.
Ben G

63
không sử dụng Dashcode, cũng không phải textWrangler, bên trong xCode chỉ đơn giản là: nhấp chuột phải vào bảng phân cảnh -> Mở như là - - Mã nguồn Mã khi thực hiện, hãy làm điều tương tự ngoại trừ sử dụng Trình tạo giao diện trên iOS - IOS StoryBoard "
hokkuk

16
@PiotrJustyna bạn có thể làm điều đó. Nhấn start a bountyvào câu hỏi, chọn số tiền mong muốn và Reward existing answer...
Filip Radelic

33
để có được định dạng iPad cũng thay đổi mã trong MainStoryboard_iPad.storyboard từ: <simulatedScreenMetrics key="destination" type="retina4"/>sang<simulatedScreenMetrics key="destination"/>
Marcus Schwab

61

Nếu bạn đã tạo một dự án phổ quát, theo mặc định, bảng phân cảnh iPad trống sẽ được tạo, bạn chỉ cần chọn bảng phân cảnh iPhone chọn tất cả (Command + A), sao chép (Command + C) và dán vào bảng phân cảnh iPad. Đảm bảo di chuyển điểm vào từ bảng phân cảnh trống sang bảng phân cảnh mới được sao chép trước khi biên dịch.


9
Câu trả lời tốt nhất, giải pháp dễ dàng & cho phép bạn sửa đổi giao diện dễ dàng sau đó không giống như câu trả lời hàng đầu. :)
Matt Reid

Bố cục thì sao?
thửKuldeepTanwar

10

Điều đó không làm việc cho tôi. Tôi đã làm một cái gì đó hơi khác một chút.

  1. Tạo một tập tin bảng câu chuyện mới cho phiên bản iPad
  2. Mở cả tệp mới và tệp tôi muốn sao chép trong textwrangler (trình soạn thảo văn bản)
  3. Sao chép văn bản xml từ tệp cũ sang tệp mới giữa các thẻ xml này
  4. Thẻ đầu tiên <scenes> <!--Contents View Controller-->
  5. Dán ở đây
  6. Thẻ kết thúc </class> </classes>

Điều đó làm việc cho tôi. Tôi có một bố cục mới với tất cả các cửa hàng của tôi được kết nối, một mình tôi đã tiết kiệm được một vài giờ.


1
+1 những người khác đã không làm việc cho tôi và điều này khiến mọi thứ hoạt động như mong đợi
Shereef Marzouk

4
Bạn có thể làm điều này từ trong Xcode. Chỉ cần nhấp chuột phải / điều khiển vào các .storyboardtệp và nhấp Open As > Source Codeđể xem XML thô.
Matt Kantor

8

Từ việc đọc nhiều luồng trên stackoverflow tôi phát hiện ra giải pháp là-

1. Lặp lại Bảng phân cảnh iPhone của bạn và đổi tên thành MainStoryboard_iPad.storyboard

2. nhấp chuột phải vào bảng phân cảnh -> Mở ra dưới dạng - - Nguồn mã Code.

3. Tìm kiếm targetR.78 = "iOS.CocoaTouch" và thay đổi nó thành targetR.78 = "iOS.CocoaTouch.iPad"

5. Tìm kiếm <simulatedScreenMetrics key="destination" type="retina4"/>và thay đổi nó thành<simulatedScreenMetrics key="destination"/>

4.Bây giờ hãy lưu tất cả mọi thứ và nhấp chuột phải vào MainStoryboard_iPad.storyboard Cấm mở dưới dạng - - "IOS StoryBoard" 5. bạn cũng có thể phải thay đổi các ràng buộc của mình. Đó là tất cả những gì bạn đã làm.


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 - Tạo của bạn "MainStoryboard_iPad.storyboard";

2 - Nhấp chuột phải vào bạn "MainStoryboard_iPhone.storyboard"và "Mở dưới dạng -> Mã nguồn". Sao chép mọi thứ;

3- Nhấp chuột phải vào bạn "MainStoryboard_iPad.storyboard"và "Mở dưới dạng -> Mã nguồn". Dán mọi thứ. Bây giờ Tìm kiếm và thay đổi:

  • 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 - Lưu lại. Bây giờ mở lại nhưng sử dụng trình xây dựng giao diện. Bạn sẽ chỉ phải sắp xếp lại.

Phương pháp này cũng có thể được sử dụng cho các tệp .xib


1
Đây là cách tốt nhất để làm điều đó. bởi vì tất cả các khung nhìn và các thành phần sẽ được thay đổi kích thước thành định dạng ipad.
Bến

1
Không cần thay đổi loại = "com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" trong phiên bản mới nhất của ios7.
super9

5

Điều này diễn ra theo một cách khác, nhưng tôi đã có thể chọn tất cả & sao chép trong bảng phân cảnh iPad của mình (~ 35 cảnh) và dán nó vào bảng phân cảnh iPhone của tôi. Các kích thước cảnh được tự động điều chỉnh. Tôi chỉ thấy hai vấn đề, tôi phải thay thế UISplitViewControll (vì chỉ có iPad) và nền mặc định trở nên trong suốt thay vì màu xám (vẫn hoạt động để sửa lỗi đó, mà không cần cài đặt nền cho mọi thứ một cách thủ công).

EDIT: Có vẻ như nền tảng mặc định cho UITableView trong Trình kiểm tra thuộc tính khá lạ. Tôi phải đặt thủ công nền thành "Màu nền của bảng xem nhóm" cho các chế độ xem bảng được nhóm và "Màu trắng" cho các chế độ xem bảng không được nhóm. Sau đó, nó được hiển thị là "Mặc định" (Tôi giả sử vì sau đó nó khớp với giá trị được mã hóa cứng). - Trên thực tế, thậm chí còn dễ dàng hơn, thay đổi từ "Được nhóm" thành "Tĩnh" và quay lại dường như đặt lại màu mặc định.


4

Đây là thứ giúp tôi tiết kiệm hàng giờ và có thể giúp những bạn có kỹ năng Python.

Tôi đã xây dựng một ứng dụng trong hai tháng qua, tập trung vào chỉ iPad lặp lại UX với nhóm.

Hôm nay tập trung vào việc xây dựng phiên bản iPhone, làm theo các bước ở trên (cảm ơn!) Nhưng sau đó tôi không muốn thay đổi kích thước tất cả các yếu tố ui từ kích thước iPad trong trình chỉnh sửa bảng phân cảnh.

Vì vậy, tôi đã viết kịch bản jig python nhỏ này để quét qua tập tin bảng phân cảnh cho x, y, chiều rộng, chiều cao và thu nhỏ mọi thứ theo tỷ lệ 320./768. Cho phép tôi sau đó chỉ tập trung vào điều chỉnh tốt.

  1. Sao chép bảng phân cảnh iPad của bạn vào một tệp mới. (ví dụ: iPhoneStoryboard.storyboard)

  2. Chạy đoạn script bên dưới với tên tệp bảng phân cảnh được sao chép làm tham số đầu tiên.

  3. Sẽ tạo tệp đầu ra với hậu tố _adjusted.storyboard (ví dụ: iPhoneStoryboard.storyboard_adjusted.storyboard)

Hy vọng nó giúp...

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
Xin chào Chrish, tôi là người mới trong phython. vì vậy tôi không thể hiểu được mã để thay đổi bảng phân cảnh iphone thành iPad. vì vậy bạn có thể vui lòng giúp tôi về điều này. Bảng phân cảnh ipad của tôi đang chuyển đổi thành bảng phân cảnh iphone mà không gặp vấn đề gì. nhưng tôi cần chuyển đổi bảng phân cảnh iphone của mình sang iPad. Vì vậy, nơi yêu cầu thay đổi cần có trong tập lệnh trên hoặc bạn có thể chia sẻ tập lệnh chuyển đổi iphone thành ipad. Cảm ơn trước.
Shubham

@Chris Robertson Chris, nếu tôi muốn sử dụng tập lệnh này để chuyển đổi iPhone sang iPad, tôi sẽ thay đổi 'scale = 320./768.' đến 'tỷ lệ = 768./320.'?
Charles Robertson

3

Chuyển đến Tóm tắt mục tiêu của bạn và thay đổi thiết bị thành phổ quát, sau đó đi xuống và đặt phiên bản ipad thành bất kỳ bảng phân cảnh nào bạn muốn bao gồm một bản sao chép và đổi tên nếu bạn muốn.


3

Cũng như một ghi chú nhanh chóng cho những người có thể có vấn đề của tôi với điều này:

Vấn đề của tôi:

Nội dung bảng phân cảnh được sao chép độc đáo vào một tập tin bảng mới mà tôi đã thêm. Tuy nhiên, nó sẽ không thay đổi đối với iPad được cung cấp của tôi. Nhận thấy rằng tôi phải chuyển qua bảng phân cảnh được chỉ định cho mục tiêu xây dựng (xem hình ảnh) để các thay đổi hiển thị.

Tôi sẽ đăng một hình ảnh nếu tôi có điểm, nhưng cài đặt nằm ở:

Trình điều hướng dự án trên menu nguồn bên trái, mục tiêu gốc của tab chung của dự án (khung giữa), thông tin triển khai (tiêu đề phụ thứ hai), với tab nút iPad được chọn.

Từ đó, chọn bảng phân cảnh của bạn trong "giao diện chính".

Cảm ơn cho bài viết, tôi hy vọng đề cập này sẽ giúp một chút khó khăn ở đâu đó.


3

Để giải trí, trên XCode 5.1 và iOS 7.1 tôi cũng cần thay đổi các giá trị của "toolVersion" và "systemVersion" thành điều này:

toolsVersion="5023" systemVersion="13A603"

Không có cái này, tập tin bảng phân cảnh mới sẽ không biên dịch


3

Sử dụng các lớp kích thước XCode6, bạn không còn cần phải chuyển đổi bảng phân cảnh sang iPad. Có thể sử dụng cùng một Storyboard cho cả iPhone và iPad, giúp bạn không phải cập nhật hai tệp.

Bảng phân cảnh kết quả tương thích với iOS7 +.

Đọc thêm về điều này tại đây: https://developer.apple.com/l Library / ios / recipes / xcode_help -IB_adaptive_sizes / ch chương / vềAdAdiveiveSizeDesign.html # / // numplef / doc / uid / TP40014436-CH6-WW1

Sử dụng các lớp kích thước để cho phép tập tin bảng phân cảnh hoặc xib hoạt động với tất cả các kích thước màn hình có sẵn. Điều này cho phép giao diện người dùng của ứng dụng của bạn hoạt động trên mọi thiết bị iOS.


3

Đối với Xcode10

  1. Chỉ cần nhân đôi Main.storyboard

  2. Sau đó, đặt lại tên tệp Main_iPad.storyboardMain_iPone.storyboard

  3. Đặt tên thích hợp trong .plist

nhập mô tả hình ảnh ở đây

4.Chỉ cần chọn .storyboard thích hợp để cấu hình nhập mô tả hình ảnh ở đây


2

Chức năng này hiện được tích hợp sẵn. Ví dụ: nếu một người thay đổi cài đặt dự án trong Thông tin triển khai -> Thiết bị từ iPhone sang Universal, hộp thoại sau sẽ hiển thị:

nhập mô tả hình ảnh ở đây


3
Nó có thể là một lỗi trong Xcode, nhưng tôi chưa bao giờ có công việc này. Bảng phân cảnh iPad kết quả không được thêm vào dự án và có vẻ như nó không được tạo.
s73v3r

2

Tôi đã theo dõi chủ đề này khi tôi gặp vấn đề tương tự ngày hôm qua. Các bước tôi làm theo

  1. Đối với Xcode 5.1, tôi đã phải thực hiện một số thao tác dọn dẹp bảng phân cảnh iPhone như thiếu các phần tái sử dụng của các ô Bảng, cung cấp id bảng câu chuyện cho mọi bộ điều khiển, loại bỏ các cảnh không sử dụng.
  2. Sao chép MainStoryboard_iPhone.storyboard vào MainStoryboard_iPad.storyboard.
  3. Sử dụng trình soạn thảo vi - đã đổi targetRuntime="iOS.CocoaTouch"thànhtargetRuntime="iOS.CocoaTouch.iPad"
  4. Thay đổi mã trong MainStoryboard_iPad.storyboard từ: <simulatedScreenMetrics key="destination" type="retina4"/>thành<simulatedScreenMetrics key="destination"/>
  5. Mở dự án trong Xcode.
  6. Đã thay đổi các thiết bị Triển khai thành Universal - Chọn tùy chọn KHÔNG sao chép Bảng phân cảnh iPhone.
  7. Xcode sẽ mặc định Target Deployment là 7.1, đảm nhiệm các chức năng không dùng nữa.
  8. Để khắc phục lỗi xem sai vị trí trong Bảng phân cảnh iPad - Thay đổi Bố cục khung cho Bộ điều khiển đưa ra lỗi.

Đó là nó .. Cảm ơn tất cả sự giúp đỡ của bạn ..


1

Cách dễ nhất và đáng tin cậy nhất để làm điều này là sao chép dán từ bảng phân cảnh iPad của bạn.

  1. Tạo một bảng phân cảnh mới và đặt tên nó là MainStoryboard_ipad.
  2. Biến ứng dụng của bạn thành ứng dụng Universal bằng cách đặt thuộc tính Thiết bị thành Universal trên trang Tóm tắt của thuộc tính Target cho dự án của bạn. nhập mô tả hình ảnh ở đây
  3. Mở bảng phân cảnh iPhone của bạn và chọn tất cả và sao chép
  4. Mở bảng phân cảnh iPad của bạn và dán.

Bạn sẽ phải thay đổi kích thước, nhưng nó có thể nhanh hơn việc tạo lại toàn bộ bảng phân cảnh.


1

Có một giải pháp thực sự đơn giản cho các phiên bản Xcode hỗ trợ các lớp kích thước (Đã thử nghiệm trong Xcode 7, đây là phiên bản hiện tại tại thời điểm viết). Kiểm tra các "lớp học quy mô sử dụng" hộp kiểm trên một tập tin kịch bản ( file Inspector ), xác nhận rằng hộp thoại xuất hiện. Sau đó bỏ chọn hộp kiểm tương tự - Xcode sẽ hỏi bạn nếu bạn muốn sử dụng bảng phân cảnh này với iPhone hoặc iPad và chuyển đổi màn hình trong đó một cách thích hợp. Không cần trực tiếp chỉnh sửa tập tin bảng phân cảnh . Đối với cả iPad và iPhone, chỉ cần sao chép cùng một bảng phân cảnh và định cấu hình một cho iPad và một cho iPhone bằng phương pháp được mô tả.

Và Trước khi ai đó đề xuất sử dụng các lớp kích thước - trong khi tuyệt vời, chúng không thuận tiện cho giao diện người dùng được tùy chỉnh nhiều, chẳng hạn như trò chơi, v.v.


1

Một cách tiếp cận khác

  1. Thêm một Trình điều khiển xem trống với Trình điều khiển điều hướng trong Bảng phân cảnh iPad

  2. Thay đổi Class thành Class của ViewContoder đầu tiên của bạn được sử dụng cho iPhone, "fooViewControll"

  3. Thêm Trình nhận dạng bảng phân cảnh trong Bảng phân cảnh iPhone "fooViewControll_storyboard_identifier" cho ViewContoder đầu tiên

  4. Chuyển đến "fooViewControll.m"

  5. Thêm bool Biến bool nibWasLoadForIpad=false

  6. Chuyển đến viewDidLoad-Method

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. Biết vấn đề là hình nền sẽ được đặt thành màu trắng)


0

Bạn nên tạo một báo cáo lỗi với Apple. Bạn có thể nói đó là bản sao của tôi (10167030) đã được mở từ tháng 9 năm 2011. Điều khó chịu theo quan điểm của tôi là tính năng tồn tại trong Xcode 3 ...


0

Cảm ơn câu trả lời của mọi người.

Tôi đã làm theo các bước trên nhưng khi tôi chạy ứng dụng theo trình giả lập hoặc iPad của mình thì nó vẫn tiếp tục sử dụng bảng phân cảnh iPhone.

Vì một số lý do, khi tôi thay đổi thiết bị đích thành Universal thay vì iPhone, Xcode (v5.0) đã không cập nhật tệp app-Info.plist để bao gồm bảng phân cảnh iPad, vì vậy tôi phải thêm thủ công mục sau ( sử dụng trình soạn thảo plist trong Xcode):

Tên cơ sở của bảng phân cảnh chính (iPad) ==> MainStoryboard_iPad


0

Tôi chỉ thay đổi (thêm vào câu trả lời từ @tharkay):

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

và hoạt động tuyệt vời!

Tôi sử dụng điều này trong XCode 8.3.3

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.