[计算机软件及应用]Android22布局管理分析课件.ppt

1、主要内容 安卓的布局安卓的布局 1.1、LinearLayout 1.2、RelativeLayout 1.3、TableLayout 1.4、FrameLayout 1.5、AbsoluteLayout 1.6、嵌套布局嵌套布局 滚动视图滚动视图 2.1、垂直滚动视图垂直滚动视图 2.2、水平滚动视图水平滚动视图布局学习前言 一个Android视图有很多控件，那么怎么来控制它们的位置排列呢?我们需要容器来存放这些控件并控制它们的位置排列，就像HTML中div,table一样，Android布局也起到同样的作用。Android布局主要有以下几种:LinearLayout,RelativeLay

2、out,TableLayout,FrameLayout，AbsoluteLayout.最后一种AbsoluteLayout是通过指定控件的x/y坐标来定位的，不太灵活所以已经不推荐使用了。安卓布局-总览 andorid的界面，需要写在res/layout的xml里面，一般情况下一个xml对应一个界面。Android界面布局有点像写html(连注释代码的方式都一样)，要先给Android定框架，然后再在框架里面放控件，Android提供了几种框架,AbsoluteLayout,LinearLayout,RelativeLayout,TableLayout,FrameLayout 各种布局的特征

3、FrameLayout:里面只可以有一个控件，控件会放到左上角 LinearLayout：里面可以放多个控件，但是一行只能放一个控件 TableLayout：这个要和TableRow配合使用，很像html里面的table AbsoluteLayout：里面可以放多个控件，并且可以自己定义控件的x,y的位置 RelativeLayout：里面可以放多个控件，不过控件的位置都是相对位置关于设置大小和高度pxpx(pixels)(pixels)像素像素 一般一般HVGAHVGA代表代表320 x480320 x480像素，这个用的比较多。像素，这个用的比较多。dipdip或或dpdp(device

4、independent pixels)(device independent pixels)设备独立像素设备独立像素 这个和设备硬件有关，一般为了支持这个和设备硬件有关，一般为了支持WVGAWVGA、HVGAHVGA和和QVGA QVGA 推荐使用推荐使用这个，不依赖像素。这个，不依赖像素。sp(scaled pixels best for text size)sp(scaled pixels best for text size)比例像素比例像素 主要处理字体的大小，可以根据系统的字体自适应。主要处理字体的大小，可以根据系统的字体自适应。下面几个不太常用：下面几个不太常用：in(inches

5、)in(inches)英寸英寸 mm(millimeters)mm(millimeters)毫米毫米 pt(points)pt(points)点，点，1/721/72英寸英寸为了适应不同分辨率，不同的像素密度，推荐使用为了适应不同分辨率，不同的像素密度，推荐使用dip dip，文字使用，文字使用spsp。布局组件之间的继承关系LinearLayout简介 线性布局由LinearLayout类来代表，它可以将容器里的组件一个一个的排列起来，以线性方向显示它的子视图（view）元素，即垂直地或水平地。LinearLayout的元素LinearLayout线性布局，包含在LinearLayout里面

6、的控件按顺序排列成一行或者一列，类似于Swing里的FlowLayout和Silverlight里的StackPanel，它的常用的属性主要包括：Orientation方向，即指定LinearLayout是代表一行还是一列，可以为horizontal或vertical，如android:orientation=vertical，当然也在可以在代码里通过setOrientation()方法来设置。Fill Mode填充方式，所有在LinearLayout的控件都必须指定它的填充方式,即设置android:layout_width和android:layout_height，可以为三种值(1)具体

7、的像素值，如20px(2)wrap_content,表示按控件文本实际长度显示(3)fill_parent,表示填充剩下的所有可用空间。Weight权重，如果你想让一行或一列的控件按比例显示，这时候权重就起到作用了，如想让一行里面两控件其中一控件占两倍于另一控件的空间，可以把其中一控件的android:layout_weight设置为1,另一个为2 即可。默认为零，意思是需要显示多大的视图就占据多大的屏幕空间。LinearLayout布局示例-1 LinearLayout布局示例-2 资源文件 Hello World,UIActivity!用户界面 请输入用户名 确定 取消 运行结果界面元素分

8、析 其属性“xmlns:android”指定命名空间，顶级元素必须指定命名空间。而在该命名空间中的控件的属性 如layout_width，要在属性前加上“android：”做前缀。其属性“layout_width”指定该元素的宽度，可选值有三种，“fill_parent”、“wrap_content”、具体数字（单位为 px）。其中“fill_parent”代表填满其父元素，对于顶级元素来说，其父元素就是整个手机屏幕。“wrap_content”代表该元素的大小仅包裹其自身内容，而数字则代表其占相应的 px。其属性“layout_height”指定该元素的高度，可选参数值与“layout_wi

9、dth”的参数意义相同。其属性“orientation”指定子元素排列方式，其中指定为“vertical”则是子元素垂直排列，每个子元素会占独立的一行，如图所示LinearLayout示例代码2-1 LinearLayout示例代码2-2 运行结果RelativeLayout 简介 RelativeLayout（相对布局）相对布局中的（相对布局）相对布局中的视图组件是按相互之间的相对位置来确定的视图组件是按相互之间的相对位置来确定的，并不是线性布局中的必须并不是线性布局中的必须 按行或按列单个显示。一个视图可以指定相按行或按列单个显示。一个视图可以指定相对于它的兄弟视图的位置（例如在给定视图对

10、于它的兄弟视图的位置（例如在给定视图的左边或者下面）或相对于的左边或者下面）或相对于RelativeLayout的特定区域的位置（例如底部对齐，或中间的特定区域的位置（例如底部对齐，或中间偏左）。偏左）。RelativeLayout 元素 android:layout_below=“id/text”：将该元素放到 id 为 text 的元素的下面。android:layout_toLeftOf=id/ok：放到 id 为 ok 的元素左边 android:layout_alignTop=id/ok：对齐 id 为 ok 的元素的顶部RelativeLayout 示例-1 RelativeLay

11、out 示例-2 RelativeLayout运行结果RelativeLayout界面元素分析-1 相对布局，它是依靠与父容器，同一容器中其它控件的相对位置来排列显示的。android:layout_alignParentTop:控件的顶部与父容器的顶部对齐 android:layout_alignParentBottom android:layout_alignParentLeft android:layout_alignParentRight.RelativeLayout界面元素分析-2 相对同一容器中其它控件的属性：android:layout_below 在某元素的下方 android

12、:layout_above 在某元素的的上方 android:layout_toLeftOf 在某元素的左边 android:layout_toRightOf 在某元素的右边 android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐 android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐 android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐 android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐RelativeLayout界面元素分析-3 属性值为具体的像素值，如

13、30dip，40px android:layout_marginBottom 离某元素底边离某元素底边缘的距离缘的距离 android:layout_marginLeft 离某元素左边缘离某元素左边缘的距离的距离 android:layout_marginRight 离某元素右边缘离某元素右边缘的距离的距离 android:layout_marginTop 离某元素上边缘离某元素上边缘的距离的距离TableLayout简介 表格布局是一个以表格显示它的子视图（view）元素，即行和列标识一个视图的位置。其实Android的表格布局跟HTML中的表格布局非常类似 TableLayout要和Tab

14、leRow配合使用，很像html里面的tableTableLayout元素 是顶级元素，说明采用的是表格布局 定义一个行 定义一个单元格的内容TableLayout示例-1 TableLayout示例-2 TableLayout示例-3 TableLayout示例-4 TableLayout示例-5 TableLayout示例-资源文件 姓名 性别 年龄 电话 男 女 张三 25 1234567 李四 24 7654321 TableLayout运行结果TableLayout代码分析 andriod:collapseColumns:设置需要被隐藏的列的列序号 andriod:shrinkCol

15、umns:设置需要被收缩的列的列序号 andriod:stretchColumns:设置需要被拉伸的列的列序号 例如：android:stretchColumns=0,1,2,3 该属性指定每行都由第“0、1、2、3”列占满空白空间。FrameLayout简介 帧布局容器为每个加入其中的组件创建一个空帧布局容器为每个加入其中的组件创建一个空白的区域（成为一帧，可以在其中填充一个单白的区域（成为一帧，可以在其中填充一个单一对象），所有每个子组件占据一帧，这些帧一对象），所有每个子组件占据一帧，这些帧都会根据都会根据gravity属性执行自动对齐。属性执行自动对齐。Xml属性属性 android:

16、foreground 设置该帧布局容器的前景图设置该帧布局容器的前景图像像 android:foregroundGravity 定义绘制前景图像定义绘制前景图像的的gravity属性属性FrameLayout元素 对子元素添加对子元素添加android:layout_gravity属性来属性来设置他们的位置设置他们的位置 在在FrameLayout布局里面布局里面android:layout_margin的各种属性必须依赖的各种属性必须依赖于于android:layout_gravity，也就是说，要想，也就是说，要想margin生效，必须设定生效，必须设定view的的layout_gravi

17、ty属性。属性。FrameLayout示例-1FrameLayout示例-2FrameLayout运行结果FrameLayout代码分析 属性名称对应方法描述android:foregroundsetForeground(Drawable)设置绘制在所有控件之上android:foregroundGravitysetForegroundGravity(int)设置绘制在所有子控件之上内容的gravity属性。ListView简介 ListView是一种列表视图，其将ListAdapter所提供的各个控件显示在一个垂直且可滚动的列表中。需要注意的为创建适配器并将其设置给ListView。列表元素

18、通过ListAdapter自动插入到列表。ListView元素 列表布局的关键部分：布局文件中定义ListView Adapter用来将数据填充到ListView 要填充到ListView的数据，这些数据可以字符串、图片、控件等等 其中Adapter是ListView和数据源之间的桥梁，根据数据源的不同Adapter可以分为三类：String:ArrayAdapter ListMap:SimpleAdapter 数据库Cursor:SimpleCursorAdapter ListView元素-ArrayAdapter ArrayAdapter ArrayAdapter由3个参数进行构造，第一个

19、为Context，第二个为在R文件中定义的Layout，也可用系统的R文件，第三个参数是一个数组，数组中每一项的类型没有限制。ListView示例ArrayAdapter-1 private static String data=a,b,c,d;Override public void onCreate(Bundle savedInstanceState)super.onCreate(savedInstanceState);/setContentView(R.layout.main);ListView listview=new ListView(this);ArrayAdapter adapt

20、er=new ArrayAdapter(this,android.R.layout.arrayExample,data);/数据适配器 listview.setAdapter(adapter);/向组件增加数据 setContentView(listview);ListView示例ArrayAdapter-1 注意：arrayExample只有一个TextView(Android.R.layout.simple_list_item_1只有一个TextView)ListView示例ArrayAdapter-2 界面资源 ListView运行结果(ArrayAdapter)ListView元素元素

21、-SimpleAdapter SimpleAdapter SimpleAdapter的ArrayList里的每一项都是一个Map类型，每一项Map对象都和ListV中的一项进行数据绑定一一对应。ListView示例SimpleAdapter-1 private ListView listview;Override public void onCreate(Bundle savedInstanceState)super.onCreate(savedInstanceState);listview=new ListView(this);data2=new ArrayListMap();Map ite

22、m;item=new HashMap();item.put(姓名,张三);item.put(性别,男);item.put(年龄,25);data2.add(item);item=new HashMap();item.put(姓名,李四);item.put(性别,男);item.put(年龄,33);ListView示例SimpleAdapter-2 data2.add(item);item=new HashMap();item.put(姓名,小王);item.put(性别,女);item.put(年龄,31);data2.add(item);SimpleAdapter adapter=new

23、SimpleAdapter(this,data2,R.layout.simplelayout,new String 姓名,性别,年龄,new int R.id.tv01,R.id.tv02,R.id.tv03);listview.setAdapter(adapter);setContentView(listview);ListView示例SimpleAdapter-3界面资源 ListView运行结果(SimpleAdapter)ListView元素-BaseAdapter BaseAdapter BaseAdapter是一个接口，我们需要自己实现它的方法（getView方法，getItemI

24、d方法，getItem方法以及getCount方法）ListView示例BaseAdapter-1 public class mainActivity extends Activity /*Called when the activity is first created.*/int drawableIds=R.drawable.img01,R.drawable.img02,R.drawable.img03;int msgIds=R.string.str1,R.string.str2,R.string.str3;Override public void onCreate(Bundle save

25、dInstanceState)super.onCreate(savedInstanceState);setContentView(R.layout.main);ListView listview=(ListView)findViewById(R.id.listview01);BaseAdapter ba=new BaseAdapter()ListView示例BaseAdapter-2 public View getView(int position,View convertView,ViewGroup parent)/TODO Auto-generated method stub Linear

26、Layout ll=new LinearLayout(mainActivity.this);ll.setOrientation(LinearLayout.HORIZONTAL);ll.setPadding(5,5,5,5);ImageView ii=new ImageView(mainActivity.this);ii.setImageDrawable(getResources().getDrawable(drawableIdsposition);ii.setScaleType(ImageView.ScaleType.FIT_XY);ii.setLayoutParams(new Gallery

27、.LayoutParams(50,50);ll.addView(ii);TextView tv=new TextView(mainActivity.this);tv.setText(getResources().getText(msgIdsposition);tv.setTextSize(24);tv.setTextColor(mainActivity.this.getResources().getColor(R.color.white);tv.setPadding(5,5,5,5);tv.setGravity(Gravity.LEFT);ll.addView(tv);return ll;Li

28、stView示例BaseAdapter-3public long getItemId(int position)/TODO Auto-generated method stub return 0;public Object getItem(int position)/TODO Auto-generated method stub return null;public int getCount()/TODO Auto-generated method stub return 3;listview.setAdapter(ba);ListView运行结果(BaseAdapter)BaseAdapte

29、r代码分析 自定义Adapter子类，就需要实现上面几个方法，其中最重要的是getView()方法，它是将获取数据后的View组件返回，如ListView中每一行里的TextView、Gallery中的每个ImageView。BaseAdapter是实现了ListAdapter和SpinnerAdapter两个接口，当然它也可以直接给ListView和Spinner等UI组件直接提供数据。BaseAdapter类型详解1 listView在开始绘制的时候，系统首先调用getCount()函数，根据他的返回值得到 listView的长度，然后根据这个长度，调用getView()逐一绘制每一行。如

30、果你的 getCount()返回值是0的话，列表将不显示同样return 1，就只显示一行。系统显示列表时，首先实例化一个适配器(这里将实例化自定义的适配器)。当手动完成适配时，必须手动映射数据，这需要重写getView()方 法。BaseAdapter类型详解2 系统在绘制列表的每一行的时候将调用此方法。getView()有三个参数，position表示将显示的是第几行，covertView是从布局文 件中inflate来的布局。我们用LayoutInflater的方法将定义好的item.xml文件提取成View实例用来显示。然后将xml文件中 的各个组件实例化(简单的findViewByI

31、d()方法)。这样便可以将数据对应到各个组件上了。但是按钮为了响应点击事件，需要为它添加点击监听 器，这样就能捕获点击事件。BaseAdapter类型详解3 至此一个自定义的listView就完成了，现在让我们回过头从新审视这个过程。系统要绘制ListView了，他首先获得要 绘制的这个列表的长度，然后开始绘制第一行，怎么绘制呢?调用getView()函数。在这个函数里面首先获得一个View(实际上是一个 ViewGroup)，然后再实例并设置各个组件，显示之。好了，绘制完这一行了。那再绘制下一行，直到绘完为止。Adapter作用Adapter在Android应用程序中起着非常重要的作用，应用

32、也非常广泛，它可看作是数据源和UI组件之间的桥梁，其中Adapter、数据和UI之间的关系，可以用下图表示：ListActivity简介 Activity与ListActivity不同，ListActivity里面自带了一个listview控件，不用再写布局文件。ListActivity中比较复杂的部分就是配置其Adapter，Adapter常用的有ArrayAdapter和SimpleAdapterListActivity元素 在使用ListActivity的时候，我们需要自己的Activity继承自ListActivity ListActivity不同于普通Activity的地方是该Act

33、ivity里边有一个ListView，该ListView绑定了Adapter中的数据。ListActivity示例-1 public class ListActivityTest extends ListActivity /*Called when the activity is first created.*/Override public void onCreate(Bundle savedInstanceState)super.onCreate(savedInstanceState);this.setTheme(android.R.style.Theme_Black);/setConte

34、ntView(R.layout.main);List items=fillArray();ListActivity示例-2 ArrayAdapter adapter=new ArrayAdapter(this,android.R.layout.simple_expandable_list_item_1,items);this.setListAdapter(adapter);private List fillArray()List items=new ArrayList();items.add(1);items.add(2);items.add(3);return items;ListActiv

35、ity运行结果AbsoluteLayout简介 AbsoluteLayout,顾名思义，就是绝对位置的布局；也可以叫做坐标布局，也就是指定元素的绝对位置（或者叫绝对坐标值）。这种布局简单直接，直观性强，但是由于手机屏幕尺寸差别比较大，使用绝对定位的适应性会比较差。一般情况下，我们已经不建议采用AbsoluteLayout布局了AbsoluteLayout元素 在采用AbsoluteLayout布局的时候，我们采用元素左上角与界面左上角的距离进行绝对定位，主要定位的元素如下：android:layout_x=60dip android:layout_y=50dipAbsoluteLayout示例

36、-1 AbsoluteLayout示例-2 AbsoluteLayout运行结果ScrollView简介 视图的滚动过程，其实是在不断修改原点坐标。当手指触摸后，ScrollView会暂时拦截触摸事件，使用一个计时器。假如在计时器到点后没有发生手指移动事件，那么ScrollView发送tracking events到被点击的subView；若是在计时器到点后发生了移动事件，那么ScrollView取消tracking自己促发滚动。ScrollView还可处理缩放和平移手势，要实现这必须实现委托viewForZoomingInScrollView:和scrollViewDidEndZooming

37、:withView:atScale:两个方法。另外maximumZoomScale和minimumZoomScale两个属性要不一样。ScrollView元素-1 maximumZoomScale 能放大的最大倍数，是浮点数。minimumZoomScale 能缩小的最小倍数，是浮点数。pagingEnabled 是否自动滚动到subView边界 scrollEnabled 是否可以滚动 contentSize 里面内容的大小，即可以滚动的大小，默认是0，没有滚动效果 showsHorizontalScrollIndicator 滚动时是否显示水平滚动条 showsVerticalScroll

38、Indicator 滚动时是否显示垂直滚动条 bounces 默认是YES，就是滚动超过边界会反弹，即有反弹回来的效果。若是NO，则滚动到达边界会立刻停止 bouncesZoom 与bounces类似，只是反映在缩放效果上。ScrollView元素-2 directionalLockEnabled 默认是NO，可以在垂直和水平方向同时运动。当值是YES时，视哪个方向开始则锁定另外一个方向的滚动。indicatorStyle 滚动条的样式。总共3色：默认、黑、白 scrollIndicatorInsets 设置滚动条位置 tracking 当touch后还没有拖动的时候是YES，否则NO zoo

39、mBouncing 当内容放大到最大或者最小的时候值是YES，否则NO zooming 当正在缩放的时候值是YES，否则NO decelerating 当滚动后，手指放开但还在继续滚动中。此时是YES，其它时候都是NO decelerationRate 设置手指放开后的减速率ScrollView示例-1 ScrollView示例-2 ScrollView运行结果选项卡TabHost简介 使用TabHost 可以在一个屏幕间进行不同版面的切换 TabHost在界面布局中特别常用也是很重要的一种布局方式。使用TabHost可以有效的利用有限的屏幕资源，开发出用户界面更加友好的应用程序。选项卡Tab

40、Host元素-1 TabHost是整个Tab的容器，包括两部分，TabWidget和FrameLayout。TabWidget就是每个tab的标签，FrameLayout则是tab内容。1、如果我们使用extends TabAcitivty，如同ListActivity，TabHost必须设置为android:id/tabhost 2、TabWidget必须设置android:id为android:id/tabs 3、FrameLayout需要设置android:id为android:id/tabcontent 选项卡TabHost示例-1 public class AndroidUIActi

41、vity extends TabActivity Override public void onCreate(Bundle savedInstanceState)super.onCreate(savedInstanceState);setContentView(R.layout.main);/tabHost是一个标签容器 TabHost tabHost=this.getTabHost();/每一个TabSpec对象就是个标签 /TabSpec.setIndicator()方法是设置标签显示样式 /TabSpec.setContent()方法显示标签下方的内容显示 选项卡TabHost示例-2

42、/定义第一个标签 tabHost.addTab(tabHost .newTabSpec(OneTab).setIndicator(OneTab,getResources().getDrawable(android.R.drawable.star_on).setContent(R.id.linearLayout1);/定义第二个标签 tabHost.addTab(tabHost .newTabSpec(TwoTab).setIndicator(TwoTab,getResources().getDrawable(android.R.drawable.star_off).setContent(R.i

43、d.linearLayout2);选项卡TabHost示例-3 /定义第三个标签 tabHost.addTab(tabHost .newTabSpec(ThreeTab).setIndicator(ThreeTab,getResources().getDrawable(android.R.drawable.stat_notify_call_mute).setContent(R.id.linearLayout3);选项卡TabHost示例-4 选项卡TabHost示例-5 选项卡TabHost示例-6 选项卡TabHost示例-7 选项卡TabHost运行结果选项卡TabHost代码分析 新建一

44、个新建一个newTabSpec(newTabSpec)每一个每一个TabSpec对象就是个标签对象就是个标签 设置其标签和图标设置其标签和图标(setIndicator)TabSpec.setIndicator()方法是设置标签显示方法是设置标签显示样式样式 设置内容设置内容(setContent)TabSpec.setContent()方法显示标签下方的方法显示标签下方的内容显示内容显示 选项卡TabHost主要事件 tabHost.setOnTabChangedListener(new OnTabChangeListener()/TODO Auto-generated method stub Override public void onTabChanged(String tabId).);总结 1、安卓的布局有哪些 2、垂直滚动视图的作用 3、水平滚动视图的作用