Android22布局管理分析.ppt

主要内容 安卓的布局1 1 LinearLayout1 2 RelativeLayout1 3 TableLayout1 4 FrameLayout1 5 AbsoluteLayout1 6 嵌套布局滚动视图2 1 垂直滚动视图2 2 水平滚动视图 布局学习前言 一个Android视图有很多控件 那么怎么来控制它们的位置排列呢 我们需要容器来存放这些控件并控制它们的位置排列 就像HTML中div table一样 Android布局也起到同样的作用 Android布局主要有以下几种 LinearLayout RelativeLayout TableLayout FrameLayout AbsoluteLayout 最后一种AbsoluteLayout是通过指定控件的x y坐标来定位的 不太灵活所以已经不推荐使用了 安卓布局 总览 andorid的界面 需要写在res layout的xml里面 一般情况下一个xml对应一个界面 Android界面布局有点像写html 连注释代码的方式都一样 要先给Android定框架 然后再在框架里面放控件 Android提供了几种框架 AbsoluteLayout LinearLayout RelativeLayout TableLayout FrameLayout 各种布局的特征 FrameLayout 里面只可以有一个控件 控件会放到左上角LinearLayout 里面可以放多个控件 但是一行只能放一个控件TableLayout 这个要和TableRow配合使用 很像html里面的tableAbsoluteLayout 里面可以放多个控件 并且可以自己定义控件的x y的位置RelativeLayout 里面可以放多个控件 不过控件的位置都是相对位置 关于设置大小和高度 px pixels 像素一般HVGA代表320 x480像素 这个用的比较多 dip或dp deviceindependentpixels 设备独立像素这个和设备硬件有关 一般为了支持WVGA HVGA和QVGA推荐使用这个 不依赖像素 sp scaledpixels bestfortextsize 比例像素主要处理字体的大小 可以根据系统的字体自适应 下面几个不太常用 in inches 英寸mm millimeters 毫米pt points 点 1 72英寸为了适应不同分辨率 不同的像素密度 推荐使用dip 文字使用sp 布局组件之间的继承关系 LinearLayout简介 线性布局由LinearLayout类来代表 它可以将容器里的组件一个一个的排列起来 以线性方向显示它的子视图 view 元素 即垂直地或水平地 LinearLayout的元素 LinearLayout线性布局 包含在LinearLayout里面的控件按顺序排列成一行或者一列 类似于Swing里的FlowLayout和Silverlight里的StackPanel 它的常用的属性主要包括 Orientation方向 即指定LinearLayout是代表一行还是一列 可以为horizontal或vertical 如android orientation vertical 当然也在可以在代码里通过setOrientation 方法来设置 FillMode填充方式 所有在LinearLayout的控件都必须指定它的填充方式 即设置android layout width和android layout height 可以为三种值 1 具体的像素值 如20px 2 wrap content 表示按控件文本实际长度显示 3 fill parent 表示填充剩下的所有可用空间 Weight权重 如果你想让一行或一列的控件按比例显示 这时候权重就起到作用了 如想让一行里面两控件其中一控件占两倍于另一控件的空间 可以把其中一控件的android layout weight设置为1 另一个为2即可 默认为零 意思是需要显示多大的视图就占据多大的屏幕空间 LinearLayout布局示例 1 LinearLayout布局示例 2 资源文件 HelloWorld UIActivity 用户界面请输入用户名确定取消 运行结果 界面元素分析 其属性 xmlns android 指定命名空间 顶级元素必须指定命名空间 而在该命名空间中的控件的属性如layout width 要在属性前加上 android 做前缀 其属性 layout width 指定该元素的宽度 可选值有三种 fill parent wrap content 具体数字 单位为px 其中 fill parent 代表填满其父元素 对于顶级元素来说 其父元素就是整个手机屏幕 wrap content 代表该元素的大小仅包裹其自身内容 而数字则代表其占相应的px 其属性 layout height 指定该元素的高度 可选参数值与 layout width 的参数意义相同 其属性 orientation 指定子元素排列方式 其中指定为 vertical 则是子元素垂直排列 每个子元素会占独立的一行 如图所示 LinearLayout示例代码2 1 LinearLayout示例代码2 2 运行结果 RelativeLayout简介 RelativeLayout 相对布局 相对布局中的视图组件是按相互之间的相对位置来确定的 并不是线性布局中的必须按行或按列单个显示 一个视图可以指定相对于它的兄弟视图的位置 例如在给定视图的左边或者下面 或相对于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 RelativeLayout示例 2 RelativeLayout运行结果 RelativeLayout界面元素分析 1 相对布局 它是依靠与父容器 同一容器中其它控件的相对位置来排列显示的 android layout alignParentTop 控件的顶部与父容器的顶部对齐android layout alignParentBottomandroid layout alignParentLeftandroid layout alignParentRight RelativeLayout界面元素分析 2 相对同一容器中其它控件的属性 android layout below在某元素的下方android layout above在某元素的的上方android layout toLeftOf在某元素的左边android layout toRightOf在某元素的右边android layout alignTop本元素的上边缘和某元素的的上边缘对齐android layout alignLeft本元素的左边缘和某元素的的左边缘对齐android layout alignBottom本元素的下边缘和某元素的的下边缘对齐android layout alignRight本元素的右边缘和某元素的的右边缘对齐 RelativeLayout界面元素分析 3 属性值为具体的像素值 如30dip 40pxandroid layout marginBottom离某元素底边缘的距离android layout marginLeft离某元素左边缘的距离android layout marginRight离某元素右边缘的距离android layout marginTop离某元素上边缘的距离 TableLayout简介 表格布局是一个以表格显示它的子视图 view 元素 即行和列标识一个视图的位置 其实Android的表格布局跟HTML中的表格布局非常类似TableLayout要和TableRow配合使用 很像html里面的table TableLayout元素 是顶级元素 说明采用的是表格布局定义一个行定义一个单元格的内容 TableLayout示例 1 TableLayout示例 2 TableLayout示例 3 TableLayout示例 4 TableLayout示例 5 TableLayout示例 资源文件 姓名性别年龄电话男女张三251234567李四247654321 TableLayout运行结果 TableLayout代码分析 andriod collapseColumns 设置需要被隐藏的列的列序号andriod shrinkColumns 设置需要被收缩的列的列序号andriod stretchColumns 设置需要被拉伸的列的列序号例如 android stretchColumns 0 1 2 3 该属性指定每行都由第 0 1 2 3 列占满空白空间 FrameLayout简介 帧布局容器为每个加入其中的组件创建一个空白的区域 成为一帧 可以在其中填充一个单一对象 所有每个子组件占据一帧 这些帧都会根据gravity属性执行自动对齐 Xml属性android foreground设置该帧布局容器的前景图像android foregroundGravity定义绘制前景图像的gravity属性 FrameLayout元素 对子元素添加android layout gravity属性来设置他们的位置在FrameLayout布局里面android layout margin的各种属性必须依赖于android layout gravity 也就是说 要想margin生效 必须设定view的layout gravity属性 FrameLayout示例 1 FrameLayout示例 2 FrameLayout运行结果 FrameLayout代码分析 属性名称对应方法描述android foregroundsetForeground Drawable 设置绘制在所有控件之上android foregroundGravitysetForegroundGravity int 设置绘制在所有子控件之上内容的gravity属性 ListView简介 ListView是一种列表视图 其将ListAdapter所提供的各个控件显示在一个垂直且可滚动的列表中 需要注意的为创建适配器并将其设置给ListView 列表元素通过ListAdapter自动插入到列表 ListView元素 列表布局的关键部分 布局文件中定义ListViewAdapter用来将数据填充到ListView要填充到ListView的数据 这些数据可以字符串 图片 控件等等其中Adapter是ListView和数据源之间的桥梁 根据数据源的不同Adapter可以分为三类 String ArrayAdapterList SimpleAdapter数据库Cursor SimpleCursorAdapter ListView元素 ArrayAdapter ArrayAdapterArrayAdapter由3个参数进行构造 第一个为Context 第二个为在R文件中定义的Layout 也可用系统的R文件 第三个参数是一个数组 数组中每一项的类型没有限制 ListView示例 ArrayAdapter 1 privatestaticString data a b c d OverridepublicvoidonCreate BundlesavedInstanceState super onCreate savedInstanceState setContentView R layout main ListViewlistview newListView this ArrayAdapteradapter newArrayAdapter 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元素 SimpleAdapter SimpleAdapterSimpleAdapter的ArrayList里的每一项都是一个Map类型 每一项Map对象都和ListV中的一项进行数据绑定一一对应 ListView示例 SimpleAdapter 1 privateListViewlistview OverridepublicvoidonCreate BundlesavedInstanceState super onCreate savedInstanceState listview newListView this data2 newArrayList Mapitem item newHashMap item put 姓名 张三 item put 性别 男 item put 年龄 25 data2 add item item newHashMap item put 姓名 李四 item put 性别 男 item put 年龄 33 ListView示例 SimpleAdapter 2 data2 add item item newHashMap item put 姓名 小王 item put 性别 女 item put 年龄 31 data2 add item SimpleAdapteradapter newSimpleAdapter this data2 R layout simplelayout newString 姓名 性别 年龄 newint R id tv01 R id tv02 R id tv03 listview setAdapter adapter setContentView listview ListView示例 SimpleAdapter 3 界面资源 ListView运行结果 SimpleAdapter ListView元素 BaseAdapter BaseAdapterBaseAdapter是一个接口 我们需要自己实现它的方法 getView方法 getItemId方法 getItem方法以及getCount方法 ListView示例 BaseAdapter 1 publicclassmainActivityextendsActivity Calledwhentheactivityisfirstcreated int drawableIds R drawable img01 R drawable img02 R drawable img03 int msgIds R string str1 R string str2 R string str3 OverridepublicvoidonCreate BundlesavedInstanceState super onCreate savedInstanceState setContentView R layout main ListViewlistview ListView findViewById R id listview01 BaseAdapterba newBaseAdapter ListView示例 BaseAdapter 2 publicViewgetView intposition ViewconvertView ViewGroupparent TODOAuto generatedmethodstubLinearLayoutll newLinearLayout mainActivity this ll setOrientation LinearLayout HORIZONTAL ll setPadding 5 5 5 5 ImageViewii newImageView mainActivity this ii setImageDrawable getResources getDrawable drawableIds position ii setScaleType ImageView ScaleType FIT XY ii setLayoutParams newGallery LayoutParams 50 50 ll addView ii TextViewtv newTextView mainActivity this tv setText getResources getText msgIds position 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 returnll ListView示例 BaseAdapter 3 publiclonggetItemId intposition TODOAuto generatedmethodstubreturn0 publicObjectgetItem intposition TODOAuto generatedmethodstubreturnnull publicintgetCount TODOAuto generatedmethodstubreturn3 listview setAdapter ba ListView运行结果 BaseAdapter BaseAdapter代码分析 自定义Adapter子类 就需要实现上面几个方法 其中最重要的是getView 方法 它是将获取数据后的View组件返回 如ListView中每一行里的TextView Gallery中的每个ImageView BaseAdapter是实现了ListAdapter和SpinnerAdapter两个接口 当然它也可以直接给ListView和Spinner等UI组件直接提供数据 BaseAdapter类型详解1 listView在开始绘制的时候 系统首先调用getCount 函数 根据他的返回值得到listView的长度 然后根据这个长度 调用getView 逐一绘制每一行 如果你的getCount 返回值是0的话 列表将不显示同样return1 就只显示一行 系统显示列表时 首先实例化一个适配器 这里将实例化自定义的适配器 当手动完成适配时 必须手动映射数据 这需要重写getView 方法 BaseAdapter类型详解2 系统在绘制列表的每一行的时候将调用此方法 getView 有三个参数 position表示将显示的是第几行 covertView是从布局文件中inflate来的布局 我们用LayoutInflater的方法将定义好的item xml文件提取成View实例用来显示 然后将xml文件中的各个组件实例化 简单的findViewById 方法 这样便可以将数据对应到各个组件上了 但是按钮为了响应点击事件 需要为它添加点击监听器 这样就能捕获点击事件 BaseAdapter类型详解3 至此一个自定义的listView就完成了 现在让我们回过头从新审视这个过程 系统要绘制ListView了 他首先获得要绘制的这个列表的长度 然后开始绘制第一行 怎么绘制呢 调用getView 函数 在这个函数里面首先获得一个View 实际上是一个ViewGroup 然后再实例并设置各个组件 显示之 好了 绘制完这一行了 那再绘制下一行 直到绘完为止 Adapter作用 Adapter在Android应用程序中起着非常重要的作用 应用也非常广泛 它可看作是数据源和UI组件之间的桥梁 其中Adapter 数据和UI之间的关系 可以用下图表示 ListActivity简介 Activity与ListActivity不同 ListActivity里面自带了一个listview控件 不用再写布局文件 ListActivity中比较复杂的部分就是配置其Adapter Adapter常用的有ArrayAdapter和SimpleAdapter ListActivity元素 在使用ListActivity的时候 我们需要自己的Activity继承自ListActivityListActivity不同于普通Activity的地方是该Activity里边有一个ListView 该ListView绑定了Adapter中的数据 ListActivity示例 1 publicclassListActivityTestextendsListActivity Calledwhentheactivityisfirstcreated OverridepublicvoidonCreate BundlesavedInstanceState super onCreate savedInstanceState this setTheme android R style Theme Black setContentView R layout main Listitems fillArray ListActivity示例 2 ArrayAdapteradapter newArrayAdapter this android R layout simple expandable list item 1 items this setListAdapter adapter privateListfillArray Listitems newArrayList items add 1 items add 2 items add 3 returnitems ListActivity运行结果 AbsoluteLayout简介 AbsoluteLayout 顾名思义 就是绝对位置的布局 也可以叫做坐标布局 也就是指定元素的绝对位置 或者叫绝对坐标值 这种布局简单直接 直观性强 但是由于手机屏幕尺寸差别比较大 使用绝对定位的适应性会比较差 一般情况下 我们已经不建议采用AbsoluteLayout布局了 AbsoluteLayout元素 在采用AbsoluteLayout布局的时候 我们采用元素左上角与界面左上角的距离进行绝对定位 主要定位的元素如下 android layout x 60dip android layout y 50dip AbsoluteLayout示例 1 AbsoluteLayout示例 2 AbsoluteLayout运行结果 ScrollView简介 视图的滚动过程 其实是在不断修改原点坐标 当手指触摸后 ScrollView会暂时拦截触摸事件 使用一个计时器 假如在计时器到点后没有发生手指移动事件 那么ScrollView发送trackingevents到被点击的subView 若是在计时器到点后发生了移动事件 那么ScrollView取消tracking自己促发滚动 ScrollView还可处理缩放和平移手势 要实现这必须实现委托viewForZoomingInScrollView 和scrollViewDidEndZooming withView atScale 两个方法 另外maximumZoomScale和minimumZoomScale两个属性要不一样 ScrollView元素 1 maximumZoomScale能放大的最大倍数 是浮点数 minimumZoomScale能缩小的最小倍数 是浮点数 pagingEnabled是否自动滚动到subView边界scrollEnabled是否可以滚动contentSize里面内容的大小 即可以滚动的大小 默认是0 没有滚动效果showsHorizontalScrollIndicator滚动时是否显示水平滚动条showsVerticalScrollIndicator滚动时是否显示垂直滚动条bounces默认是YES 就是滚动超过边界会反弹 即有反弹回来的效果 若是NO 则滚动到达边界会立刻停止bouncesZoom与bounces类似 只是反映在缩放效果上 ScrollView元素 2 directionalLockEnabled默认是NO 可以在垂直和水平方向同时运动 当值是YES时 视哪个方向开始则锁定另外一个方向的滚动 indicatorStyle滚动条的样式 总共3色 默认 黑 白scrollIndicatorInsets设置滚动条位置tracking当touch后还没有拖动的时候是YES 否则NOzoomBouncing当内容放大到最大或者最小的时候值是YES 否则NOzooming当正在缩放的时候值是YES 否则NOdecelerating当滚动后 手指放开但还在继续滚动中 此时是YES 其它时候都是NOdecelerationRate设置手指放开后的减速率 ScrollView示例 1 ScrollView示例 2 ScrollView运行结果 选项卡TabHost简介 使用TabHost可以在一个屏幕间进行不同版面的切换TabHost在界面布局中特别常用也是很重要的一种布局方式 使用TabHost可以有效的利用有限的屏幕资源 开发出用户界面更加友好的应用程序 选项卡TabHost元素 1 TabHost是整个Tab的容器 包括两部分 TabWidget和FrameLayout TabWidget就是每个tab的标签 FrameLayout则是tab内容 1 如果我们使用extendsTabAcitivty 如同ListActivity TabHost必须设置为 android id tabhost2 TabWidget必须设置android id为 android id tabs3 FrameLayout需要设置android id为 android id tabcon