前一节中将了贪吃蛇Snake游戏的暂停/继续、穿墙和全屏功能的实现,本文继续分析此示例程序中体现的Android Layout机制。

       1、FrameLayout

       先来看官方文档的定义:FrameLayout是最简单的一个布局对象。它被定制为你屏幕上的一个空白备用区域,之后你可以在其中填充一个单一对象 — 比如,一张你要发布的图片。所有的子元素将会固定在屏幕的左上角;你不能为FrameLayout中的一个子元素指定一个位置。后一个子元素将会直接在前一个子元素之上进行覆盖填充,把它们部份或全部挡住(除非后一个子元素是透明的)。

       有点绕口而且难理解,下面还是通过一个实例来理解吧。我们仿照Snake项目中使用的界面一样,建立一个简单的FrameLayout,其中包含两个Views元素:ImageViewTextView,而后面的TextView还包含在一个RelativeLayout中。

XML/HTML代码
  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent">  
  4.     <ImageView  
  5.         android:layout_width="fill_parent"  
  6.         android:layout_height="fill_parent"    
  7.         android:scaleType="center" android:src="@drawable/img0"/>  
  8. <RelativeLayout  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="fill_parent" >  
  11.         <TextView  
  12.             android:text="Hello Android"  
  13.             android:visibility="visible"  
  14.             android:layout_width="wrap_content"  
  15.             android:layout_height="wrap_content"  
  16.             android:layout_centerInParent="true"  
  17.             android:gravity="center_horizontal"  
  18.             android:textColor="#ffffffff"  
  19.             android:textSize="24sp"/>  
  20.     </RelativeLayout>  
  21. </FrameLayout>  

       效果如下图所示:

FrameLayout、RelativeLayout实例 

       2、UI优化

       Android的tools目录下提供了许多实用工具,这里介绍其中一个用于查看当前UI结构视图的工具hierarchyviewer。打开tools/hierarchyviewer.bat后,查看上面这个示例的UI结构图可得:

hierarchyviewer查看UI结构图

       我们可以很明显的看到由红色线框所包含的结构出现了两个framelayout节点,很明显这两个完全意义相同的节点造成了资源浪费(这里可以提醒大家在开发工程中可以习惯性的通过hierarchyViewer查看当前UI资源的分配情况),那么如何才能解决这种问题呢(就当前例子是如何去掉多余的frameLayout节点)?这时候就要用到<merge />标签来处理类似的问题了。我们将上边xml代码中的framLayout替换成merge:

XML/HTML代码
  1. <merge  xmlns:android="http://schemas.android.com/apk/res/android">  
  2.     <ImageView  
  3.         android:layout_width="fill_parent"  
  4.         android:layout_height="fill_parent"    
  5.         android:scaleType="center" android:src="@drawable/img0"/>  
  6. <RelativeLayout  
  7.         android:layout_width="fill_parent"  
  8.         android:layout_height="fill_parent" >  
  9.         <TextView  
  10.             android:text="Hello Android"  
  11.             android:visibility="visible"  
  12.             android:layout_width="wrap_content"  
  13.             android:layout_height="wrap_content"  
  14.             android:layout_centerInParent="true"  
  15.             android:gravity="center_horizontal"  
  16.             android:textColor="#ffffffff"  
  17.             android:textSize="24sp"/>  
  18.     </RelativeLayout>  
  19. </merge >  

       运行程序后在Emulator中显示的效果是一样的,可是通过hierarchyviewer查看的UI结构是有变化的,当初多余的FrameLayout节点被合并在一起了,或者可以理解为将merge标签中的子集直接加到Activity的FrameLayout跟节点下(这里需要提醒大家注意:所有的Activity视图的根节点都是frameLayout)。如果你所创建的Layout并不是用framLayout作为根节点(而是应用LinerLayout等定义root标签),就不能应用上边的例子通过merge来优化UI结构。

merge优化UI结构后的结构图

       3、RelativeLayout

  RelativeLayout允许子元素指定他们相对于其它元素或父元素的位置(通过ID指定)。因此,你可以以右对齐,或上下,或置于屏幕中央的形式来排列两个元素。元素按顺序排列,因此如果第一个元素在屏幕的中央,那么相对于这个元素的其它元素将以屏幕中央的相对位置来排列。如果使用XML来指定这个layout,在你定义它之前,被关联的元素必须定义。

  解释起来也比较麻烦,不过我做个对比实验可以明白它的用处了,试着把上面例子里的RelativeLayout节点去掉看看,效果如下图所示,可以看到由于FrameLayout的原因,都在左上角靠拢了,而使用了RelativeLayout,则可以让TextView相对于屏幕居中。

FrameLayout实例

       4、Snake的界面分析

       有了上述Layout的基础知识,我们再来看Snake的布局文件就很好理解了,就是一个SnakeView和一个TextView,启动后,后者会覆盖在前者上面。

XML/HTML代码
  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent">  
  4.     <com.example.android.snake.SnakeView  
  5.      android:id="@+id/snake"  
  6.         android:layout_width="fill_parent"  
  7.                 android:layout_height="fill_parent"  
  8.                 tileSize="24"  
  9.                 />  
  10.     <RelativeLayout  
  11.         android:layout_width="fill_parent"  
  12.         android:layout_height="fill_parent" >  
  13.         <TextView  
  14.          android:id="@+id/text"  
  15.             android:text="@string/snake_layout_text_text"  
  16.             android:visibility="visible"  
  17.             android:layout_width="wrap_content"  
  18.             android:layout_height="wrap_content"  
  19.             android:layout_centerInParent="true"  
  20.             android:gravity="center_horizontal"  
  21.             android:textColor="#ff8888ff"  
  22.             android:textSize="24sp"/>  
  23.     </RelativeLayout>  
  24. </FrameLayout>  

       也就是这样的效果:

Snake的界面Layout分析

       那么相应的代码是如何实现这个效果的呢? SnakeView有一个私有变量存放覆盖其上的TextView:

Java代码
  1. private TextView mStatusText;  

       在Snake这个Activity的onCreate方法中,首先将Layout文件中的SnakeView和TextView关联起来:

Java代码
  1. setContentView(R.layout.snake_layout);   
  2. mSnakeView = (SnakeView) findViewById(R.id.snake);   
  3. mSnakeView.setTextView((TextView) findViewById(R.id.text));  

      然后设置SnakeView的状态为Ready:

Java代码
  1. mSnakeView.setMode(SnakeView.READY);  

       这一句代码会调用下述函数:

Java代码
  1. public void setMode(int newMode)    
  2. {   
  3.         int oldMode = mMode;   
  4.         mMode = newMode;   
  5.         if (newMode == RUNNING & oldMode != RUNNING)    
  6.         {//游戏进入“运行”状态,则隐藏文字信息   
  7.             mStatusText.setVisibility(View.INVISIBLE);   
  8.             update();   
  9.             return;   
  10.         }   
  11.         //根据新状态,设置待显示的文字信息   
  12.         Resources res = getContext().getResources();   
  13.         CharSequence str = "";   
  14.         if (newMode == PAUSE)    
  15.         {//新状态为“暂停”   
  16.             str = res.getText(R.string.mode_pause);   
  17.         }   
  18.         if (newMode == READY)    
  19.         {//新状态为“准备开始”   
  20.             str = res.getText(R.string.mode_ready);   
  21.         }   
  22.         if (newMode == LOSE)    
  23.         {//新状态为“游戏失败”   
  24.             str = res.getString(R.string.mode_lose_prefix) + mScore   
  25.                   + res.getString(R.string.mode_lose_suffix);   
  26.         }   
  27.         //设置文字信息并显示   
  28.         mStatusText.setText(str);   
  29.         mStatusText.setVisibility(View.VISIBLE);   
  30. }  

       在mStatusText.setVisibility(View.VISIBLE);这一句后就显示出上面这个游戏起始画面了。

本文发布:Android开发网
本文地址:http://www.jizhuomi.com/android/example/183.html
2012年9月1日
发布:鸡啄米 分类:Android开发实例 浏览: 评论:0