安卓app开发概念系列「1」--view与viewgroup

安卓app开发中会遇到各种概念，如果不能很好理解这些概念，入门会受到各种坎坎。下面跟大家一起探讨安卓开发中的一些概念，欢迎各路大神无私评论。本文资料大部分来自网络，把一些经典的东西整理成文，以便日后参考。

一 布局系列中的概念 布局包含view控件和容纳控件的容器盒子viewgroup

1 view与viewgroup

View是一种界面层的控件的一种抽象，它代表了一个控件，是Android中所有控件的基类。简单点就是界面中可以看到的各种可视东东 button label text talbe 等等都 是view，大的小的，各种颜色的，各种形状的。每种控件又有自己的属性以及对事件的响应能力。

2. viewgroup是各种布局的盒子，其中的各种布局又可视为容纳各种view控件的子盒子。也就是说常见的布局 LinearLayout(线性布局)、TableLayout(表格布局)、RelativeLayout(相对布局)、FrameLayout(层布局)、AbsoluteLayout(绝对布局)、GridLayout(网格布局)、ConstraintLayout(约束布局)都是viewgroup的孩子。每一个ViewGroup都可以嵌套其他的ViewGroup和View（视图）。一个ViewGroup的大小是相对的，它即可以是其他ViewGroup的父容器，也可以是其他ViewGroup的子容器。。

3.view与viewgroup关系以及viewgroup的布局继承关系

下面的view继承关系体现了view和viewgroup的关系。

【注】以下内容来自 https://www.cnblogs.com/thomson-fred/p/10117352.html

（1）线性布局

线性布局会将容器内的所有控件一个挨着一个地排列。

属性：

1. 排列方向

android：orienation = “ horizontal/vertical”

水平排列和垂直排列，Android中默认为垂直排列vertical

注意：默认情况下水平和垂直方向的排列只占一行，如果用android：layout_width来设定控件的宽度，如果控件宽度太大，超出屏幕的显示范围，屏幕是不会显示超出的范围的。

2. 对齐方式

用于控制元素（例如文字）在该控件里的显示位置。

属性值：

可选的值有：top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical

也可以同时使用两个属性值，中间用 | 竖线隔开

例如：

android：gravity = “buttom|center_horizontal”

如果定义在控件中的底部，垂直居中

举一个简单例子，我用LinearLayout线性布局来实现常用的计算器

前面四行都很容易理解，用一个Linearout来包裹4个button控件，并且设定排列方向为水平方向。这里只列出其中一行的布局代码，其他三行的代码与第一行几乎相同。

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" > 
         <Button
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="mc" android:layout_weight="1">   
            //layout_weight设定水平布局中控件的占比
         </Button>
         <Button
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="m+" 
            android:layout_weight="1">
         </Button>
         <Button
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="m-" 
            android:layout_weight="1">
         </Button>
         <Button
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="mr" 
            android:layout_weight="1">
         </Button>
</LinearLayout>           

最关键的是下面两行，即用绿色框框住的那一部分控件如何布局。这里我使用布局控制器内部嵌套布局控制器的方法。首先将绿色框内部的控件分成三个层级（我分别用不同颜色标注出来了）。第一个层级是绿色框，包含两个两列，即两个红色框。第二个层级是红色框，每个红色框看成一个整体的列，第一个列是左边的红色框，其内部包含两个行；第二个列是右边的红色框，即“=”号，包含一个垂直布局的列，占位两行。再对左边的红色框进行第三层级的拆分。可以拆分成两行，每一行占3个位。

于是就有下面的代码：

<!--绿色框-->
<LinearLayout android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
       
        <!--红色框--> 
        <LinearLayout android:orientation="vertical"
                android:layout_weight="3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
            
             <!--蓝色框--> 
             <LinearLayout android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="1"></Button>
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="2"></Button>
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="3"></Button>
             </LinearLayout>
            
             <!--蓝色框 -->
             <LinearLayout android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <Button
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="2"
                    android:text="0">
                        </Button>
                <Button
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text=".">
                       </Button>
            </LinearLayout>          
        </LinearLayout>
        
        <!--红色框，=号-->
        <LinearLayout android:orientation="vertical"
                android:layout_weight="1"
                android:layout_width="wrap_content"
                android:layout_height="match_parent">
                <Button
                     android:layout_width="match_parent"
                     android:layout_height="match_parent"
                    android:text="=">
               </Button>
        </LinearLayout>
</LinearLayout>               

（2）相对布局

相对布局是最灵活的一种布局方式，可以相对父容器和相对与其他控件进行布局。

主要参数有：

1. 是否对齐父容器的语法格式为true/false：

例如：android:layout_alignParentLeft = “true”

2. 为于给定ID控件不同方位的语法格式：

例如：android:layout_above="@id/btn1"

@id/btn1 控件的ID必须是事前已经定义好的

android:layout_alignParentLeft 该控件是否对齐父容器的左端

android:layout_alignParentRight 该控件是否齐其父容器的右端

android:layout_alignParentTop 该控件是否对齐父容器的顶部

android:layout_alignParentBottom 该控件是否对齐父容器的底部

android:layout_centerInParent 该控件是否相对于父容器居中

android:layout_toLeftOf 该控件位于给定ID控件的左方

android:layout_toRightOf 该控件位于给定ID控件的右方

android:layout_above 该控件位于给定ID控件的上方

android:layout_below 该控件位于给定ID控件的下方

android:layout_centerHorizontal 该控件是否横向居中

android:layout_centerVertical 该控件是否垂直居中

实例代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/darkslategray" >
    
    <Button android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:text="下"> 
    </Button>
    <Button android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/btn1"
        android:layout_above="@id/btn1"
        android:text="左">  
    </Button>
    <Button android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/btn1"
        android:layout_above="@id/btn1"
        android:text="右">    
    </Button>
    <Button android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/btn2"
        android:layout_above="@id/btn2"
        android:background="@color/white"
        android:text="上">      
    </Button>

</RelativeLayout>           

效果图

（3）表格布局

表格布局是最规整的一种布局方式。想象一下EXCEL表格规整的行和列，android布局管理器中的TableLayout与EXCEL中的单元格有不少相似之处。如果学过HTML，用过tbale，tr，td标签，应该也会对下面的用法有更好的理解。

表格布局由一个TableLayout包裹起来，内部是一行行的控件，每一行用一个TableRow来包裹，每一行的元素个数（即列数）都是可以不同的。默认情况下，一行中的所有控件是等宽的。

控件属性，在TableLayout中定义，对所有行起作用：

1. android:collapseColumns=”” #指定被隐藏的列的序号

2. android:shrinkColumns=”” #指定被收缩的列的列序号

3. android:stretchColumns=”” #指定被拉伸的列的列序号

4. android:layout_column="3": #表示跳过第三个控件，直接显示下一个控件，注意：这个属性从1开始计数

5. android:layout_span="3" #表示合并3个单元格，也就说这个组件占3个单元格

注意：上面属性的使用场合，是在TableLayout还是在TableRow中使用；如果是在TableRow中使用，需要在TableRow的子控件中添加属性。前四个属性都是添加在TableLayout中的，最是添加在TableRow的子控件中。

实例：

就以我们平常用的日历为案例（由于屏幕太小，放不下最后一列星期六的日期）

实例代码：

由于以下代码有很多相似之处，我只截取了比较重要的一部分

1. 总体框架

<TableLayout  xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/TableLayout2"  
    android:layout_width="fill_parent"  
    android:layout_height="wrap_content" >  
    <TableRow>  
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="周日" 
            android:background="#00000000"/>     #去除button控件的样式
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="周一" 
            android:background="#00000000"/>  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="周二" 
            android:background="#00000000"/>  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="周三"
            android:background="#00000000" />  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="周四" 
            android:background="#00000000"/>  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="周五"
            android:background="#00000000" />  
        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="周六"
            android:background="#00000000" />  
    </TableRow>
    <TableRow>
     ... ...
    </TableRow>
... ...
... ...
</TableLayout>           

2. 最后一行“不显示日期”的合并单元格样式

<Button  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:text="30" />   
            
<Button  
      android:layout_width="wrap_content"  
      android:layout_height="wrap_content" 
      android:layout_span="2"
      android:background="#ffffff" 
      android:text="不显示日期" />              

（4）绝对布局

绝对布局指定每个控件在手机上的具体坐标，每个控件的位置和大小是固定的。由于不同手机屏幕大小可能不同，所以绝对布局只适用于固定的手机屏幕。平常用得比较少，这里就不做详细介绍了。

（5）层布局

层布局也叫帧布局。每个控件占据一层，后面添加的层会覆盖前面的层。如果后面的层的大小大于或者等于前面的层，那么前面的层就会被完全覆盖。后面层中的控件就看不到了。实际应用中如果想要得到一个空间浮现在另一个控件的上方，可以在控件内部嵌套层布局。

下面是层布局的原理图：

实例代码：           

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/FrameLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    tools:context=".MainActivity"      
    android:foregroundGravity="right|bottom">    

    <TextView    
        android:layout_width="200dp"    
        android:layout_height="200dp"    
        android:background="#FF6143" />     //橙色 
    <TextView    
        android:layout_width="150dp"    
        android:layout_height="150dp"    
        android:background="#7BFE00" />     //绿色
     <TextView    
        android:layout_width="100dp"    
        android:layout_height="100dp"    
        android:background="#FFFF00" />     //黄色

</FrameLayout>              

效果图，每一个textview都会被前一个textview覆盖：

实际应用：

在手机程序设计中，绝对布局基本上不用，用得相对较多的是线性布局和相对布局。