2017-07-03 33 views
1

我已經想通了如何使用自動佈局,使所有的按鈕可見,但我被困在一個特定的目標:Xcode的分割屏幕分爲4個巨人按鈕

我想將屏幕分爲4個巨頭按鈕,每個按鈕佔用屏幕高度的1/2和屏幕寬度的1/2,彼此之間沒有間距。我嘗試設置約束,但按鈕不能正確顯示。

請參閱我在這裏發佈的兩張圖片,我想讓它使iPhone SE視圖看起來與iPhone 7視圖相同。上次我發佈了類似的問題,我的聲望下降了,但我不知道爲什麼,我是一個剛剛開始自己​​的人,並且正在努力弄清楚所以請指教。謝謝!

iPhone7View

iPhoneSEView

+0

這將是有益的包括_how_您設置的約束 – Alladinian

+0

對於每個按鈕的一些信息,我最初的嘗試是設置約束到屏幕邊緣爲零。所以左上角的按鈕左上角約束0,右下角約束右下角0,依此類推......我想我可以設置約束,然後設置每個按鈕之間的間距爲0,以便他們都可以調整並填充屏幕,但也許我錯了,因爲我無法工作:( –

+0

我的猜測是你已經描述了通過約束來定位視圖,但你沒有描述_sizing_。你可以簡單地選擇所有四個視圖,並檢查相同的寬度/高度,以驗證是這種情況...或使用Ryans答案來管理你的約束與棧視圖 – Alladinian

回答

1

這可以通過約束來實現,但它也可以與stackViews輕鬆完成。

let button1 = UIButton() 
button1.backgroundColor = .red 
let button2 = UIButton() 
button2.backgroundColor = .blue 
let button3 = UIButton() 
button3.backgroundColor = .green 
let button4 = UIButton() 
button4.backgroundColor = .orange 

let topStack = UIStackView(arrangedSubviews: [button1, button2]) 
topStack.axis = .horizontal 
topStack.distribution = .fillEqually 

let bottomStack = UIStackView(arrangedSubviews: [button3, button4]) 
bottomStack.axis = .horizontal 
bottomStack.distribution = .fillEqually 

let stackView = UIStackView(arrangedSubviews: [topStack, bottomStack]) 
stackView.axis = .vertical 
stackView.distribution = .fillEqually 

stackView.frame = view.bounds 
stackView.autoresizingMask = [.flexibleHeight, .flexibleWidth] 

view.addSubview(stackView) 
+0

這是一個新的東西對我來說,但它看起來像解決方案!我將它添加到類HomeViewController下的相關swift文件中:UIViewController {}?如果我想爲每個按鈕設置縮放比例填充圖像怎麼辦? –

+0

是的,你可以將它添加到viewDid加載你的視圖控制器。而且您仍可以爲每個按鈕設置圖像,而不會出現問題。只需在按鈕的imageView上設置'clipsToBounds = true'即可。 –

1

遵循以下步驟:(很簡單容易實現

  1. 所有的意見(橙色,紅色,藍色和綠色)
  2. 刪除所有約束條件選擇所有四個視圖和分配Top, Bottom, Leading & Trailing constraint的常數值= 0(相對於您在快照中顯示的位置)
  3. 選擇橙色和紅色視圖並分配Equal Width Constraint
  4. 選擇藍色和綠色的意見和分配Equal Width Constraint
  5. 選擇橙色和藍色的意見和分配Equal Height Constraint
  6. 選擇紅色和綠色的意見,並在此快照分配Equal Height Constraint

看(參考約束,所有按鈕都在左窗格中提到的)

enter image description here

最後查看: enter image description here

+0

我試過了,但現在它使按鈕超級小,「pin」到屏幕的角落 –

+0

@AndrewQin - 我附上快照(按照我已經解釋的步驟),結果爲 – Krunal

+0

謝謝你的回答,我已經得到它完美地工作。 –

2

以下是您所需佈局的約束的屏幕截圖。 enter image description here

我要附加故事板也。 File Download Link

沒有上下瀏覽

enter image description here

File Download Link

+0

@krunal它假設是父視圖的一半,所以這就是爲什麼你需要0.5。否則等於WHOM?我的意思是關於哪個視角是平等的? –

+0

頂部和底部視圖無法正確顯示視圖層次結構的複雜性。 –

+0

@ArtemStepaneko你可以在沒有這些視圖的情況下做到這一點,在這種情況下,你必須使父按鈕的高度爲0.5。但我喜歡分開它很容易修改的意見。 –