2014-10-25Android学习------布局处理(-)

我学习Android都是结合源代码去学习，这样比较直观，非常清楚的看清效果，觉得很好，今天的学习源码是网上找的个HealthFood 源码 百度搜就知道很多下载的地方

先去了解下布局处理：

1.main.xml

首先我们看下他要实现的效果是这样的：

看看布局怎么实现的：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="center"
    android:background="@drawable/home_page"
    android:orientation="vertical" >

    <Button
        android:id="@+id/foodlistbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="120px"
        android:background="@drawable/btn_food_list" />

    <Button
        android:id="@+id/yingyangbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20px"
        android:background="@drawable/btn_food_nutriction" />

    <Button
        android:id="@+id/aboutbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20px"
        android:background="@drawable/btn_food_about" />

</LinearLayout>

1.整体用LinearLayout 布局，  宽高均为包裹父窗体  北京图片设置为：android:background="@drawable/home_page"  布局垂直方式  重心是居中

我们来看看常用的设置都有哪些：

    android:layout_width="fill_parent"   
    android:layout_height="fill_parent"
    android:layout_gravity="center"  
    android:background="@drawable/home_page"
    android:orientation="vertical" >

1) 控件的宽高：layout_width与layout_height

android:layout_width表示控件的宽度，android_layout_height表示控件的高度

其属性值有wrap_content、fill_parent、match_parent三种。

其中，wrap_content表示填满父控件的空白，fill_parent表示大小刚好足够显示当前控件里的内容，match_parent与fill_parent作用是相同的。

上面说的很不好理解，继续看下面：

android:layout_width="fill_parent"定义当前视图在屏幕上 可以消费的宽度，fill_parent即填充整个屏幕的宽度

android:layout_height="fill_parent"定义当前视图在屏幕上 可以消费的高度，fill_parent即填充整个屏幕的高度

android:layout_height="wrap_content":随着文字栏位的不同 而改变这个视图的宽度或者高度。有点自动设置框度或者高度的意思

注意：

android:width 其实是定义控件上面的文本(TextView) 的宽度，当然这个宽度也是和 android:layout_width 配合起来作用的，
如果 android:layout_width="fill_parent" 的话，那么设置 android:width 是没有意义的

android:width 的值，一般是 "100dp" 这样的数值;
android:layout_width 的值，一般是"fill_parent","wrap_content","match_parent".当然，它也可以像前者一样，设置数值的.

带"layout"的属性是指整个控件而言的，是与父控件之间的关系，如 layout_gravity 在父控件中的对齐方式, layout_margin 是级别相同的控件之间的间隙等等；
不带"layout" 的属性是指控件中文本的格式，如gravity是指文本的对齐方式等等，而其中文本的格式又受制约于它的控件在父控件中的属性. 

2）线性布局的方向设置：android:orientation="";

android:orientation=“horizontal”表示水平方向，

android:orientation=“vertical”表示垂直方向

注意：

a.对于 LinearLayout
当 android:orientation="vertical"  时， 只有水平方向的设置才起作用，垂直方向的设置不起作用。即：left，right，center_horizontal 是生效的。
当 android:orientation="horizontal" 时， 只有垂直方向的设置才起作用，水平方向的设置不起作用。即：top，bottom，center_vertical 是生效的。

b.Android布局LinearLayout注意设置属性android:orientation属性，否则有的组件可能无法显示。
该属性不设置时默认为horizontal。此时第一个控件的宽度若设置成“fill_parent”,后面添加的组件将都无法看到。因此使用该布局的时候要注意设置android:orientation="vertical"。

3）android:layout_gravity是相对与它的父元素说的，说明元素显示在父元素的什么位置。这里代表LinearLayout线性布局放在窗体的中间位置

注意有一点：android:layout_gravity 和 android:gravity 的区别

从名字上可以看到，android:gravity是对元素本身说的，元素本身的文本显示在什么地方靠着换个属性设置，不过不设置默认是在左侧的

比如说button： android:layout_gravity 表示按钮在界面上的位置。 android:gravity表示button上的字在button上的位置。

可选值

这两个属性可选的值有：top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical。

而且这些属性是可以多选的，用“|”分开。

默认这个的值是：Gravity.LEFT

Value	Description
top	Put the object at the top of its container, not changing its size.  将对象放在其容器的顶部，不改变其大小.
bottom	Put the object at the bottom of its container, not changing its size.  将对象放在其容器的底部，不改变其大小.
left	Put the object at the left edge of its container, not changing its size.  将对象放在其容器的左侧，不改变其大小.
right	Put the object at the right edge of its container, not changing its size.  将对象放在其容器的右侧，不改变其大小.
center_vertical	Place object in the vertical center of its container, not changing its size.  将对象纵向居中，不改变其大小.  垂直对齐方式：垂直方向上居中对齐。
fill_vertical	Grow the vertical size of the object if needed so it completely fills its container.  必要的时候增加对象的纵向大小，以完全充满其容器.  垂直方向填充
center_horizontal	Place object in the horizontal center of its container, not changing its size.  将对象横向居中，不改变其大小.  水平对齐方式：水平方向上居中对齐
fill_horizontal	Grow the horizontal size of the object if needed so it completely fills its container.  必要的时候增加对象的横向大小，以完全充满其容器.  水平方向填充
center	Place the object in the center of its container in both the vertical and horizontal axis, not changing its size.  将对象横纵居中，不改变其大小.
fill	Grow the horizontal and vertical size of the object if needed so it completely fills its container. This is the default.  必要的时候增加对象的横纵向大小，以完全充满其容器.
clip_vertical	Additional option that can be set to have the top and/or bottom edges of the child clipped to its container's bounds. The clip is based on the vertical gravity: a top gravity clips the bottom edge, a bottom gravity clips the top edge, and neither clips both edges.  附加选项，用于按照容器的边来剪切对象的顶部和/或底部的内容. 剪切基于其纵向对齐设置：顶部对齐时，剪切底部；底部对齐时剪切顶部；除此之外剪切顶部和底部. 垂直方向裁剪
clip_horizontal	Additional option that can be set to have the left and/or right edges of the child clipped to its container's bounds. The clip is based on the horizontal gravity: a left gravity clips the right edge, a right gravity clips the left edge, and neither clips both edges.  附加选项，用于按照容器的边来剪切对象的左侧和/或右侧的内容. 剪切基于其横向对齐设置：左侧对齐时，剪切右侧；右侧对齐时剪切左侧；除此之外剪切左侧和右侧. 水平方向裁剪

参考地址： http://androidmirror.com/guide/topics/resources/drawable-resource.html

4)android:background  设置控件背景  可以是一个颜色也可以是一个图片

2.线性布局下面放置三个button控件

首先我们要知道LinearLayout线性布局有这样的特点：

LinearLayout是线性布局控件，它包含的子控件将以横向或竖向的方式排列，
按照相对位置来排列所有的widgets或者其他的containers,超过边界时，某些控件将缺失或消失，不能完全显示。
因此垂直方式排列时，每一行只会有一个 widget或者是container，而不管他们有多宽，
而水平方式排列是将会只有一个行高(高度为最高子控件的高度加上边框高度)。
LinearLayout保持其所包含的 widget或者是container之间的间隔以及互相对齐(相对一个控件的右对齐、中间对齐或者左对齐)。

在main.xml中，设置的Android：orientation=“vertical”  也就代表是一种垂直方式排列，那么也就是说  它包含的子控件widget将会是按照定义的顺序进行

垂直方向的显示，每一行只有一个控件

    <Button
        android:id="@+id/foodlistbtn"                                          // 增加一个id,在资源文件R.java中就立马出现foodlistbtn的id了
        android:layout_width="wrap_content"                              //  代表控件Button的宽度为包裹内容，意思就是随着文本内容自动调整 背景图片
        android:layout_height="wrap_content"                             //  代表控件Button的高度为包裹内容，意思就是随着文本内容自动调整 背景图片
        android:layout_gravity="center"                                      //  代表控件Button在父窗体LinearLayout上是居中放置的，也就是在那行上居中
        android:layout_marginTop="120px"                                  //   距离上面的组件间隙 也就是距离
        android:background="@drawable/btn_food_list" />             //   设置控件的背景图片

    <Button
        android:id="@+id/yingyangbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20px"                                   // 距离上面的组件Button为20px间隙
        android:background="@drawable/btn_food_nutriction" />

    <Button
        android:id="@+id/aboutbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20px"                                   // 距离上面的组件Button为20px间隙 
        android:background="@drawable/btn_food_about" />

总结：main.xml布局需要掌握：android:layout_width,android:layout_height,android:layout_gravity,android:orientation,android:layout_margin

                                     android:id="@+id/xx"增加id

                                     android:background="@drawable/xx"如何使用资源文件

线性布局