LinearLayout layout techniques in Android development and the difference of drawable attributes in layout

Introduce the difference between the drawable properties , this is relatively simple, but there are a little bit of detail to be explained, Drawable has five folders, respectively, HDPI,LDPI,MDPI,XDPI,XXDPI, These five folders must be known, in fact, in order to adapt to different resolutions, because of the different resolution of the mobile phone, so our pictures need to adapt to the different mobile phone resolution ...hdpi:480x800   mdpi:480x320   ldpi:320x240xdpi:1280x720 xxdpi 1920x1280 In fact, this number is not very accurate, only to show that each phase has a resolution range ... Android because it's not like iOS, iOS doesn't need to be resolution, but Android has to think about resolution, for example, the pictures we put in hdpi are pretty normal in the layout, but in xdpi it's going to be very small ... Therefore, when we design the app, we need to consider different mobile phones, so we need to put in these folders in different sizes of pictures, so that the Andorid system can be based on the resolution of the phone to choose the right picture resources to load, to accept the dip in the end to show what it means, In Android, a unit of size, DPI refers to pixels per inch, and simply to say the size value of the DPI in the end ... ldpi refers to 120,mdpi refers to the 160,hdpi refers to the 240,xhdpi refers to 320. For example, the millet mobile phone is 4 inches, 854x480 resolution, then millet Mobile phone dpi is 854 square plus 480 squared and open 2 times after the square divided by 4, the result is about 245. If the application is installed on the Millet mobile phone, then the system will call the DRAWABLE-HDPI inside the map resources. In this way, you only have to do 4 sets of resources in drawable-ldpi, drawable-mdpi, drawable-hdpi and drawable-xdpi (icons can be based on the proportion of 3:4:6:8 to create picture resources), Then the picture can be distorted at different resolutions ...

linearlayout layout tips in Android

above is just a small introduction, the following is the recent discovery of a layout of the technique, the original thought that Relativelayout is the best layout, and also use the table layout, but found that the use of tablelayout is very little, Did not think there is a way of layout is linearlayout, some people will ask, linearlayout what is curious, in fact, LinearLayout is not unusual, but here is a property is Layout_weight, so I recently found ... Although it has been very early ... In short I think this thing is very useful, by using 0dp+layout_weight to layout is a very clever way ... In fact, is to achieve a proportional layout. This layout can be directly adapted to the different phone screen ... This avoids the problem that the layout cannot sync on different phones. For instance ...

<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"     xmlns: tools= "Http://schemas.android.com/tools"     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:background= "#0045f5"          android:gravity= "Center"         android:text= "1"  / >     <textview         android:layout_width= " Wrap_content "        android:layout_height=" Wrap_content "    &nbsP;    android:background= "#00ff47"         android: gravity= "Center"         android:text= "2"            android:layout_weight= "1"/>     <textview          android:layout_width= "Wrap_content"          android:layout_height= "Wrap_content"         android:background= " #ff5600 "        android:gravity=" center          android:layout_weight= "1"         android:text= "3"  /> </LinearLayout>

This is the layout after the style, we set the Layout_width= "Wrap_content", according to the common sense, the system should be allocated to three TextView the default space, and three space should be the same size, But precisely because we set the Layout_weight property for the next two, the system will first assign the default space size to the first TextView, say 10DP, assuming our screen size is 480x800 resolution, Then the remaining 470DP size will be distributed proportionally to two textview ... The second TextView assigned to the size is (470/2=225DP), the second is 225DP ...

So can we make a conclusion? is when you set the Layout_weight control, you assign the remaining controls to the specified proportions? Not really, let's look at a layout ...

<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"     xmlns: tools= "Http://schemas.android.com/tools"     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:background= "#0045f5"          android:gravity= "Center"         android:text= "1"  / >     <textview         android:layout_width= " Wrap_content "        android:layout_height=" Wrap_content "    &nbsP;    android:background= "#00ff47"         android: gravity= "center"         android:text= "2222222222222222222"    
       android:layout_weight= "1"/>     <textview         android:layout_width= "Wrap_content"          android:layout_height= "Wrap_content"          Android:background= "#ff5600"         android:gravity= "center"          android:layout_weight= "1"          android:text= "3"  /> </LinearLayout>

This is the result of the layout, so there will be problems, in fact, set the wrap_content, the system will first look at how much space the control to occupy, that is, first back to the control in accordance with wrap_content allocated space, because the second control of the default space is relatively large, so the system can only use wrap _content allocate space to it, no longer according to the Layout_weight property in accordance with the proportional allocation of space ... So here we set the layout_width can not be set to wrap_content, we need to set to 0DP .... Look at the example below ....

<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"     xmlns: tools= "Http://schemas.android.com/tools"     android:layout_width= "Match_parent"      android:layout_height= "match_parent"     android:orientation= "Horizontal"  >     <textview         android:layout_ Width= "0dip"         android:layout_height= "Wrap_content"          android:background= "#0045f5"          android:gravity= "Center"         android:layout_weight= "1"  
       android:text= "1"  />     <textview         android:layout_width= "0dip"          android:layout_height= "Wrap_content"         android:background= "#00ff47 "        android:gravity=" Center          android:text= "2222222222222222222"           android: layout_weight= "2"/>     <textview          Android:layout_width= "0dip"         android:layout_height= "wrap_content "        android:background=" #ff5600 "         android:gravity= "Center"         android:layout_ weight= "3"         android:text= "3"  /> </LinearLayout>

Here we put the layout_width= "0DP", and then cooperate with the Layout_weight property, achieve the space width of the 1:2:3 distribution, and the length because we do not make the rules, so the use of the Wrap_content property ... So 0DP with the Layout_weight property to achieve the distribution of the distribution of the layout ... So if we want to distribute the height in proportion, then put the layout_height= "0DP" ... Then with the weight attribute can also be achieved in the layout of the height according to the proportional distribution ... Here we must use 0DP ... Explain how Android will be scaled up. We still assume that our screen size is 480, so because we set the three TextView size is 0DP, then the system will be calculated according to the size we set, 480-3*0=480, then the remaining space size is still 480DP, The last remaining space is allocated according to the proportions ... This realizes the width of the 1:2:3 size to allocate ... If we use the "fill_parent" attribute, we will have a different effect ... Looking at the layout below ...

<linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"     xmlns: tools= "Http://schemas.android.com/tools"     android:layout_width= "Match_parent"      android:layout_height= "match_parent"     android:orientation= "Horizontal"  >     <textview         android:layout_ Width= "Fill_parent"         android:layout_height= "Wrap_content"          android:background= "#0045f5"       
  android:gravity= "Center"         android:layout_weight= "1"         android:text= "1"  />     < TextView         android:layout_width= "Fill_parent"           android:layout_height= "Wrap_content"         android: Background= "#00ff47"         android:gravity= "center"          android:text= "2"           android: layout_weight= "2"/>     <textview          Android:layout_width= "Fill_parent"         android:layout_height= "Wrap_ Content "        android:background=" #ff5600          android:gravity= "Center"         android:layout _weight= "2"         android:text= "3"  /> </LinearLayout>

This is the consequence of our use of fill_parent, and not the result of the proportions we want ... The problem here is that because the size of the space we set is the Fill_parent property, the amount of space left is 480-3*480=-960DP, and then proportionally allocated size 480+ ( -960* (1/5)) =228DP 480* ( -960* (2 /5) =96DP Third is also 96DP ... This leads to the appearance of 3:1:1 ... This is the problem with the Fill_parent attribute ... Using Fill_parent this property to match the Layout_weight attribute, the proportion of allocation is required for us to calculate artificially ... See here, is it clear already?

Deep understanding of Layout_weight in Android:linearlayout layout

First look at the role of the Layout_weight attribute in the LinearLayout layout: It is used to allocate a property that belongs to space, and you can set his weight. Many people do not know what the remaining space is a concept, let me say the rest of the space.

Look at the following code:

<?xml version= "1.0"  encoding= "Utf-8"?>      <LinearLayout  Xmlns:android= "Http://schemas.android.com/apk/res/android"            android:orientation= "Vertical"           android:layout_width = "Fill_parent"           android:layout_height= "fill_parent"            >      <EditText  
        android:layout_width= "Fill_parent"           android:layout_height= "Wrap_content"            android:gravity= "left"           android:text= "one"/>       <EditText          android:layout _width= "Fill_parent" &Nbsp;         android:layout_height= "Wrap_content"            android:gravity= "center"            android:layout_weight= "1.0"           android:text= "two"/>           <EditText           android:layout_width= "Fill_parent"           android: layout_height= "Wrap_content"           android:gravity= "right"
          android:text= "three"/>      </LinearLayout>

The results of the operation are:

Look at the code above: only Button2 uses the Layout_weight attribute and assigns it to 1, and Button1 and Button3 do not set layout_weight this property, according to the API, they default to 0

Here's what I mean by layout_weight the real meaning of this property: The Android system layout_height the value of the 3 button height you set, wrap_content, gives you the height of 3.

Then the rest of the screen space will be assigned to Button2, because only his weight value is 1, which is why Button2 accounted for such a large space.

With the above understanding, we can have a clear understanding of the Internet about the Layout_weight this attribute more puzzling effect.

Let's take a look at this piece of code:

? Xml version= "1.0"  encoding= "UTF-8"? >    <linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"          android:layout_width= "Fill_parent"          android:layout_height= "Wrap_content"         android:orientation= " Horizontal " >        <TextView             android:background= "#ff0000"              android:layout_width= "* *"              android:layout_height= "Wrap_content"              android:text= "1"             android:textcolor= "@android: Color/white "            android:layout_weight= "1"/>        <TextView             android:background= "#cccccc"              android:layout_width= "* *"              android:layout_height= "Wrap_content"              android:text= "2"             android:textcolor= "@android: Color/black "            android:layout_weight=" 2 " / >         <TextView             android:background= "#ddaacc"              android:layout_width= "* *"             android : Layout_height= "Wrap_content"             android:text= "3"              android:textcolor= "@android:color/black"   
          android:layout_weight= "3"  />    </LinearLayout>

When the three text boxes are all layout_width= "wrap_content", you get the following effects

According to the above understanding, the system first assigns 3 TextView their width value wrap_content (the width is sufficient to contain their content 1,2,3 can), then will the remaining screen space according to 1:2:3 's ratio column assigns to 3 TextView, therefore appears the above image.

And when Layout_width= "Fill_parent", if the three TextView set their layout_weight to 1, 2, 2, the following effect will appear:

You will find that 1 of the weight is small, but more points, this is why??? Many people on the internet said that when layout_width= "Fill_parent", the smaller the weight of weighth value, the higher the priority, as if in the back of the formula

, in fact, they did not really understand the problem, the real reason is layout_width= "fill_parent" cause. According to the above understanding we analyze:

The system first assigns 3 TextView to their desired width fill_parent, which means that each is filled with his parent control, where the width of the screen is dead.

Then the rest of the space = 1 parent_width-3 a parent_width=-2 parent_width (Parent_width refers to the screen width)

Then the actual width of the first textview should be =fill_parent width, that is, Parent_width + the weight of his remaining space is larger than column 1/5 * remaining space size ( -2 parent_width) =3/5parent_width

Similarly, the actual occupied width of the second TextView =parent_width + 2/5* ( -2parent_width) =1/5parent_width;

The actual occupied width of the third TextView is =parent_width + 2/5* ( -2parent_width) =1/5parent_width; so that's 3:1:1.

You will also understand why when you set the three Layout_weight to 1, 2, 3, the following effect appears:

The third one is not shown directly, why? Let's start by doing the above method to calculate: The

System first assigns 3 TextView the width they want fill_parent, which means that each is filled with his parent control, where the width of the screen is dead

then the remaining space = 1 Parent_ Width-3 a parent_width=-2 parent_width (Parent_width refers to screen width)

Then the actual width of the first textview should be the width of the =fill_parent, that is, the parent _width + the weight of his remaining space is greater than column 1/6 * remaining space size ( -2 parent_width) =2/3parent_width

The actual width of the second TextView =parent_width + 2/6* (- 2parent_width) =1/3parent_width;

The actual width of the third TextView is =parent_width + 3/6* ( -2parent_width) =0parent_width; So it's 2:1:0 's Bille display. The third one is directly out of space.