Android code story first, average interval button, android first

Android code story first, average interval button, android first

Our APP has a new interface for adding operation buttons. The boss asks for concise appearance and connotation, and the buttons should be evenly distributed. Therefore, according to the previous implementation, the design MM gave a figure like this:

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

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

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

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

Of course, the design of MM is for HD images. Here is just a diagram. After analysis, the requirements should be as follows: the two buttons need to be arranged in one row, requiring the spacing between them, and the spacing between the buttons and the screen edge to be equal, and to fill up the entire screen width.

It seems that it is not difficult. Using the LinearLayout feature, layout_weight is used to make the placeholder View of the same size, as shown below:

<? 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

As follows:

<? 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>Comparison of Android Layout XML results:

If the problem is solved, you can fool the boss. The problem is not solved perfectly. Because of the fragmentation of Android, the screen width is not necessarily 360dp. If you think so, there will be a variety of amazing devices that will give you a blow, this is also why the method of writing dead margin cannot be used. Can the code using this method go online? Let's take a look at the various screen widths and substitute W = [300,400] into the formula to get the following table:

The actual width of weight = 5 is proportional L/2, and the actual width of weight = 13 is proportional L + w, the deviation is the gap between the button and the screen and the gap between the two buttons, reflecting the accuracy of the three equal points. We can see that the deviation is only about 3dp when the screen width is DP.

So the conclusion is that the boss can be fooled.

Of course, this is not a perfect solution, but it uses the least code and time to achieve the sub-optimal effect. This gap is not a life-and-death function, so far it will be successful.

Later, we found that when a button is invisible and visibility is set to GONE, another button can be displayed in the center.