en

hi, it seems you are using microsoft internet explorer. it doesn't match web standard and causes problems browsing this site. please please please use mozilla firefox or google chrome instead. thank you!

zh

哦哦!您正在使用Internet Explorer 瀏覽器,它與我們的網頁標準並不相容,可能會導致畫面顯示不正常。
請改用 Mozilla Firefox 或者 Google Chrome 才能正常瀏覽本網站,謝謝!

12.02.2011

不同解析度的裝置共用同一個 Storyboard 的方法與排版問題

 

這裡指的不同解析度的裝置就是 iPhone 和 iPad 兩種,因為目前也只有這兩種可以選,而 Storyboard 是在 iOS 5 SDK 中才出現的新名詞,它其實就是原本的 Xib 檔案(Interface Builder),用來製作介面排版方面的工具,由於兩個裝置解析度不同,通常在界面設計上大多都會選擇使用兩個 Storyboard 來實作他門分別的介面,並且從專案下的 info.plist 中選擇對應的 Storyboard 檔來使用(Main storyboard file base name (iPad) or (iPhone)),但是如果你的應用程式有特殊考量,需要兩個不同解析度的裝置同時共用一個 Storyboard,可以參考以下方法。

首先來到 Target 下的 Summary,將 Device 項目設定成 Universal 通用的,如下圖。


完成上述步驟,你會發現模擬器選項已經可以選擇 iPhone 和 iPad 兩種,接下來就是調整版面的問題,你可以判斷目前的執行機器來設定你的版面,不過這樣似乎又回到分別設定兩個不同 Storyboard 的感覺,另一個方法是先確認你工作區域的大小,再利用 UIView 的 Autoresizing 功能設定位置與調整大小,下面一個簡單的示範,就是使用判斷工作區域的大小,來讓圖片永遠保持在畫面右下角。

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"3D logo.png"]];

//取得工作區域的位置和大小
CGRect workSpaceRect = [[UIScreen mainScreen]applicationFrame];

//取得圖片設置的左上角坐標
CGPoint imagePosition = CGPointMake(CGRectGetWidth(workSpaceRect) - CGRectGetWidth(imageView.frame), CGRectGetHeight(workSpaceRect) - CGRectGetHeight(imageView.frame));

//設定圖片在畫面右下角
[imageView setFrame:CGRectMake(imagePosition.x, imagePosition.y, CGRectGetWidth(imageView.frame), CGRectGetHeight(imageView.frame))];

[self.view addSubview:imageView];

如果對版面配置還有其它問題,可以參考簡單判斷 Device 的方法ㄧ文、取得畫面工作區域的大小ㄧ文,或是關於 UIViewAutoresizing 的二三事一文,希望對你會有幫助。






沒有留言:

張貼留言