913
如何用兩個button等分屏幕寬度？
如何用兩個button等分屏幕寬度？
問題引入
現有一個小問題：如何使用兩個按鈕，然後將屏幕寬度評分？如圖：
再進一步細節：如果按鈕的寬度相等呢？不相等呢？
看看人家的實現
Android的實現
1.按鈕寬度相等的實現
這裏直接上布局文件(.xml)的代碼：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:andro
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:visibility="invisible"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="注冊"
/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:visibility="invisible"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="忘記密碼"
/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:visibility="invisible"/>
</LinearLayout>
效果如下：
Android裏麵使用LinearLayout布局，然後直接使用了三個view，然偶設置其不可見(visibility="invisible")，但是占用當前的位置。最後設置每個layout裏麵的控件的weight為1，這樣就保證了用兩個按鈕將屏幕等分。
2.按鈕寬度不相等的實現：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:andro
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:visibility="invisible"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="注冊"
android:minWidth="0dp"
/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:visibility="invisible"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="忘記密碼"
android:minWidth="0dp"
/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:visibility="invisible"/>
</LinearLayout>
效果如下：
這裏的代碼和上麵的大同小異，唯一的區別就是button設置了minWidth。
CSS+HTML的實現：
<style type="text/css">
.container {
display: -webkit-box;
}
.container .tempDiv {
-webkit-box-flex:1;
}
</style>
<section >
<div ></div>
<button >登錄</button>
<div ></div>
<button >忘記密碼</button>
<div ></div>
</section>
運行效果如下：
html這邊比較簡單，隻是把關鍵代碼列出來了。直接使用-webkit-box來設置，然後將每個tempDiv的-webkit-box-flex都設置為1即可。
因為比較簡單，所以也沒有分按鈕width是否相等兩種情況。
iOS中的實現
iOS實現如果單獨做計算也是可以的。可以先將按鈕的寬度相加，然後（屏幕寬度-按鈕相加寬度）/3 得到間隙的大小，然後再將按鈕按照計算結果進行計算放置即可。這裏需要固定按鈕的寬度，才能實現。這裏有個精度損失問題，因為在Int和Float之間轉換有損失。關鍵代碼如下：
let interval = (screenWidth - CGFloat(forgetButtonWidth) - CGFloat(loginButtonWidth) )/3
loginButton.setTitle("登錄", for: UIControlState.normal)
loginButton.setTitleColor(UIColor.white, for: UIControlState.normal)
loginButton.backgroundColor = UIColor.brown
loginButton.frame = CGRect.init(x: Int(interval), y: 100, width: loginButtonWidth, height: 40)
forgetPwdButton.setTitle("忘記密碼", for: UIControlState.normal)
forgetPwdButton.setTitleColor(UIColor.white, for: UIControlState.normal)
forgetPwdButton.backgroundColor = UIColor.darkGray
forgetPwdButton.frame = CGRect.init(x: Int(interval)*2+loginButtonWidth, y: 100, width: forgetButtonWidth, height: 40)
self.view.addSubview(loginButton)
self.view.addSubview(forgetPwdButton)
嚴格來說，這裏並沒有將其平分為三份，不過如果不是太嚴謹的話可以當做平分。
上麵的這種通過計算的方式適合於按鈕等寬或者不等寬的情況進行平分。接下來看看另一種方式：Stack view分割。
先簡單說一下Stack view。它在IOS中的體現就是UIStackView這個類，是iOS9新增的一個布局技術，可以用來進行多個控件的快速布局。具體的介紹就不多說了，不了解的可以參考這裏。
通過StackView，可以快速地實現分割，關鍵代碼如下：
loginButton.setTitle("登錄", for: UIControlState.normal)
loginButton.setTitleColor(UIColor.white, for: UIControlState.normal)
loginButton.backgroundColor = UIColor.brown
forgetPwdButton.setTitle("忘記密碼", for: UIControlState.normal)
forgetPwdButton.setTitleColor(UIColor.white, for: UIControlState.normal)
forgetPwdButton.backgroundColor = UIColor.darkGray
tempViewOne.backgroundColor = UIColor.clear
tempViewTwo.backgroundColor = UIColor.clear
tempViewThree.backgroundColor = UIColor.clear
stackView.addArrangedSubview(tempViewOne)
stackView.addArrangedSubview(forgetPwdButton)
stackView.addArrangedSubview(tempViewTwo)
stackView.addArrangedSubview(loginButton)
stackView.addArrangedSubview(tempViewThree)
//
//set vertical or horizontal
stackView.axis = UILayoutConstraintAxis.horizontal
stackView.distribution = UIStackViewDistribution.fillEqually
self.view.addSubview(stackView)
這裏是用了三個臨時的占位view，然後將他們和兩個按鈕都放到stackView裏麵，設置stackView的distribution為fillEqually。這樣就實現了等分效果，這裏需要注意：我們隻需要對stack進行約束，然後其他的控件布局會由stack view自動管理。實現效果如下：
這樣就實現了兩個button把界麵均分。
這裏麵設置的distribution是 fillEqually，也就是把stackview裏麵的控件都充滿stackview，並且stackview的arranged view都是等寬的。
Question
1、還有其他的方式實現麼？
最後更新：2017-05-09 15:31:40