7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Android SDK

Android用户界面设计:Frame Layouts

Scroll to top
Read Time: 1 min
This post is part of a series called Android User Interface Design.
Android User Interface Design: Table Layouts
Android User Interface Design: Building a ListView Application

Chinese (Simplified) (中文(简体)) translation by Steven Wang (you can also view the original English article)

Frame Layouts是管理Android应用程序界面中控件的最简单的一种布局方式之一。 理解各种布局对安卓应用程序的设计至关重要。 在这篇文章中,你将学会关于Frame Layouts的方方面面,它们将主要用来管理屏幕上单独的和重叠的试图控件。 使用得当的话,Frame Layout会成为许多吸引人的安卓应用程序用户界面的重要布局方式。

什么是Frame Layout?

Frame Layouts是安卓开发者管理视图控件最简单、最高效的一种布局之一。 它们相比其他布局出现次数略少,仅仅是因为它们通常用来展示一个视图(view),或者重叠的视图(views)。 Frame Layout经常被用作容器布局,因为它基本只有一个子视图(child view),或者包含一个其他的布局用来管理几个视图。

提示:事实上,你一定会见到frame layout,它是所有你设计的任何布局的父布局。 如果你打开应用程序的视图层级工具(一个去除你的应用程序布局Bug的有力工具),你会发现你设计的所有布局资源都是在一个父布局中—一个frame layout。

Framelayout非常简单,因此非常高效。 可以在XML布局文件中定义,也可以用Java代码写在应用程序中。 Framelayout的子视图总是在屏幕的左上角开始绘制。 如果多个子视图同时存在,那么他们将按照顺序一个叠加在另一个上进行绘制。 这就是说Framelayout第一个子视图将会在最底部展示,而最后添加的子视图在最上面展示。

让我来看一个简单的例子。 现在我们有一个frame layout,大小是可以控制整个屏幕(也就是说,layout_width和layout_height属性均被设置为match_parent)。 接着,我们添加三个子控件到这个frame layout中。

  • 一个一张湖的图片的ImageView。
  • 一个TextView在屏幕的最上方,用来展示一些文字。
  • 一个TextView在屏幕最底部(用layout_gravity属性让TxetView沉到父布局的底部就行。)

下面这张图片就是这个布局在屏幕上的样子。

Frame Layout Figure 1Frame Layout Figure 1Frame Layout Figure 1

用Frame Layout来定义一个XML布局文件。

最方便也是最易于维护的用来设计应用程序界面的方式就是创建XML布局文件了。 这种方式极大简化了UI设计的过程,将静态地创建和布局用户界面控件以及定义控件属性用XML文件来完成,而不是写大量的代码。

XML布局文件必须存储在project目录层级下的/res/layout中。 让我们看一下在上一节中介绍的那个简单的Frame Layout。 同样,屏幕是一个frame layout,带有三个子视图:一个填满整个屏幕的图像,在这个图像之上绘制了有两个文字控件,每一个都是默认的透明背景。 这个布局文件,命名为/res/layout/framed.xml,在XML中定义如下:

回想一下,在Activity中,onCreate()方法仅需要一行代码就可以在屏幕上加载并展示一个布局文件。 如果布局文件被存储在/res/layout/framed.xml文件中,那这行代码应该像下面这样:

编程定义一个Frame Layout

你也可以通过编程地创建并配置一个frame布局。 这需要用到FrameLayout类(android.widget.FrameLayout)。 你将会在FrameLayout.LayoutParams类中找到针对frame布局的参数。 常用的布局参数(android.view.ViewGroup.LayoutParams),例如ayout_height、layout_width和边距参数(ViewGroup.MarginLayoutParams) 依然适用与FrameLayout对象。
和直接用setContentView()方法加载一个布局文件不同,你必须用Java代码搭建屏幕内容,然后提供一个父布局对象,这个父布局对象包含所有展示子视图的内容控件,就像setContentView()方法那样。 在这种情况下,你的父布局应该是frame布局。
例如,下面的代码展示了怎样用代码写出和前面描述的一样的布局。 具体来说,我们有一个Activity实现了一个FrameLayout,然后在onCreate()方法中放置了一个ImageView控件,之后放置了两个TextView控件。

屏幕显示出来的结果应该和前面图片展示的一模一样。

什么时候使用Frame Layout

你手边有很多强大的布局方式,像Linear布局,Relative布局,Table布局,似乎很容易忘掉Frame布局。 当屏幕仅有很少的控件时(主页面,只有一个画板的游戏页面等等),Frame布局的高效使它成为一个非常好的选择。 有时,其他效率不高的布局可以简化成效率更高的frame布局,但是其他时候,更具体的布局方式是最合适的。 当你像要可以叠加的视图时,Frame布局是最常用的布局选择。

看看相似的控件

FrameLayout相对来说很简单。 因此,大量的其他布局方式和视图控件以它为基础。 例如,ScrollView只是一个带有滚动条的FrameLayout,用于子内容太大以至于不能在布局边界中展示。 所有的主屏幕程序小部件都基于FrameLayout。
所有FrameLayouts的一个突出的优势是它们能将一个前置的图像放在正常的背景中。 这个可以通过XML属性中android:foreground来实现。 确切地说,可以用frame布局置于其他视图之下。

总结

Android应用程序的用户界面是用各种布局方式来定义的,frame布局是其中最简单、最高效的布局类型之一。 frame布局的子控件在布局的左上角开始绘制。 如果frame布局中同时存在多个子视图,它们会依次绘制,最后的子视图在最上面。

关于作者

移动开发者Lauren Darcey和Shane Conder一起撰写过几本Android开发的书籍:一个有深度的编程书籍,名字是 Android Wireless Application Development 和 Sams TeachYourself Android Application Development in 24 Hours. 不写书时,他们在公司进行移动软件的开发,并提供咨询服务。 你可以通过电子邮件联系他们androidwirelessdev+mt@gmail.com,或者博客androidbook.blogspot.com,或者Twitter:@androidwireless。

还需要更多关于开发Android程序的帮助? 查看我们最新的书和资料吧!

Buy Android Wireless Application Development, 2nd Edition Buy Sam's Teach Yourself Android Application Development in 24 Hours Mamlambo code at Code Canyon

关注我们的公众号
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.