步步为营学习android，步步惊喜之android基础篇－布局学习1

                                                                    Android基础篇－布局layout学习１

 

      布局是各个UI元素在屏幕上的位置关系，视图组的几个扩展类与布局相关。

然后只需通过Activity去显示一个布局，那么在布局中就显示在手机屏幕上了。布局在UI设计中很重要，不同的系统需要不同的布局。在android系统中布局通常有以下几种不同的情况：

FrameLayout(框架布局)：系统默认的在屏幕上就有空白区显示它；

LinearLayout(线性布局):让所有的子视图都成为单一的方向，即垂直的或者水平的；

AbsoluteLayout(绝对布局)：让子视图使用x/y坐标确定在屏幕上的位置；

RelativeLayout(相对布局)：让子视图的位置和其他的视图相关；

TableLayout(表单布局)：位置是它的子视图的行和列。

 这些布局可以组合使用，比如RelativieLayout和LineraLayout等。

就我个人而言用得最多两种布局就是RelativieLayout和LineraLayout.目前为止我开发的系统基本上只用这两种布局。所以在这里我重点讲解这种布局，其他的布局，大家需要活，我如果在后面开发中使用了其他布局，我会补充的，现在需要的话，请大家google。这两种布局主要是例子为讲解！

    

LinearLayout(线性布局):这种布局是最常用的布局，此布局在显示组件的时候会默认保持组件之间的间隔以及组件之间的互相对齐(相对一个组件的右对齐，中间对齐或者左对齐)。线性布局显示组件的方式有垂直与水平两种，可以通过orientation进行设定。

比如下面布局main.xml

<?xmlversion="1.0"encoding="utf-8"?>

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical">

<Button

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="Button1"

    />

 <Button

     android:layout_width="fill_parent"

     android:layout_height="wrap_content"

     android:text="Button2"

     />

 <Button

     android:layout_width="wrap_content"

     android:layout_height="wrap_content"

     android:text="Button3"

     />

</LinearLayout>

运行结果如下：

讲讲里面的一个android属性选项

android:layout_width="fill_parent"表示button的宽度，fill_parent表示能填满父视图的最大尺寸，就是有多大视图就占据多大的视图，比如这里与屏幕的宽度一样大。

android:layout_height="wrap_content"

表示高度，wrap_content高度与button包括的子内容的最小尺寸，比如button中text字体。

android:text="Button3"

表示Button中的字体，其实有时候因为多种语言需要或者因为Button字体需要经常修改，有时候需要在values中string.xml文件设置button中的Text.

可以是这样的形式：android：text ＝"@string/hello".

 

 

如果把LinearLayout中的orientation改成horizontal,每个button中的宽度改成wrapcontent。

<?xmlversion="1.0"encoding="utf-8"?>

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="horizontal">

<Button

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

   android:text="Button1"

    />

 <Button

     android:layout_width="wrap_content"

     android:layout_height="wrap_content"

     android:text="Button2"

     />

 <Button

     android:layout_width="wrap_content"

     android:layout_height="wrap_content"

     android:text="Button3"

     />

</LinearLayout>

那么就变成

其实linearLayout可以嵌套使用，可以在linearLayout中嵌套linearLayout布局。

将Activity界面分成上、下2部分，然后上部分是用横向的（水平）布局，里面有4个TextView ，下部分则是用纵向的（垂直）布局，也放有4个TextView。

要实现这样的布局必须要使用到嵌套布局。

实现步骤：

1、 首先，最外层是一个垂直布局的LinearLayout； 
2、 在最外层的LinearLayout中再嵌套两个（上、下）LinearLayout； 
3、 上部分的LinearLayout使用水平布局，里面放4个TextView； 
4、 下部分的LinearLayout使用垂直布局，里面放4个TextView。

        <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" 

    android:layout_width="fill_parent" 

   android:layout_height="fill_parent" 

   android:orientation="vertical" > 

  

    <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_vertical" 

           android:background="#aa0000" 

           android:layout_width="wrap_content" 

           android:layout_height="fill_parent" 

           android:layout_weight="1"/> 

        <TextView 

           android:text="green" 

           android:gravity="center_vertical" 

            android:background="#00aa00" 

           android:layout_width="wrap_content" 

           android:layout_height="fill_parent" 

            android:layout_weight="1"/> 

       <TextView 

           android:text="blue" 

            android:gravity="center_vertical" 

           android:background="#0000aa" 

           android:layout_width="wrap_content" 

            android:layout_height="fill_parent" 

           android:layout_weight="1"/> 

       <TextView 

            android:text="yellow" 

           android:gravity="center_vertical" 

           android:background="#aaaa00" 

            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:layout_width="fill_parent" 

           android:layout_height="wrap_content" 

            android:layout_weight="1"/> 

       <TextView 

           android:text="row two" 

            android:textSize="15pt" 

           android:layout_width="fill_parent" 

           android:layout_height="wrap_content" 

            android:layout_weight="1"/> 

       <TextView 

           android:text="row three" 

            android:textSize="15pt" 

           android:layout_width="fill_parent" 

           android:layout_height="wrap_content" 

            android:layout_weight="1"/> 

       <TextView 

           android:text="row four" 

            android:textSize="15pt" 

           android:layout_width="fill_parent" 

           android:layout_height="wrap_content" 

            android:layout_weight="1"/> 

    </LinearLayout> 

      

</LinearLayout> 

运行结果是：

RelativeLayout布局：

     相对布局是另外一种常用的布局。与线性布局不同之处在于，线性布局如果需要将一组件对齐另一个组件就必须将所有的组件进行对齐，或者使用嵌套布局才可完成；但是相对布局不必这么麻烦。因为在相对布局中,每个组件都可以指定相对于其他组件或者父组件的位置，只是必须通过ID来进行指定。

比如:

        <?xml version="1.0" encoding="utf-8"?>

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

   android:layout_width="fill_parent"

   android:layout_height="fill_parent"

    android:orientation="vertical">

 

    <Button

        android:id="@+id/button1"

       android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

       android:layout_alignParentTop="true"

       android:layout_marginLeft="64dp"

        android:layout_marginTop="36dp"

       android:text="Button" />

 

    <Button

        android:id="@+id/button2"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

        android:layout_alignBottom="@+id/button1"

       android:layout_alignParentRight="true"

        android:layout_marginRight="56dp"

        android:text="Button" />

 

    <Button

        android:id="@+id/button3"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_alignRight="@+id/button2"

       android:layout_below="@+id/button1"

        android:layout_marginTop="35dp"

       android:text="Button" />

 

    <Button

        android:id="@+id/button6"

       android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignRight="@+id/button3"

       android:layout_below="@+id/button3"

       android:layout_marginTop="17dp"

        android:text="Button" />

 

    <Button

        android:id="@+id/button5"

        android:layout_width="wrap_content"

       android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/button6"

       android:layout_below="@+id/button6"

       android:layout_marginTop="98dp"

        android:text="Button" />

</RelativeLayout>

运行结果如下：

下面列出相对布局常用的属性

                      组件之间的关系

属性名称                                作用

android:layout_above              将该组件放在指定ID组件的上方

android:layout_below              将该组件放在指定ID组件的下方

android:layout_toLeftOf            将该组件放在指定ID组件的左方

android:layout_toRightOf           将该组件放在指定ID组件的右方

                        组对齐方式

属性名称                               作用

android:layout_alignBaseline        将该组件放在指定ID组件进行中心线对齐

android:layout_alignTop            将该组件放在指定ID组件进行顶部对齐

android:layout_alignBottom          将该组件放在指定ID组件进行底部对齐

android:layout_alignLeft            将该组件放在指定ID组件进行左边缘对齐

android:layout_alignBottom          将该组件放在指定ID组件进行右边缘对齐

 

                 当前组件与父组件的对齐方式

属性名称                             作用

android:layout_alignParentTop     该组件与父组件进行顶部对齐

android:layout_alignParentBottom   该组件与父组件进行底部对齐

android:layout_alignParentLeft      该组件与父组件进行左边缘对齐

android:layout_alignParentRight    该组件与父组件进行右边缘对齐

 

                  组件放置的位置

 属性名称                    作用

android:layout_centerHorizontal        将组件放置在水平方向中央的位置

android:layout_centerVertical          将组件放置在垂直方向中央的位置

android:layout_centerInParent将组件放置在父组件的水平中央及垂直中央的位置

 

 

在相对布局中，设置一个组件的位置，一般要有“上下”与“左右”两个位置属性来进行固定。大家可以根据上述属性名称的作用来理解我给出的RelativeLayout布局文件文件含义！下面是一些几种布局常用的属性作用。

   

布局属性  

android: id ————  为控件指定相应的Id  

android: text ————  指定控件当中显示的文字，尽量使用string.xml  

android: gravity ———— 指定控件的基本位置  

android:textSize ————  指定控件当中字体的大小  

android: background ————  指定该控件所使用的背景颜色，RGB命名法  

android: width ————  指定控件的宽度  

android: height ————  指定控件的高度  

android: padding ————  指定控件的内边距[使用dip计量最好，因为它不受手机像素屏幕大小的限制，更具有适应性]  

android:singleLine————如果设置为true，则控件当中的内容在同一行   

                              显示，多余内容省略号表示  

android:layout_weight————设置控件占屏幕的比例.

 

 总结:布局的学习是android开发最基本的学习，我个人喜欢用相对布局和线性布局，特别是相对布局在绘画程序，照相机程序，增钱现实中应用很多，下面一节主要讲一些经典的应用布局。

  上述线性布局，嵌套布局以及相对布局源代码如下：

线性布局：    

http://download.csdn.net/detail/tianke0711/4638755

嵌套布局：

http://download.csdn.net/detail/tianke0711/4638768

相对布局

http://download.csdn.net/detail/tianke0711/4638781