Android中的五大布局

Posted 2020-09-05

一、布局介绍

在android中，共有五种布局方式，分别是：

• FrameLayout(框架布局)
• LinearLayout(线性布局)
• AbsoluteLayout(绝对布局)
• RelativeLayout(相对布局)
• TableLayout(表格布局)

1. FrameLayout框架布局

• 布局特点：放入其中的所有元素都被放置在最左上的区域，而且无法为这些元素指定一个确切的位置,下一个子元素会重叠覆盖上一个子元素
• 应用场景：适合浏览单张图片。

2. LinearLayout线性布局

• 布局特点：放主要提供控件水平或者垂直排列的模型，每个子组件
  都是以垂直或水平的方式来线性排布.(默认是垂直)
• 应用场景：最常用的布局方式

  linearLayout中有一个重要的属性 android:layout_weight="1"，这个weight在垂直布局时，代表行距；水平的时候代表列宽；weight值越大就越大。

3. AbsoluteLayout绝对定位布局

• 布局特点：采用坐标轴的方式定位组件，左上角是（0，0）点，往右x轴递增，往下Y轴递增,组件定位属性为android:layout_x和 android:layout_y来确定坐标。
• 应用场景：准确定位空间位置

  由于Android手机的屏幕尺寸、分辨率存在较大差异，使用AbsoluteLayout无法兼顾适配问题，所以该布局已经过时

4. RelativeLayout相对布局

• 布局特点：为某一个组件为参照物，来定位下一个组件的位置的布局方式。
• 应用场景：控件之间存在相应关系（适配神器，推荐使用）

5. TableLayout表格布局

• 布局特点：类似html里的Table.使用TableRow来布局，其中TableRow代表一行，TableRow的每一个视图组件代表一个单元格。
• 应用场景：控件之间存在相应关系。

这五个布局元素可以相互嵌套应用，做出美观的界面。

二、布局属性配置

Android布局里XML的属性配置

1. 五种Layout中Item的基础属性：

• layout_width & layout_height
• layout_margin+方位 & padding+方位
• layout_gravity & gravity

Android五种布局都具备上述几个基础属性

1. layout_width & layout_height

• 作用：设置Layout中组件的宽度和高度
• 取值：
  a. 固定的像素值

  android:layout_width="66px"

  b. "wrap_content"
  相应视图的宽和高就会被设定成所需的最小尺寸以适应视图中的内容

  android:layout_width="wrap_content"

   

  c. “match_parent"(在Android API 8之前叫作"fill_parent")
  视图的宽和高延伸至充满整个父布局

  android:layout_width="match_parent"

   

2. layout_margin+方位/padding+方位

• 作用：设置放入Layout中的View与Layout的边界或者其他View之间能够相距一段距离
• 设置：

  layout_marginLeft          //paddingLeft
  layout_marginTop         //paddingTop
  layout_marginRight      //paddingRight
  layout_marginBottom   //paddingBottom
  layout_margin             //padding

   

• 取值：固定值

  android:layout_marginLeft="66px"  
  //android:paddingLeft=”66px“

   

paddingLeft与android:layout_marginLeft的区别：

• padding和margin都是边距的含义，但二者边距的定义不同：
  padding是控件的内容相对控件的边缘的边距；
  layout_margin是控件边缘相对父控件的边距。具体如下图：

padding属性与margin属性的区别

3. layout_gravity / gravity

• 作用：用来确定View在Layout中的停靠位置

android gravity和layout_gravity区别：

1. gravity属性：是对该view 内容的位置的设置。
   比如一个button 上面的text. 你可以设置该text 在view的靠左，靠右等位置．
2. layout_gravity属性：是用来设置该view相对与父view 的位置。
   比如一个button 在Linearlayout里，你可以通过设置该属性把该button放在父布局Linearlayout靠左靠右等位置。

2. 各种Layout的特有属性

2.1 FrameLayout

作为最简单的Layout，只具备基础属性：

• layout_width & layout_height
• layout_margin+方位 & padding+方位
• layout_gravity & gravity

2.2 AbsoluteLayout

除了基础属性外，AbsoluteLayout还具备：

• layout_x：指定控件的x坐标
• layout_y：指定控件的x坐标

上述属性的取值均为固定值。

2.3 TableLayout

除了基础属性外，由于TableLayout的行TableRow是一个横向的（horizontal）的LinearLayout，所以具备LinearLayout的属性

2.4 LinearLayout

除了基础属性，还会有：

• orientation
  1.作用：设置布局内控件的排列方式
  2.取值：vertical（垂直排列-默认值）、horizontal（水平排列）

  android:orientation="vertical";  
  //android:orientation="horizontal";

   

• layout_weight
  1.定义：是线性布局（Linelayout）的一个独特比例分配属性
  2.作用：使用此属性设置权重，然后按照比例对界面进行空间的分配，公式计算是：控件宽度=控件设置宽度+剩余空间所占百分比宽幅

  具体可以参考这篇文章，讲解得非常详细

2.5 RelativeLayout

RelativeLayout的属性算是最多的了，除了基本属性外，还有：
a. 相对于父空间

XML属性	说明
layout_alignParentBottom	当前控件底端与父控件的底端对齐
layout_alignParentLeft	当前控件左端与父控件的左端对齐
layout_alignParentRight	当前控件右端与父控件的右端对齐
layout_alignParentTop	当前控件上端与父控件的上端对齐
layout_centerHorizontal	当前控件位于父控件的横向中间位置（水平方向上的中间）
layout_centerVertical	当前控件位于父控件的纵向中间位置（平面上的正中间）
layout_centerInParent	当前控件位于父控件的纵横向中间位置（垂直方向上的中间）

上述所有属性的取值皆为boolean属性：true、false。

b. 相对于给定控件

XML属性	说明
layout_above	使当前控件位于给出id控件的上方
layout_below	使当前控件位于给出id控件的下方
layout_toLeftOf	使当前控件位于给出id控件的左侧
layout_toRightOf	使当前控件位于给出id控件的右侧
layout_alignBottom	使当前控件与给出id控件的底部部重合
layout_alignLeft	使当前控件与给出id控件的左边重合
layout_alignRight	使当前控件与给出id控件的右边重合
layout_alignTop	使当前控件与给出id控件的顶部重合
layout_alignBaseline	使当前控件的BaseLine与给出id控件t的BaseLine重合

上述所有属性的取值皆为给定控件的id名，如下例子

//文本控件@+id/tab_textview在控件@+id/tab_imageview的下方
<TextView    
android:id="@+id/tab_textview"    
android:layout_below="@+id/tab_imageview"    
android:layout_width="wrap_content"    
android:layout_height="wrap_content"      
/>

 

3. 选择器selector.xml的属性

3.1 作用
通过设置selector.xml可使得控件在不同操作下（默认、点击、焦点等）的显示不同样式

3.2 属性

XML属性	说明
android:drawable	放一个drawable资源
android:state_pressed	按下状态，如一个按钮触摸或者点击。
android:state_focused	取得焦点状态，比如用户选择了一个文本框。
android:state_hovered	光标悬停状态，通常与focused state相同，它是4.0的新特性
android:state_selected	选中状态
android:state_enabled	能够接受触摸或者点击事件
android:state_checked	被checked了，如：一个RadioButton可以被check了。
android:state_enabled	能够接受触摸或者点击事件

上述所有属性的取值皆为boolean属性：true、false。

3.3 实例说明
在drawable添加selector.xml资源文件。

button_selector.xml:

<?xml version="1.0" encoding="UTF-8"?>
< selector xmlns:android="http://schemas.android.com/apk/res/android">

 < !-- 指定按钮按下时的图片 -->
 <item android:state_pressed="true"  
       android:drawable="@drawable/start_down"
 />

 < !-- 指定按钮松开时的图片 --> 
 <item android:state_pressed="false"
       android:drawable="@drawable/start"
 />

< /selector>

 

在布局文件main.xml中控件的属性设置:

<Button
  android:id="@+id/startButton"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/button_selector" 
/>

 

4. 布局形状shape.xml的属性

<shape xmlns:android="http://schemas.android.com/apk/res/android">

//默认颜色
<solid android:color="#876543"/>
//哪个方向有边框线
  <padding
        android:bottom="0dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp" />
     //边框线颜色、大小
    <stroke
        android:width="1dp"
        android:color="#000000" />

 

在布局文件main.xml中控件的属性设置:

<Button
  android:id="@+id/startButton"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/layout_shape" 
/>