2.2.1 LinearLayout (Linear Layout)
Category Android Basic Tutorial
Introduction to This Section
This section begins 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) Today we will explain the first layout, LinearLayout (Linear Layout). The screen adaptation we use more is the weight (weight attribute) of LinearLayout. In this section, we will analyze in detail LinearLayout, including some basic attributes, the use of Weight attributes, and how the ratio is calculated. In addition, we will also talk about a less used attribute: android:divider to draw an underline!
1. Learning Diagram for This Section
2. Detailed Explanation of the weight (Weight) Attribute:
① The Simplest Method of Use:
As shown in the figure:
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="#ADFF2F"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:background="#DA70D6"
android:layout_weight="2"/>
</LinearLayout>
To achieve the 1:1 effect of the first one, just change the weight of the two LinearLayouts to 1 and 1 respectively. Usage summary: Divide the horizontal direction according to the ratio: set the android:width attribute of the involved Views to 0dp, and then set the ratio of the android weight attribute; similarly, for the vertical direction, just set the android:height to 0dp and then set the weight attribute! You can try writing a vertical equal ratio division to experience the simple method yourself!
② Detailed Explanation of the weight Attribute:
Of course, if we do not use the above method of setting to 0dp, and directly use wrap_content and match_parent, then we need to continue to analyze the weight attribute, divided into two situations, wrap_content and match_parent! In addition, we also need to see whether the orientation of LinearLayout is horizontal or vertical, which determines the direction of proportional division.
1) wrap_content is relatively simple, just according to the ratio directly
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="#98FB98"
/>
<TextView
android:layout_weight="2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="two"
android:background="#FFFF00"
/>
<TextView
android:layout_weight="3"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="three"
android:background="#FF00FF"
/>
</LinearLayout>
2) matchparent (fillparent): This requires calculation
We 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="#98FB98"
/>
<TextView
android:layout_weight="2"
android:layout_width="fill_parent"
```xml
<LinearLayout 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="Button 1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
</LinearLayout>
4. A Simple Example of LinearLayout:
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="Please enter the phone number to save" />
<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="Save" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Clear" />
</LinearLayout>
</LinearLayout>
5. Notes:
An important issue to consider when using Layout_gravity!!! Problem content: Arrange two TextViews horizontally in a LinearLayout, with one on the left and one on the right, how to do it? You might immediately say: "Set gravity to left for one, and right for the other, and it's done!" Is it really that simple? Have you tried it? Write a simple layout and you will find that things don't go as expected: The code is as follows:
<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="#FF7878"
android:gravity="center"
android:text="O(∩_∩)O haha~" />
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="right"
android:background="#FF7428"
android:gravity="center"
android:text="(*^__^*) Hehe..." />
</LinearLayout>
Running result image:
Seeing this, you might say: Oh, it really doesn't work, how about adding a gravity=left attribute to the outer LinearLayout, and then set the layout_gravity of the second TextView to right, 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="#FF7878"
android:gravity="center"
android:text="O(∩_∩)O haha~" />
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="right"
android:background="#FF7428"
android:gravity="center"
android:text="(*^__^*) Hehe..." />
</LinearLayout>
The result is still the same:
Well, out of options, what to do?
>
**When android:orientation="vertical
1.8 Project-Related Analysis (Various Files, Resource Access)
2.2.1 LinearLayout (Linear Layout)
2.5.4 Basic Use of AutoCompleteTextView (Auto-Complete Text Box)
2.5.8 Detailed Explanation of Notification (Status Bar Notification)
[2.6.4 Simple Use of DrawerLayout (Official Side-Slide Menu)]
8.3.4 Paint API - Xfermode and PorterDuff Detailed Explanation (I)
8.3.5 Paint API - Xfermode and PorterDuff Detailed Explanation (II)
8.3.6 Paint API - Xfermode and PorterDuff Detailed Explanation (III)
8.3.7 Paint API - Xfermode and PorterDuff Detailed Explanation (IV)
8.3.8 Paint API - Xfermode and PorterDuff Detailed Explanation (V)
8.3.14 Paint Several Enum/Constant Values and ShadowLayer Shadow Effects
8.3.17 Detailed Explanation of Canvas API (Part 2) - Collection of Clipping Methods
[8.3.18