Android Commonly used 5 There are several ways of big layout :

  • Linear layout (LinearLayout): Components arranged vertically or horizontally .
  • Frame layout (FrameLayout): Components layout components from the top left of the screen .
  • Table layout (TableLayout): Layout components in rows and columns .
  • Relative layout (RelativeLayout): Relative to the layout of other components .
  • Absolute layout (AbsoluteLayout): Layout components in absolute coordinates .
 

1. Linear layout

Linear layout is Android One of the most common layouts in development , It's arranged vertically or horizontally , adopt “android:orientation” Property to set the direction of the linear layout . Property value has a vertical value (vertical) And level (horizontal) Two kinds of .

Common properties :

android:orientation: You can set the direction of the layout
android:gravity: Used to control the alignment of components
layout_weight: Control the relative size of each component in the layout

First instance

① design sketch :

② The core code is as follows :

main.xml

 <?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"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="right"
>
<!-- android:gravity="right" Express Button Align components to the right -->
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text=" determine "
/>
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text=" Cancel "
/>
</LinearLayout>
</LinearLayout>

Second example

① design sketch :

② Core code :

mian.xml
 <?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"> <LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"> <TextView
android:text="red"
android:gravity="center_horizontal"
android:background="#aa0000"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
/>
<!--android:gravity="center_horizontal" Horizontal center -->
<!--layout_weight Property to control the relative size of each control in the layout .layout_weight Property is a nonnegative integer value .
The linear layout is based on the control layout_weight Value and all controls in its layout layout_weight The ratio of the sum of the values assigns the area occupied by the control .
for example , In the horizontal layout of LinearLayout There are two Button, these two items. Button Of layout_weight Property values are all 1,
So both of these buttons are stretched to half the width of the screen . If layout_weight It means 0, Control will be displayed in its original size , It doesn't stretch ;
For the rest layout_weight Property value is greater than 0 Control for , The system will subtract layout_weight The property value is 0 The width or height of the control ,
Then use the remaining width or height according to the corresponding proportion to allocate the width or height of each control display -->
<TextView
android:text="Teal"
android:gravity="center_horizontal"
android:background="#008080"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/> <TextView
android:text="blue"
android:gravity="center_horizontal"
android:background="#0000aa"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
/> <TextView
android:text="orange"
android:gravity="center_horizontal"
android:background="#FFA500"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
/> </LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"> <TextView
android:text="row one"
android:textSize="15pt"
android:background="#aa0000"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<!-- -->
<TextView
android:text="row two"
android:textSize="15pt"
android:background="#DDA0DD"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
/> <TextView
android:text="row three"
android:textSize="15pt"
android:background="#008080"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<TextView
android:text="row four"
android:textSize="15pt"
android:background="#FFA500"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>
</LinearLayout>
2.  Frame layout
The frame layout is from the top left corner of the screen (0,0) Coordinates start to lay out , Multiple components are stacked , The first added component is placed at the bottom , Finally, the view added to the frame is displayed at the top . The control of the previous layer will cover the control of the next layer .
A simple example
① design sketch :
②  Core code :
main.xml
 <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="300dp"
android:layout_height="300dp"
android:background="#00BFFF"
/>
<TextView
android:layout_width="260dp"
android:layout_height="260dp"
android:background="#FFC0CB"
/>
<TextView
android:layout_width="220dp"
android:layout_height="220dp"
android:background="#0000FF"
/>
</FrameLayout>
3. Table layout
Table layout is a ViewGroup Show its subviews in a table (view) Elements , That is, rows and columns identify the location of a view .
The common attributes of table layout are as follows :
android:collapseColumns: Hides the specified column
android:shrinkColumns: Shrink the specified column to fit the screen , It doesn't squeeze out the screen
android:stretchColumns: Try to fill in the blanks with the specified columns
android:layout_column: Control in the specified column
android:layout_span: The number of columns the control spans
A simple example :
① design sketch :

②  Core code :
 main.xml
 <?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TableRow>
<Button
android:text="Button1"
/>
<Button
android:text="Button2"
/>
<Button
android:text="Button3"
/>
</TableRow>
<TableRow>
<Button
android:text="Button4"
/>
<Button
android:layout_span="2"
android:text="Button5"
/>
</TableRow> </TableLayout>
4. Relative layout
Relative layout is based on the relative position between components , For example, on the left side of a component , On the right , Up and down, etc .
A simple example
① design sketch :
 
② Core code :
main.xml
 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10px"
>
<TextView
android:id="@+id/tev1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
android:text="Please Type Here:"
/>
<EditText
android:id="@+id/tx1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/tev1"
/>
<Button
android:id="@+id/btn1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="@id/tx1"
android:layout_alignParentRight="true"
android:text=" determine "
/>
<Button
android:id="@+id/btn2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="@id/tx1"
android:layout_toLeftOf="@id/btn1"
android:layout_marginRight="30dp"
android:text=" Cancel "
/>
</RelativeLayout>
5. Absolute layout
  Absolute layout by specifying the exact X,Y Coordinates to determine the position of the component , stay Android2.0 API The document indicates that the class has expired , have access to FrameLayout perhaps RelativeLayout Instead of . So I won't go into details here .

【Android One of the development study notes 】5 More related articles about big layout

  1. 【 turn 】Android Develop learning notes :5 Detailed explanation of the general layout

    Android Commonly used 5 There are several ways of big layout : Linear layout (LinearLayout): Components arranged vertically or horizontally . Frame layout (FrameLayout): Components layout components from the top left of the screen . Table layout (Tabl ...

  2. Android Development 5 Detailed explanation of the general layout

    Android Commonly used 5 There are several ways of big layout : Linear layout (LinearLayout): Components arranged vertically or horizontally . Frame layout (FrameLayout): Components layout components from the top left of the screen . Table layout (Tabl ...

  3. Android Development of 5 Detailed explanation of the general layout

    Android Commonly used 5 There are several ways of big layout : Linear layout (LinearLayout): Components arranged vertically or horizontally . Frame layout (FrameLayout): Components layout components from the top left of the screen . Table layout (Tabl ...

  4. android Develop learning notes 000

    Using books :< insane android The notes >—— Li Gang ,2011 year 7 Published in Although it is now 2014, But I choose to jump around , I'll start with this book android Take a trip . “ Madness comes from dreams , Brilliant technological achievements .” Let me take this ...

  5. Linux A firewall iptables Learning notes ( 3、 ... and )iptables Command details and examples [ Reprint ]

     Linux A firewall iptables Learning notes ( 3、 ... and )iptables Command details and examples  2008-10-16 23:45:46 Reprint This configuration is easy to understand when I see it on the Internet , So it turned around , Let's see , I hope to be able to ...

  6. ( turn )live555 Learning notes 10-h264 RTP Transmission details (2)

    Reference resources : 1,live555 Learning notes 10-h264 RTP Transmission details (2) http://blog.csdn.net/niu_gao/article/details/6936108 2,H264 sps ...

  7. 【Android Develop learning notes 】【 The eighth lesson 】 Five major layouts - Next

    Concept The five layouts have been introduced in the last article LinearLayout RelativeLayout In this article, we introduce the remaining three layouts FrameLayout The best single of the five layouts . In this layout, the whole interface is treated as ...

  8. 【Android Develop learning notes 】【 Lesson 7 】 Five major layouts - On

    Concept Android There are all kinds of programs , It depends on the layout , Let's first see how the layout comes from : The white part is the layout we often use , This paper mainly introduces the following five layouts FrameLayout AbsoluteLayout Line ...

  9. 【 turn 】Android Develop learning notes ( One )—— First time to know Android

    For a programmer ,“ The top-down ” It's the most common way to analyze and solve problems , But it is a simple and effective one . therefore , Apply it to Android In my study , Not to turn one's impulse into a kind of blindness and bewilderment . root ...

Random recommendation

  1. Linux Problem handling : stdio.h: No such file or directory linux

    I was going to compile it < Self made programming language > The code of a Book , The results indicate an error : In fact, it is very clear , Generally, there is no corresponding library installed , therefore : Compile again , success : Test code : # comment print ...

  2. QComboBox Of activated And currentIndexChanged The difference between

    void activated ( int index ) void activated ( const QString & text ) The signal activated Yes, just click the selection box, even if the selection is ...

  3. jquery obtain ( Set up ) Attributes and attribute values of nodes

    1. attr( Property name )        // Get the value of the property ( Get the attribute value of the first matching element . With this method, you can easily get the value of an attribute from the first matching element . If the element has no corresponding attribute , Then return to undefined ) 2 ...

  4. 【poj1001】 Exponentiation

    http://poj.org/problem?id=1001 ( Topic link ) The question Find the real number R Of n Power , High precision is required . Solution SB topic Wa All afternoon , Directly solve the problem . High precision , Decimals and leading and leading zeros are numb ...

  5. frequentism-and-bayesianism-chs

    frequentism-and-bayesianism-chs Frequentism and Bayesianism —— A practical introduction this notebook First appeared in the blog Pythonic Perambulations The article .BSD l ...

  6. Windows Lower installation storm-0.9.1

    Windows Lower installation storm-0.9.1 The detailed steps are as follows : 1. Make sure that is installed properly JDK1.6 or JDK1.7( The specific installation steps are as follows ) 2. install Python2.7 edition ( test storm-starter proje ...

  7. About WebAPI The problem of security authentication

    Before the project encountered an external supply API The problem of , Some superficial ideas , Take time to record . What is discussed below is to solve : Who is qualified to call this API The problem of ( Who has the authority to carry out this operation ) To simplify thinking , Just take one to see Java The students in the class hold ...

  8. netty Open source analysis reactor Thread the veil ( Two )

    If you are right about netty Of reactor Threads don't understand , I suggest you read the last article first netty Open source analysis reactor Thread the veil ( One ), Let's do it here reactor Paste the picture of the three steps in reactor Threads We already know ...

  9. vue music App QQ Music search list latest interface cross domain settings

    stay webpack.dev.config.js in 'use strict' const utils = require('./utils') const webpack = require('webp ...

  10. UVa 11488 Super prefix set (Trie Application )

    https://vjudge.net/problem/UVA-11488 The question : Given a set of strings S, Definition P(s) The common prefix length for all strings is equal to S The product of the number of strings in . such as P( {000, 001, 0 ...