这篇blog大量参考网络资源。
上面介绍一些基础知识,接着研究研究UI的视图层级。最后看看Layout中元素的属性。
0. View:
先说说View:
View
extends Objectimplements 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:padding="20dp" 表明:Button里面的字,距离Button的边缘20dp.
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" />
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长度有关。