LinearLayout(linear layout)


Introduction to this section

This section starts with the layout in Android. There are six major layouts in Android, namely: LinearLayout (linear layout), RelativeLayout (relative layout), TableLayout (table layout) FrameLayout (frame layout), AbsoluteLayout (absolute layout), GridLayout (grid layout) What we are going to explain today is the first layout, LinearLayout (linear layout), our use of screen adaptation The most commonly used one is the weight (weight attribute) of LinearLayout. In this section, we will analyze it in detail. LinearLayout, including some basic attributes, the use of the Weight attribute, and how to calculate the proportion, in addition Will say the next less used attribute: android:divider draws an underline!

  1. Learning chart for this section

    1.jpg

2. Detailed explanation of weight attribute:

①The simplest usage:

As shown in the picture:

2.png

Implementation code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:orientation="horizontal">    
        
    <LinearLayout    
        android:layout_width="0dp"    
        android:layout_height="fill_parent"    
        android:background="../style/images/android-tutorial-linearlayout.html"     
        android:layout_weight="1"/>    
       
        
    <LinearLayout    
        android:layout_width="0dp"    
        android:layout_height="fill_parent"    
        android:background="../style/images/android-tutorial-linearlayout.html"     
        android:layout_weight="2"/>    
        
</LinearLayout>

To achieve the first 1:1 effect, you only need to change the weights of the two LinearLayouts to 1 and 1 respectively. Usage summary: Divide the horizontal direction proportionally: Set the android:width attribute of the involved View to 0dp, and then set it to android The weight attribute can be set to a proportion; by analogy, in the vertical direction, just set android:height to 0dp, and then set the weight attribute! You can write your own vertical equal-proportion division and experience the simple usage!

② Detailed explanation of weight attribute:

Of course, if we do not apply the above method of setting 0dp and directly use wrap_content and match_parent, Then you need to parse the weight attribute, which is divided into two situations, wrap_content and match_parent! Also watch Whether the orientation of LinearLayout is horizontal or vertical, this determines which direction to divide equally.

1)wrap_content is relatively simple, just proportional

3.png

Implementation code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"  
    android:orientation="horizontal" >    
    
    <TextView    
        android:layout_weight="1"    
        android:layout_width="wrap_content"    
        android:layout_height="fill_parent"    
        android:text="one"     
        android:background="../style/images/android-tutorial-linearlayout.html"    
     />    
     <TextView    
        android:layout_weight="2"    
        android:layout_width="wrap_content"    
        android:layout_height="fill_parent"    
        android:text="two"     
        android:background="../style/images/android-tutorial-linearlayout.html"    
     />    
     <TextView    
        android:layout_weight="3"    
        android:layout_width="wrap_content"    
        android:layout_height="fill_parent"    
        android:text="three"     
        android:background="../style/images/android-tutorial-linearlayout.html"    
     />    
    
</LinearLayout>

2)match_parent(fill_parent): This needs to be calculated

Let's write this simple code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent" >    
    
    <TextView    
        android:layout_weight="1"    
        android:layout_width="fill_parent"    
        android:layout_height="fill_parent"    
        android:text="one"     
        android:background="../style/images/android-tutorial-linearlayout.html"    
     />    
     <TextView    
        android:layout_weight="2"    
        android:layout_width="fill_parent"    
        android:layout_height="fill_parent"    
        android:text="two"     
        android:background="../style/images/android-tutorial-linearlayout.html"    
     />    
     <TextView    
        android:layout_weight="3"    
        android:layout_width="fill_parent"    
        android:layout_height="fill_parent"    
        android:text="three"     
        android:background="../style/images/android-tutorial-linearlayout.html"    
     />    
    
</LinearLayout>

Operation rendering:

4.png

At this time, you will have questions, how could this happen? The ratio is 2:1, so where did three go? It's clearly in the code For three, 3 is also set, and the ratio of 1 and 2 is wrong. 1:2:3 becomes 2:1:0. How could this happen? Answer: It’s actually not that simple here. We still need to calculate it. There are several algorithms given on the Internet. Here is the author’s One that I think is easier to understand: step 1: Everyone is fill_parent, but there is only one screen, then 1 - 3 = - 2 fill_parentstep 2: The ratio in turn is 1 /6,2/6,3/6step 3:First come first served, first assigned to one, calculation: 1 - 2 * (1/6) = 2/3 fill_parent ​ ​ ​ Next to two, calculate: 1 - 2 * (2/6) = 1/3 fill_parent ​ ​ ​ Finally, we come to three, calculate 1 - 2 * (3/6) = 0 fill_parentstep 4: So the final result is: one occupies two shares, two occupies one share, and three has nothing. The above is the reason why three does not appear. Maybe you are still a little confused after reading it. It’s okay. Let’s try it with a few more examples and you will know!

The ratio is: 1:1:1

5.png

Calculate it once according to the above calculation method, the result is: 1/3 1/3 1/3, that’s right

Then let’s try again: 2:3:4

6.png

Calculation results: 5/9 3/9 1/9. Comparing the renderings, 5:3:1 is correct, so you should mark this calculation method!

③Set the weight attribute in Java code:

setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.WRAP_CONTENT, 1));

3. Set the dividing line for LinearLayout

In many interface development, some underlines or dividing lines are set to make the interface more tidy and beautiful, such as the following Kugou Music registration page:

7.jpg

For this kind of line, we usually have two methods① directly add a view in the layout. The function of this view is only to display a line, and the code is also very simple:

<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="../style/images/android-tutorial-linearlayout.html" />

This is a black line in the horizontal direction. Of course, you can also change it to other colors or use pictures.

20682772.jpg

②The second method is to use a divider attribute of LinearLayout to directly set the dividing line for LinearLayout. Here you need to prepare a picture of the line yourself 1) android:divider sets the picture as the dividing line 2) android:showDividers sets the position of the dividing line, none (none), beginning (start), end (end), middle (between each two components) 3)dividerPadding sets the Padding of the dividing line

Usage example:

8.jpg

Implementation code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:id="@+id/LinearLayout1"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:divider="@drawable/ktv_line_div"  
    android:orientation="vertical"  
    android:showDividers="middle"  
    android:dividerPadding="10dp"  
    tools:context="com.jay.example.linearlayoutdemo.MainActivity" >  
  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="按钮1" />  
  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="按钮2" />  
  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="按钮3" />  
  
</LinearLayout>

4. Simple example of LinearLayout:

9.jpg

The implementation code is as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="fill_parent"    
    android:layout_height="fill_parent"    
    android:orientation="vertical"    
    tools:context=".MainActivity" >    
        
    <TextView    
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"    
        android:text="请输入要保存的电话号码"/>    
    <EditText    
        android:layout_width="fill_parent"    
        android:layout_height="wrap_content"/>    
    <LinearLayout    
        android:layout_width="fill_parent"    
        android:layout_height="wrap_content"    
        android:orientation="horizontal"    
        android:gravity="right">    
        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="保存"/>    
        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="清空"/>    
    </LinearLayout>    
</LinearLayout>

5. Notes:

A very important issue when using Layout_gravity!!! Question content: How to arrange two TextViews in the horizontal direction of a LinearLayout and want one to be left and one to be right? Maybe you will blurt out: "Just set a left and a right for gravity!" Is it really that simple? Have you tried it? Write a simple Layout and you will find that it backfires: code show as 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"
tools:context="com.jay.example.getscreendemo.MainActivity" >

<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="left"
android:background="../style/images/android- tutorial-linearlayout.html"
android:gravity="center"
android:text="O(∩_∩)Ohaha~" />

<TextView
android :layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="right"
android:background="../style/images/android-tutorial-linearlayout.html"
        android:gravity="center"
                                                                                                                                                                                                                                                  ‐‐‐‐‐‐‐‐‐

Running result graph:

10.jpg

When you see this, you will say: Oops, it really doesn’t work. How about adding a gravity=left attribute to the outer LinearLayout, and then setting the second one? The layout_gravity of TextView is right. Well, let’s try it:

<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"
android:gravity="left"
tools:context="com.jay.example.getscreendemo. MainActivity" >

<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:background="../style/images/android- tutorial-linearlayout.html"
android:gravity="center"
android:text="O(∩_∩)Ohaha~" />

<TextView
android :layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="right"
android:background="../style/images/android-tutorial-linearlayout.html"
        android:gravity="center"
                                                                                                                                                                                                                                                  ‐‐‐‐‐‐‐‐‐

The result is still the same:

12.jpg

Okay, I’m at my wits end, what should I do?

When android:orientation="vertical", only the horizontal setting will take effect, and the vertical setting will not take effect. That is: left, right, center_horizontal are valid. When android:orientation="horizontal" is used, only the vertical setting takes effect, and the horizontal setting does not. That is: top, bottom, center_vertical are valid.

However, this method seems to be of no use. for example: If you can only set left and right alignment in the vertical direction, the following effect will appear:

13.jpg

This is obviously not the result we want! To sum up, either layout according to the rules given above, but in this case, use relative layout RelativeLayout! There is no specific reason given on the Internet. They all say that this is the change. Some people say that this is related to the priority of orientation. , let’s mark it down for now, and I’ll explain it later if I know the reason! I’ve also mentioned screen adaptation before, and layout is still recommended. RelativeLayout!


←
→