如何表達複雜的iOS屏幕布局

我想在iOS 7應用程序上實現相當複雜的屏幕布局（我知道它只能在iPhone上運行）。如何表達複雜的iOS屏幕布局

屏幕布局在本質上是頗具動感，看起來像這樣：

+----------------------------+ 
|       | 
| hero image, 320px x 150 px | 
|       | 
+----------------------------+ 
| full width button  | 
+----------------------------+ 
| timestamp (one line)  | 
| LARGE CAPTION (one line) | 
|       | 
| Intro text  +--------+ 
| that may take up |Image | 
| a few lines, but |aligned | 
| don't actually |to intro| 
| know for sure how|text | 
| many    +--------+ 
+----------------------------+ 
| Some Data    | 
| In  Tabular   | 
| Form Which may go over | 
|   more than one line| 
+------------HR--------------+ 
| Long piece of text,  | 
| several paragraphs,  | 
| must scroll for as long | 
| as needed.    | 
+----------------------------+ 
| Some footer text   | 
+----------------------------+

整個畫面一定會需要滾動。

我發現這個通常的方法是：

的UITableView

每個組件都是一個UITableView中的行 - 問題是，我們事先不知道每個的高度行，因此需要手動文本計算。

的UIScrollView /自動版式

沒用過這對任何巨大的影響，但我無法弄清楚如何創建使用Interface Builder組件的一長串 - 這一切佔用了超過一分屏UIScrollView。

大多數方法還需要編寫相當多的代碼才能計算高度，還需要指定小部件的字體，顏色和高度。

我已經知道用於表達所有這些組件之間高度，對齊和關係的通用語言：CSS。我會試圖將webview用於整個事情，但這不是項目其餘部分的風格，而且交互式組件（如按鈕）的行爲必須與本地行爲相同。

解決此問題的最佳方法是什麼？

來源

2013-12-17 funkybro

如果你打算使用IB，這應該很簡單。你會想確定使用UIScrollView，但我不確定AutoLayout。正如你所描述的，UITableView不會讓你的屏幕看起來像。你在使用XCode/IB嗎？ – CaptJak

是的。但是UIScrollView需要知道其中所有組件的x/y位置，不是嗎？這對於一個文本高度不知的文本下面的組件如何工作？ – funkybro

嗨，我只是想跟進，看看下面的答案是否適合你 –

這一切都可以在Interfacebuilder中使用自動佈局完成，該佈局可以在您使用的iOS7中使用。

這是在討論基本功能：https://developer.apple.com/library/ios/documentation/userexperience/conceptual/AutolayoutPG/Introduction/Introduction.html

創建一個這樣的連接件的示例如下：

enter image description here

爲您的照片，只是在頂部增加一個額外的「線」介紹文本，用作介紹文本和圖像的指南。該行將不可見。

由於這是一個大部分垂直的應用程序，您可以簡單地將一個元素的下邊緣連接到下層元素的上邊緣。

此外，您將能夠使用iOS7字體功能，它將根據字體大小更改自動佈局您的用戶界面。這些偏好也可以由用戶設置爲可訪問性。

來源

2013-12-17 16:02:47

的UITableView

每個組件都是一個UITableView中的行 - 問題在於我們事先不知道每一行的高度，因此手工文本需要計算。

那麼這有什麼問題？如果你的行不是全部相同的高度，那麼表格視圖將詢問它的數據源中每一行的高度，因爲它需要它。如果你打算有一千行，這不是一個好的選擇，但這不是這種情況。你只有五六行，所以可變的行高不是問題。

因爲佈局中的每一行都有不同的外觀，所以您需要提供許多不同的單元格類型。把它們放在IB中很容易，所以它不應該是一個問題。

的UIScrollView /自動版式

沒用過這對任何巨大的影響，但我無法弄清楚如何使用Interface Builder

這是相當創建組件的冗長名單簡單明瞭 - 您將視圖安排在容器視圖中，並設置約束條件，使得一個視圖的頂部被約束到前一個視圖的底部。由於您要在運行時調整每個子視圖的高度，因此不需要在故事板中包含每個子視圖的全部高度。使用縮短的版本可以很容易地在IB中安排它們。

來源

2013-12-17 15:57:10 Caleb

「那麼，[手動文本計算]有什麼問題」？現在編寫更多的代碼，並記住稍後再進行更改。爲什麼我無法將物品堆疊在一起，例如Android中的LinearLayout或WindowsPhone上的StackPanel？ – funkybro

@funkybro您*可以* - 這正是autolayout爲您所做的。 – Caleb

那麼爲什麼使用AutoLayout，我需要「在運行時調整每個子視圖的高度」？ UIScrollView不需要知道所有內容的全部高度嗎？ – funkybro

我已經爲此寫了一個庫。我不知道蘋果爲什麼不提供默認設置，這是瘋了。 ETFlowView，它在Github上可用。

來源

2015-10-01 02:15:39

如何表達複雜的iOS屏幕布局

回答

相關問題