Wednesday, March 11, 2020

Android LinearLayout Example

Introduction to this section

This section begins with the layout in Android. There are six major layouts in Android: LinearLayout, RelativeLayout, TableLayout, FrameLayout, AbsoluteLayout, GridLayout ( (Grid Layout) And today we are going to explain the first layout, LinearLayout (linear layout), the more we use screen adaptation is LinearLayout's weight (weight attribute), in this section, we will Analyze the LinearLayout in detail, including some basic properties, the use of the Weight property, and how to calculate the proportion. In addition, the next less used property: android: divider draws an underline!

Detailed explanation of the 2.weight (weight) attribute:

1. The simplest usage:
Android LinearLayout  Example


<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 first 1: 1 effect, you only need to change the weights of the two LinearLayouts to 1 and 1, respectively. The usage is summarized: divide the horizontal direction proportionally: set the android: width property of the involved View to 0dp, then set the android weight property to set the ratio; analogy, vertical direction, just set android: height to 0dp, and then set the weight property! Everyone can write a simple usage of vertical proportioning experience!
2. Detailed weight attribute:
Of course, if we do not apply the above method of setting to 0dp and directly use wrap_content and match_parent, then we must parse the weight property, which is divided into two cases, wrap_content and match_parent! It also depends on whether the orientation of the LinearLayout is horizontal or vertical, which determines which direction is divided equally.

1) wrap_content is relatively simple, it is directly proportional
<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) match_parent (fill_parent): This needs to be calculated
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" 
        android: layout_height = "fill_parent" 
        android: text = "two"   
        android: background = "# FFFF00" 
     /> 
     <TextView 
        android: layout_weight = "3" 
        android: layout_width = "fill_parent" 
        android: layout_height = "fill_parent" 
        android: text = "three"   
        android: background = "# FF00FF" 
     /> 
 
</ LinearLayout> 
3)  Set the weight attribute in the Java code:
setLayoutParams (new LayoutParams (LayoutParams.FILL_PARENT,     ( new LayoutParams ( LayoutParams . FILL_PARENT ,   
        LayoutParams.WRAP_CONTENT, 1)); LayoutParams . WRAP_CONTENT , 1 ));  
3. Set the dividing line for LinearLayout
Many interface developments will set some underscores or dividing lines to make the interface more neat and beautiful, such as the registration page for cool dog music below:
For this kind of line, we usually have two ways: ① directly add a view to the layout, the role of this view is just to display a line, and the code is very simple:
<View 
    android: layout_width = "match_parent"  android: layout_width = "match_parent"
    android: layout_height = "1px"  android: layout_height = "1px"
    android: background = "# 000000" />  android: background = "# 000000" />   
The second is to use a divider property 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 example: showDividers sets the dividing line Position, none (beginning), beginning (end), end (end), middle (between every two components) 3) dividerPadding set the padding of the dividing line
Example of use:
<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:
<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>  

No comments:

Post a Comment