Android Layout研究 <二> Layout进阶

这篇blog大量参考网络资源。

上面介绍一些基础知识，接着研究研究UI的视图层级。最后看看Layout中元素的属性。

0. View:

先说说View:

View

extends Object

implements Drawable.Callback KeyEvent.Callback AccessibilityEventSource

1.

2.

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

    android:background="#0099cc"

    >

    

    <Button

      android:id="@+id/button0"

      

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_weight="0"

      android:width="250dp"

      android:height="100dp"

      android:text="@string/dummy_button" />

    

    <Button

      android:id="@+id/button1"

      

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_marginLeft="10dp"

      android:padding="20dp"      

      android:layout_weight="0"

      android:text="@string/dummy_button" />

    

    

    <Button

      android:id="@+id/button2"

      

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_gravity="right"

      android:layout_weight="0"

      android:text="@string/dummy_content" />

    

    <Button

      android:id="@+id/button3"

      

      android:layout_width="fill_parent"

      android:layout_height="wrap_content"

      android:gravity="right"

      android:layout_weight="0"

      android:text="@string/dummy_content" />

    <Button

      android:id="@+id/button4"

      

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_weight="0"

      android:text="@string/Button" />

    <Button

      android:id="@+id/button5"

      

      android:layout_width="fill_parent"

      android:layout_height="wrap_content"

      android:layout_weight="0"

      android:text="@string/Button" />

</LinearLayout>

每个元素(view)都必须 layout_weight, layout_height。他们的取值有：wrap_content和fill_parent. 分别表示：只包裹住内容和填充允许填充的部分。

以下具体分析：

分析一,layout_width,和width区别。

  <Button

      android:id="@+id/button0"

      

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_weight="0"

      android:width="250dp"

      android:height="100dp"

      android:text="@string/dummy_button" />

android:id 可以将每个view唯一的标识出来。在程序中，可以使用findViewById(R.id.xxxx)得到这个View。 并使用这个View句柄对这个元素作操作。

android:width, android:height: 这两个值与layout_width和layout_height不同。

layout_width,layout_height表示当前View,也就是Button的大小。取值有：wrap_content（包裹内容），fill_parent(上层view允许的足够大)

width,height表示Button上的Text的大小。取值是：xxxdp  (注1)

但这个大小其实要和其它参数配合使用。

例如：、

1.在以上设置中，Layout_width="wrap_content". 表示要能包住Text内容。如果不设置android:width. 则字符串dummy_button有多长，Button就显示多长。

2. 加上了android:width="250dp". 情况就不同了。

如果Text内容长度短于250dp. 则因为它设置的内容宽度为250dp. 而Button的宽度是包裹住内容。所以Button真实宽度也是250dp. 因为android:width=250表示的就是内容宽度250dp.(只是显示不满而已)

如果Text内容长度长于250dp. 但要显示的内容是250.所以它会自动分行显示。但也因为android:width=250表示的就是内容宽度250dp，而Layout_width为能包裹内容的长度。所以Button真实宽度为250dp.

3.如果layout_width="fill_parent". 则因为Button宽度足够，所以android:width虽然等于250dp. 但也失去作用。 如果Text长度甚至大于整个宽度。则自动换行。

分析二：

layout_margin与padding.

虽然都是边缘的空白，但从有无layout就能看出，一个是针对当前View，一个是针对View中的Text的。

layout_margin, layout_marginLeft, layout_marginRight等，都是说当前View和其它View之间的距离。

padding, paddingLeft,paddingRight等则是针对本View的Text和当前View的边缘的。

    <Button

      android:id="@+id/button1"

      

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_marginLeft="10dp"

      android:padding="20dp"      

      android:layout_weight="0"

      android:text="@string/dummy_button" />

android:layout_marginLeft="10dp"：表明：Button左边前一个View的左边缘10dp.(下面详细分析)
[b]android:padding="20dp"   表明：Button里面的字，距离Button的边缘20dp.
[/b]



android:layout_marginXXXX系列参数其实很简单，但也容易造成误解。现在详细介绍如下：

举例如下，LinearLayout中有三个Button。xml如下：

 <LinearLayout

        android:id="@+id/ll_bar"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:gravity="left|center_vertical"

        android:orientation="horizontal" >

        <Button

            android:id="@+id/bar_wifiInfo"

            android:layout_width="60dp"

            android:layout_height="60dp"

            

            android:layout_marginLeft="50dp"

            android:layout_marginRight="20dp"

            android:layout_marginTop="10dp"

            

            android:background="@drawable/wifi_network"

            android:enabled="false"

            android:focusable="false" />

        

        <Button

            android:id="@+id/bar_netInfo"

            android:layout_width="60dp"

            android:layout_height="60dp"

            

            android:layout_marginRight="10dp"

            android:layout_marginTop="10dp"

            android:background="@drawable/et_network"

            android:enabled="false"

            android:focusable="false" />

        

        

         <Button

            android:id="@+id/bar_Test"

            android:layout_width="60dp"

            android:layout_height="60dp"

            android:layout_marginLeft="10dp"

            android:layout_marginTop="10dp"

             />

    </LinearLayout>

Button1，中声明如下：

android:layout_marginLeft="50dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"

android:layout_marginLeft="50dp": 则它的左边距离父View的左边为：50dp 

android:layout_marginTop="10dp":则它的上边距离父View的上边为：10dp.

android:layout_marginRight="20dp":
则它的右侧要隔开距离为20dp. 即隔离线离它右边20dp

Button2: 

android:layout_marginRight="10dp"   则它的右侧要隔开距离为10dp.即隔离线距离它右边10dp.
android:layout_marginTop="10dp"  : 则它的上边距离父View的上边为：10dp.

Button3:

android:layout_marginLeft="10dp" :
则它的左侧离Button2隔开的隔离线为10dp
 android:layout_marginTop="10dp": 则它的上边距离父View的上边为：10dp.

那他们是怎么分布的呢？

Sam引入一个隔离线的概念。

Button1中声明右侧隔离线距离它20dp. Button2声明距离左侧隔离线为0. 所以Button1距离Button2为：20+0=20dp

Button11中声明右侧隔离线距离它10dp.  Button3声明距离左侧隔离线为10dp. 所以Button2距离Button3： 10+10=20dp.

分析三：

layout_gravity, gravity区别：

    <Button

      android:id="@+id/button2"

      

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"
      android:layout_gravity="right"
      android:layout_weight="0"
      android:text="@string/dummy_content" />
    
    <Button
      android:id="@+id/button3"
      
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"

      android:gravity="right"
      android:layout_weight="0"
      android:text="@string/dummy_content" />

同样，layout_gravity是说View和它的上级View(父元素)的位置关系。gravity则是本View的Text和本View的位置关系。
 android:layout_gravity="right"：这个Button在它的父元素的右边对齐。

android:gravity="right"：Button中的Text在Button的右边对齐。

取值范围：

top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertica

当 android:orientation="vertical"  时， 只有水平方向的设置才起作用，垂直方向的设置不起作用。即：left，right，center_horizontal 是生效的。

当 android:orientation="horizontal" 时， 只有垂直方向的设置才起作用，水平方向的设置不起作用。即：top，bottom，center_vertical 是生效的。

注1.

dp：density-independent pixels（独立于密度的像素）——一个抽象的基于物理屏幕密度的单位。这些单位是相对于一个160dpi的屏幕，所有一个dp是160dpi屏幕上的一个点。dp到px的转换比率根据屏幕密度改变，但不一定是成正比。

注2：

"weight"顾名思义是权重的意思，layout_weight 用于给一个线性布局中的诸多视图的重要程度赋值。所有的视图都有一个layout_weight值，默认为零，意思是需要显示多大的视图就占据多大的屏幕空间。这就不难解释为什么会造成上面的情况了：Button1~Button5都设置了layout_height和layout_width属性为wrap_content即包住文字内容，他们都没有设置layout_weight
属性，即默认为0.，这样Button1和Button2根据需要的内容占据了整个屏幕，别的就显示不了啦！

若赋一个高于零的值，则将父视图中的可用空间分割，分割大小具体取决于每一个视图的layout_weight值以及该值在当前屏幕布局的整体layout_weight值和在其它视图屏幕布局的layout_weight值中所占的比率而定。举个例子：比如说我们在 水平方向上有一个文本标签和两个文本编辑元素。该文本标签并无指定layout_weight值，所以它将占据需要提供的最少空间。如果两个文本编辑元素每一个的layout_weight值都设置为1，则两者平分在父视图布局剩余的宽度(因为我们声明这两者的重要度相等)。如果两个文本编辑元素其中第一个的layout_weight值设置为1，而第二个的设置为2，则剩余空间的三分之二分给第一个，三分之一分给第二个(数值越小，重要度越高)。 

weight另一个好处就是允许子元素可以填充屏幕上的剩余空间。这也避免了在一个大屏幕中，一串小对象挤 成一堆的情况，而是允许他们放大填充空白。子元素指定一个weight 值，剩余的空间就会按这些子元素指定的weight 比例分配给这些子元素。默认的 weight 值为0。例如，如果有三个文本框，其中两个指定了weight 值为1，那么，这两个文本框将等比例地放大，并填满剩余的空间，而第三个文本框
不会放大。

分割大小具体取决于每一个视图的layout_weight值以及该值在当前屏幕布局的整体layout_weight值和在其它视图屏幕布局的layout_weight值中所占的比率而定

这段说法有点不正确。例如Button：如果其Text长度不同，而layout_width="wrap_content". 则还与Text长度有关。