Android code story first, average interval button, android first

Source: Internet
Author: User

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.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.