Android代碼故事第一回，平均間隔的按鈕，android第一回

Android代碼故事第一回，平均間隔的按鈕，android第一回

我們的APP新做了一個放操作按鈕的界面，老板要求簡潔美觀有內涵，按鈕要均勻分布，於是參考之前的實現，設計MM給了一張圖，像這樣：

|==============================================|

|==========[Button]==========[Button]==========|

|==========[Button]==========[Button]==========|

|==============================================|

當然設計MM給的是高清圖片，這裡只是示意一下。經過分析，需求應該是這樣的：兩個按鈕需要排列在一行裡，要求他們之間的間距、以及按鈕和屏幕邊緣的間距要相等，並且要撐滿整個屏幕寬度。

看來並不是什麼難事，利用LinearLayout的特性，使用layout_weight使得占位View大小相同，如下：

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true"> <View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1"/> <ImageView android:layout_width="40dp" android:layout_height="wrap_content" android:src="@drawable/record_start" android:gravity="center_horizontal"/> <View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1"/> <ImageView android:layout_width="40dp" android:layout_height="wrap_content" android:src="@drawable/game" android:gravity="center_horizontal" /> <View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout> </RelativeLayout> Android Layout XML

效果圖如下：

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/layout1" android:layout_width="match_parent" android:layout_height="60dp" android:layout_centerVertical="true"> <View android:layout_width="0dp" android:layout_height="match_parent" android:background="#ffaa00" android:layout_weight="5"/> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:drawableTop="@drawable/ic_action_start" android:gravity="center_horizontal" android:layout_weight="13" android:background="#00ff80" android:text="Play again"/> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:drawableTop="@drawable/ic_action_stop" android:gravity="center_horizontal" android:layout_weight="13" android:background="#4490a0" android:text="Stop"/> <View android:layout_width="0dp" android:layout_height="match_parent" android:background="#ffaa00" android:layout_weight="5"/> </LinearLayout> <LinearLayout android:id="@+id/layout2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/layout1" android:layout_centerVertical="true"> <View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/ic_action_start" android:gravity="center_horizontal" android:text="Play"/> <View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/ic_action_stop" android:gravity="center_horizontal" android:text="Stop"/> <View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout> </RelativeLayout> Android Layout XML 效果對比：

問題初步解決，可以忽悠老板了。問題本身並沒有完美解決，因為安卓的碎片化，屏幕寬度並不一定是360dp，如果你以為是這樣，會有各種奇葩的設備給你會心一擊，這也是不能用寫死margin的方法的原因。用了這個方法的代碼真的能上線麼，我們來考慮一下各種屏幕寬度的情況，將使W=[300, 400]代入公式，得到下面的表：

其中按比例L/2就是weight=5的實際寬度，按比例L+w就是weight=13的實際寬度，偏差是按鈕和屏幕的間距與兩個按鈕之間間距的差，反應了三等分的精確程度，可以看到偏差在屏幕寬度為300dp時僅僅是3dp左右。

所以結論是，真的可以忽悠老板。

當然，至此並沒有完美解決問題，但用了最少的代碼和時間達到了次優的效果，這個間距又不是生死功能，所以到此為止就算開發成功了。

後來還發現一個好處，就是當一個按鈕不可見，visibility設置為GONE的時候，正好另一個按鈕可以居中顯示。