Android實例剖析筆記（六）
Android Layout機制
1, FrameLayout
先來看官方文檔的定義：FrameLayout是最簡單的一個布局對象。它被定制為你屏幕上的一個空白備用區域，之后你可以在其中填充一個單一對象 — 比如，一張你要發布的圖片。所有的子元素將會固定在屏幕的左上角；你不能為FrameLayout中的一個子元素指定一個位置。后一個子元素將會直接在前一個子元素之上進行覆蓋填充，把它們部份或全部擋住（除非后一個子元素是透明的）。
有點繞口而且難理解，下面還是通過一個實例來理解吧。我們仿照Snake項目中使用的界面一樣，建立一個簡單的FrameLayout，其中包含兩個Views元素：ImageView和TextView，而后面的TextView還包含在一個RelativeLayout中。
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center" android:src="@drawable/img0"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:text="Hello Android"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textColor="#ffffffff"
android:textSize="24sp"/>
</RelativeLayout>
</FrameLayout>
效果如下圖所示：
2，UI優化
Android的tools目錄下提供了許多實用工具，這里介紹其中一個用于查看當前UI結構視圖的工具hierarchyviewer。打開tools/hierarchyviewer.bat后，查看上面這個示例的UI結構圖可得：
我們可以很明顯的看到由紅色線框所包含的結構出現了兩個framelayout節點，很明顯這兩個完全意義相同的節點造成了資源浪費（這里可以提醒大家在開發工程中可以習慣性的通過hierarchyViewer查看當前UI資源的分配情況），那么如何才能解決這種問題呢（就當前例子是如何去掉多余的frameLayout節點）？這時候就要用到<merge />標簽來處理類似的問題了。我們將上邊xml代碼中的framLayout替換成merge：
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center" android:src="@drawable/img0"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:text="Hello Android"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textColor="#ffffffff"
android:textSize="24sp"/>
</RelativeLayout>
</merge >
運行程序后在Emulator中顯示的效果是一樣的，可是通過hierarchyviewer查看的UI結構是有變化的，當初多余的FrameLayout節點被合并在一起了，或者可以理解為將merge標簽中的子集直接加到Activity的FrameLayout跟節點下（這里需要提醒大家注意：所有的Activity視圖的根節點都是frameLayout）。如果你所創建的Layout并不是用framLayout作為根節點（而是應用LinerLayout等定義root標簽），就不能應用上邊的例子通過merge來優化UI結構。
3，RelativeLayout
RelativeLayout允許子元素指定他們相對于其它元素或父元素的位置（通過ID指定）。因此，你可以以右對齊，或上下，或置于屏幕中央的形式來排列兩個元素。元素按順序排列，因此如果第一個元素在屏幕的中央，那么相對于這個元素的其它元素將以屏幕中央的相對位置來排列。如果使用XML來指定這個layout，在你定義它之前，被關聯的元素必須定義。
解釋起來也比較麻煩，不過我做個對比實驗可以明白它的用處了，試著把上面例子里的RelativeLayout節點去掉看看，效果如下圖所示，可以看到由于FrameLayout的原因，都在左上角靠攏了，而使用了RelativeLayout，則可以讓TextView相對于屏幕居中。
4，Snake的界面分析
有了上述Layout的基礎知識，我們再來看Snake的布局文件就很好理解了，就是一個SnakeView和一個TextView,啟動后，后者會覆蓋在前者上面。
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.example.android.snake.SnakeView
android:id="@+id/snake"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tileSize="24"
/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="@+id/text"
android:text="@string/snake_layout_text_text"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textColor="#ff8888ff"
android:textSize="24sp"/>
</RelativeLayout>
</FrameLayout>
也就是這樣的效果：
那么相應的代碼是如何實現這個效果的呢？ SnakeView有一個私有變量存放覆蓋其上的TextView：
在Snake這個activity的onCreate方法中，首先將Layout文件中的SnakeView和TextView關聯起來：
mSnakeView = (SnakeView) findViewById(R.id.snake);
mSnakeView.setTextView((TextView) findViewById(R.id.text));
然后設置SnakeView的狀態為Ready
這一句代碼會調用下述函數：
{
int oldMode = mMode;
mMode = newMode;
if (newMode == RUNNING & oldMode != RUNNING)
{//游戲進入“運行”狀態，則隱藏文字信息
mStatusText.setVisibility(View.INVISIBLE);
update();
return;
}
//根據新狀態，設置待顯示的文字信息
Resources res = getContext().getResources();
CharSequence str = "";
if (newMode == PAUSE)
{//新狀態為“暫停”
str = res.getText(R.string.mode_pause);
}
if (newMode == READY)
{//新狀態為“準備開始”
str = res.getText(R.string.mode_ready);
}
if (newMode == LOSE)
{//新狀態為“游戲失敗”
str = res.getString(R.string.mode_lose_prefix) + mScore
+ res.getString(R.string.mode_lose_suffix);
}
//設置文字信息并顯示
mStatusText.setText(str);
mStatusText.setVisibility(View.VISIBLE);
}
在mStatusText.setVisibility(View.VISIBLE);這一句后就顯示出上面這個游戲起始畫面了。
留言列表
