第7章设计界面布局.ppt

《第7章设计界面布局.ppt》由会员分享，可在线阅读，更多相关《第7章设计界面布局.ppt（45页珍藏版）》请在三一办公上搜索。

1、第7章 设计界面布局,本章我们将讲解如何在Android中进行界面布局。通过本章的学习，读者将掌握如何使用Android提供的一些布局类，LinearLayout、TableLayout、FrameLayout、RelativeLayout以及AbsoluteLayout。并且我们将学习一些功能与布局类类似的容器视图。,7.1 创建界面,在Android应用中创建界面通常有两种方法，一种是使用xml创建布局，这在之前的范例程序中经常被使用，也许读者朋友们对其已经比较熟悉了。第二种则是在Java代码中实现，与使用xml文件相比，它更加灵活，更加“动态”，缺点则是会使代码比较混乱，不如使用xml文

2、件那样结构清晰。,7.1.1 使用xml资源创建布局,使用xml资源文件创建界面时，文件位于/res/layout文件夹下。该方法是创建界面最方便也是最常用的方法，在创建时你需要为它赋予一些属性，当然在之后的程序代码中你还可以对其进行修改。,7.1.2 使用代码创建布局,如果你不愿意使用xml来创建布局，或者某些时候，使用xml创建布局反而不方便，这个时候你可以选择在Java代码中完成布局的创建工作。事实上，运行后效果如下图所示：,7.2 使用布局类,Android SDK为我们提供了5个布局类，他们是：线性布局（LinearLayotu）、绝对布局（AbsoluteLayout）、表格布局（

3、TableLayout）、关系布局（RelativeLayout）、框架布局（FrameLayout）。本节将逐一讲解这些类的使用方法和技巧。,7.2.1 使用绝对布局,绝对布局（AbsoluteLayout）视图是指为该布局内的所有子视图指定一个绝对的坐标。言归正传，我们来观察具体的绝对布局的使用方法。1.通过xml资源创建绝对视图运行后，界面显示到效果如图所示：,2.通过代码创建绝对布局在代码中实现动态进行布局会比较麻烦一些，要使用代码实现绝对布局需要以下5个步骤：（1）创建需要显示的组件对象；（2）创建布局参数对象；（3）创建绝对布局对象；（4）将组件对象添加到布局对象中，并赋予其相应的

4、布局参数；（5）使用setContentView()方法将布局显示；,运行代码后在模拟器中我们可以得到如图1所示界面，而在真机测试时得到的界面却如图2所示：图1 图2,7.2.2 使用线性布局,线性布局是开发人员在开发中使用最多的一类布局，甚至在Android新建工程时默认的布局都是LinearLayout。线性布局的作用是将所有的子视图按照横向或者纵向有序地排列。这里不得不提到线性布局特有的一个属性android:orientation，该属性的作用是指定本线性布局下的子视图排列方向：如果设置为“horizontal”则表示水平，方向为从左向右；若设置为“vertical”则表示垂直，方向为

5、从上向下。将多个线性布局嵌套可以完成大部分希望实现的效果。,1.使用xml编写线性布局在一个整体的垂直线性布局中有四个子视图，他们从上到下依次为TextView、LinearLayout、TextView、LinearLayout，接着在子视图的第一个LinearLayout中，从左向右排列了一排ImageView，第二个LinearLayout中，从上到下排列了一列ImageView。如果你愿意，你还可以继续向下层嵌套，当然最好不要嵌套太深的层数，因为这会大大地降低显示效率。其框架结构如图所示：,理解了本段代码的框架结构后我们再运行代码，看看效果是不是和我们希望的一样，效果如图所示：,2.使

6、用代码编写线性布局使用Java代码编写线性布局会比较麻烦，而且他们的层级结构会不显得没有xml代码那么清晰，后期修改代码时，包括改变参数时都会需要更多的工作量。运行代码，效果如图所示：,7.2.3 使用框架布局,框架布局非常简单而搞笑，如果使用层级视图工具（Hierarchy Viewer tool）你会发现所有的布局都是在一个总体的框架布局中。事实上，我们手机的主界面（Home界面）就是使用的框架视图，每个小应用都是一个子视图。1.使用xml文件创建框架视图首先我们准备一张图片，如图所示：,将其指定为在父视图的底部，与此同时他们都通过：android:gravity=center将文字定位在

7、了本视图的中间。将程序运行，我们会看到如下图所示的效果：,2.在Java代码中编写框架视图在Java中编写框架布局的代码与编写线性布局类似，需要使用一些LayoutParams来设置属性，运行以上代码段，最后展示的效果与xml资源文件的布局方法是完全一样的。,7.2.4 使用表格布局,表格视图有些类似于我们平时使用的Excel表格，它将包含的子视图放在一个个单元格内，我们可以控制布局的行数以及列数。使用TableLayout可以很方便地构建计算器、拨号器等使用界面。,1.使用xml文件创建表格布局TableLayout与LinearLayout相似，添加到表格布局中的每个TableRow中的按

8、照添加的先后顺序从上到下一次排列，然后添加到每个TableRow中的子视图按照添加顺序从左至右排列。运行后，显示效果如下图所示：,2.使用Java代码编写表格视图使用Java代码编写表格视图时，需要使用两列参数设置分别是TableLayout.LayoutParams和TableRow.LayoutParams使用时需要注意。,7.2.5 使用关系布局,关系布局可以通过指定视图与其他视图的关系来确定其自身的位置，如位于某视图的上方、下方、左方、右方等，还可以指定它位于父布局的中间，右对齐、左对齐等等。这样可以避免使用多重布局，有效地提高了效率。,接下来，我们一起来完成一个有趣的实例，通过关系布

9、局完成一个经典的太极八卦图，首先我们要准备一些图片，分别表示八卦的各个方位，如组图所示：,接下来让我们通过关系布局将这些杂乱的图片们组装起来吧！1.使用xml代码创建关系布局通过阅读程序中的注释相信大家应该可以独立完成阅读和理解工作，接下来我们就一起来看看运行之后的效果图吧！,接下来让我们总结一下关系布局中需要使用的属性，如表所示：,2.使用Java代码创建关系布局完成了八卦图之后，让我们尝试使用Java代码直接编写界面，并完成一张四神兽图。首先依然准备4张绚丽的图片，如图所示：,接下来让我们一起把这四个神兽按照它们应该守护的方向（东青龙，西白虎，南朱雀，北玄武）组织起来。运行代码，我们会看到

10、如喜爱图所示效果：,7.3 使用其他布局容器,我们还可以使用一些特殊的布局容器来进行屏幕的设计和布局，如使用ListActivity、TabActivity等，本节将讲解如何使用这些特殊的布局容器。,7.3.1 使用TabActivity,拥有Android手机使用经验的读者对于下图肯定不陌生，这是联系人列表的显示方式，也许很多读者都很向往能够写出同样这么“酷”的布局来，本小节就讲解Android中标签页的使用。,使用TabActivity入门非常简单，但要使用好它却需要大家多花一些时间的。标签页中的每一个标签都是一个非常高效的视图容器，它可以由XML预先定义也可以由TabFactory产生。

11、接下来我开始学习使用TabActivity进行界面设计。使用TabActivity需要如下几个步骤：（1）继承TabActivity；（2）获得TabHost对象；（3）实例化布局对象；（4）创建并设置TabSpec对象；（5）向TabHost中添加TabSpec完成标签页的使用；,运行程序后显示如图所示：,7.3.2 自定义TabHost,在自定义TabHost时需要注意，在创建TabHost时需要以下3个步骤：（1）在xml资源文件中创建TabHost节点，并将id设置为tabhost；（2）创建TabWidget子节点，并设置id为tabs；（3）创建FrameLayout子节点，用作显

12、示内容，其id为tabcontent；,在代码中使用TabHost与TabActivyt比较相似，不同的只有开始的两个步骤，其具体步骤如下：（1）使用setContentView()方法显示界面（2）获得TabHost对象并设置（3）创建并设置TabSpec对象（4）向TabHost中添加TabSpec完成标签页的使用,运行程序后，效果显示如图所示：,7.3.3 使用对话框,对话框的功能非常强大，你可以通过对话框的按钮来判断用户的操作，也可以在对话框中添加布局和Widget，以便实现更多的功能。Dialog是所有对话框的基类，在平时我们真正使用的对话框有两种：AlertDialog以及Prog

13、ressDialog。,1.AlertDialog与Activity一样，Dialog也是有生命周期的，我们可以主动调用的两个函数分别是：showDialog（int id）：使Dialog对话框出现dismissDialog(int id)：使Dialog对话框消失,在新建AlertDialog时，我们一般需要设置以下几个重要部分：（1）setTitle（String name）：设置标题，显示在对话框的title位置。（2）setMessage（String message）：设置消息，这个是显示在对话框中的信息。（3）setIcon（int resId）：设置图片，参数是资源的ID。（4

14、）setPositiveButton（String name，OnClickListener listener）：设置确定按钮。（5）setNegativeButton(String name，OnClickListener listener)：设置取消按钮。（6）setNeutral Button（String name，OnClickListener listener）：设置忽略按钮。,运行代码后，我们会看到如图所示效果：,在listener中你可以完成所有你希望进行的工作，这里就简单设置为null。运行后效果如图所示：,如果你希望提供用户多个选择时，可以将AlertDialog.Buil

15、der.setSingleChoiceItems(CharSequence items,int checkedItem,OnClickListener listener)改为：AlertDialog.Builder.setMultiChoiceItems(CharSequence items,boolean checkedItems,OnMultiChoiceClickListener listener)将之运行后得到如图所示的多选框效果：,如果你有自己的数据源需要显示，这个时候我们可以通过自己定义的ListView来显示，并且自己的ListView我们可以更好地进行界面的设计和响应，通过se

16、tView()方法我们可以将自定义的视图显示到Dialog上，运行代码后我们可以得到如图所示效果：,你同样可以自定义多选框，运行后显示效果如图所示：,2.使用ProgressDialog除了AlertDialog外，我们还经常使用ProgressDialog来为用户提供更好地操作体验，比如我们在使用地图服务时搜索地点一般需要很长的时间，而这个时候我们就可以使用进度对话框来提示用户“正在搜索，请稍后”等信息了。运行后效果如图所示：,7.3.4 使用滑动抽屉,在使用Android手机时，我们经常会操作滑动抽屉，实际上滑动抽屉是一种特殊的Widget，不使用时它是隐藏的，需要时可以将之拖出进行操作。

17、使用滑动抽屉时需要如下几个步骤：1.xml部分（1）在xml中使用节点，并设置属性。（2）设置handle部分，即为手柄，可以理解为抽屉的把手（3）设置content部分，这是抽屉的内容，也就是将抽屉拉开时我们看到的界面部分。,2.Java部分在Java部分，你可以不写任何代码，但这样SlidingDrawer的功效无法得到更大程度上的体现。在SlidingDrawer中你可以通过findViewById()方法得到SlidingDrawer的操作对象，然后通过一下三个方法进行事件的监听：（1）监听抽屉被拉开事件SlidingDrawer.setOnDrawerOpenListener(OnD

18、rawerOpenListener onDrawerOpenListener)（2）监听抽屉被关闭事件SlidingDrawer.setOnDrawerCloseListener(OnDrawerCloseListener onDrawerCloseListener)（3）监听抽屉滑动中事件SlidingDrawer.setOnDrawerScrollListener(OnDrawerScrollListener onDrawerScrollListener),运行程序，未打开的抽屉如图1所示，打开着的抽屉如图2所示：图1 图2,当然，在Java代码中我们还需要改变一下使用的背景图片，将箭头从上下改为左右指向。运行后效果如图所示：,7.4 小结,本章讲解了Android中布局的使用，通过本章的学习，读者朋友们可以将之前学习到的资源和组建进行一个有机的结合，更好地进行界面的设计工作。本章的难点是一些特殊的布局容器的使用，如TabActivity，AlertDialog以及SlidingDrawer的使用，这也是本章的重点内容。,