Knowledge Point Analysis Series for Android: a deep understanding of layout_weight attributes

Knowledge Point Analysis Series for Android: a deep understanding of layout_weight attributes
Preface The layout_weight attribute in Android is certainly not unfamiliar to us who often play tricks on the UI. However, when we really use this attribute, we often see some inexplicable layout effects. If we only know it, but do not know why, some unexpected layout effects will certainly make us quite a headache. In this article, we will analyze the layout_weight attribute in detail. From the code: <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "vertical"> <Button android: layout_width = "match_parent" android: layout_height = "wrap_content" android: text = "button1"/> <Button android: layout_width = "match_parent" android: layout_height = "wrap_content" android: text = "button2 "/> <Button android: layout_width = "match_parent" android: layout_height = "wrap_content" android: text = "button3"/> </LinearLayout> we can find that the three buttons do not occupy the entire screen, but adapt to the content size. We added a property android: layout_weight = "1" in button2 and found that the layout was like this: We found that three buttons occupied the screen this time, in addition, the first and third buttons remain the same size as the content, while the second button occupies the remaining screen space. We will explain the above situation: 1. We only use the layout_weight attribute in button2 and assign the value to 1. However, button1 and button2 do not use this attribute. You can know it based on the API, their layout_weight attribute is equal to 0. 2. If LinearLayout explicitly contains the layout_weight attribute, it will be measure twice. The width and height of the three buttons will be calculated normally for the first time, and the remaining space will be allocated based on the value of layout_weight. To sum up in terms of popularity: the Android system first allocates three of them based on the three Button heights you set, Layout_height = wrap_content, then, all the remaining screen space will be assigned to Button2, because only the weight value is 1, which is why Button2 occupies such a large space. In this case, you may have a clear understanding of the layout_weight attribute. Let's take a look at the following code: <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "horizontal"> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_weight = "1" android: text = "1" android: background = "# ff0000"/> <TextView android: layout_width = "wrap_content" andro Id: layout_height = "wrap_content" android: layout_weight = "2" android: text = "2" android: background = "#00ff00"/> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_weight = "3" android: text = "3" android: background = "# 0000ff"/> </LinearLayout> when we set the layout_width of the three textviews to wrap_content, we will get the following layout: this layout fits our analysis above: the system first assigns their width value wrap_content to three textviews (the width is sufficient to include their content 1 ). ,), And then the remaining screen space is allocated to three textviews according to the ratio, so the above image is displayed. If we set the layout_width of the preceding three textviews to match_parent and set their Layout_weight to 1, 2, and 2 respectively for the three textviews, the opposite layout will appear: we can tell that the proportion of their width is. In this way, another effect occurs: the larger the weight, the smaller the space occupied by the control. Therefore, when layout_width is set to match_parent, layout_weight indicates that your control should be as large as possible, but this value is limited, that is, match_parent. When layout_width is set to wrap_content, layout_weight indicates that your control should be as small as possible, but the size is limited, that is, wrap_content. This is the practice of simply remembering how to use it, not why it is used. As a programmer with an ideal pursuit, we will not be the same, because we may have forgotten some day, so we need to understand in principle why it looks like this. According to the above understanding, this phenomenon occurs due to layout_width = "fill_parent". Start the following analysis: 1. the system first assigns the required width match_parent to three textviews, it also specifies that each TextView is filled with its parent control, which is the width of the entire screen. 2. If the attribute layout_width is included, LinearLayout will perform the second measurement and allocate the remaining space based on the weight, here the remaining space = 1 parent_width-3 parent_width =-2 parent_width (parent_width refers to the screen width ). 3. The actual width of the first TextView = parent_width (width of match_parent) + 1/5 (weight ratio of the remaining space) * remaining space size (-2 parent_width) = 3/5parent_width is the same as the actual width occupied by the second TextView = parent_width + 2/5 * (-2parent_width) = 1/5parent_width; the third TextView actually occupies the width = parent_width + 2/5 * (-2parent_width) = 1/5parent_width; then we can know why the ratio is. What if we set Layout_weight to 1, 2, and 3? The third TextView disappears! We can calculate the answer once according to the above method: 1. the system first assigns the match_parent width to the three textviews, which specifies that each TextView is filled with its parent control, here is the width of the screen. 2. If the attribute layout_width is included, LinearLayout will perform the second measurement and allocate the remaining space based on the weight, here the remaining space = 1 parent_width-3 parent_width =-2 parent_width (parent_width refers to the screen width ). 3. The actual width of the first TextView = parent_width (width of match_parent) + 1/6 (weight ratio of the remaining space) * remaining space size (-2 parent_width) = 2/3parent_width is the same as the actual width occupied by the second TextView = parent_width + 2/6 * (-2parent_width) = 1/3parent_width; the actual width of the third TextView = parent_width + 3/6 * (-2parent_width) = 0parent_width; therefore, the display ratio of the three textviews is, and the third TextView disappears, because no space can be allocated to him based on calculation. We can see that everyone understands the computing principle clearly here. I believe it will be helpful for designing the UI layout. This method can also be used to calculate the UI layout used by both match_parent and wrap_content. Next, we will also tell you another property related to Layout_weight: weightSum, as the name suggests, is the total weight value. If weightSum is not specified, the system will add the total number of Layout_weight values as the total weight value. Of course, we can also explicitly specify them here, which is also convenient for our layout, I will give an application about the weightSum attribute below: see this effect, a Button that always occupies half of the screen is actually the XML code is very simple: <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent" android: gravity = "center" android: weightSum = "2" andro Id: orientation = "horizontal"> <Button android: layout_width = "0dp" android: layout_height = "wrap_content" android: layout_weight = "1" android: text = "button"/> </LinearLayout> the development document describes the layout_weight attribute as follows: defines the maximum value of the total weight. If this value is not specified, the sum is the maximum value based on the accumulated value of the layout_weight attribute of all child views. A typical case is that the layout_weight attribute of the subview is 0.5, and the weightSum attribute of LinearLayout is set to 1.0, so that the subview occupies 50 of the available width. From the xml above, we can know that we have set weightSum to 2, layout_width to 0 for the button, and layout_weight to 1 (that is, half of weightSum ), we can get the above effect, so that the Button occupies half of the screen, instead of hard coding.