《Monkey Android》第8課FrameLayout、GridLayout

轉發請註明出處：
安卓猴的專欄（http://blog.csdn.net/androidmonkey）
安卓猴的微博（@安卓猴）

---

通過本節課可以學習到的內容：

• FrameLayout的用法

• GridLayout的用法

---

實例代碼:

運行效果參見本課程示例App：安卓猴Demos

github地址：https://github.com/git0pen/MonkeyAndroid

---

FrameLayout

幀佈局，在這種佈局下，每個添加的子控件都被放在佈局的左上角，並覆蓋在前一個子控件的上層；此外，FrameLayout中的子控件的位置不能被指定。

GridLayout

自Android4.0版本（API level 14）後，新增的網格佈局。

注意：
如果要達到網格的效果，推薦使用LinearLayout來實現，因爲使用GridLayout會產生如下問題：

• 不能同時在(x,y)軸方向上進行控件的對齊；
• 當多層佈局嵌套的時候會出現性能問題；
• 不能穩定地支持一些支持自由編輯佈局的工具。

計算器界面

用GridLayout和Button模仿了一個計算器的按鍵界面。

佈局源碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  >

  <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    >

    <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="北京"
      android:textColor="#898989"
      android:textSize="18sp"
      />

    <TextView
      android:id="@+id/textView2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="上海"
      android:textColor="#108939"
      android:textSize="22sp"
      />

    <TextView
      android:id="@+id/textView3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="廣州"
      android:textColor="#103339"
      android:textSize="26sp"
      />

    <TextView
      android:id="@+id/textView4"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="南京"
      android:textColor="#efec1c"
      android:textSize="26sp"
      />

    <TextView
      android:id="@+id/textView5"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="東莞"
      android:textColor="#ff5e00"
      android:textSize="30sp"
      />

    <TextView
      android:id="@+id/textView6"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="深圳"
      android:textColor="#ae00ff"
      android:textSize="36sp"
      />
  </FrameLayout>

  <GridLayout
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:layout_weight="2"
    android:columnCount="4"
    android:rowCount="6"
    >

    <Button
      android:id="@+id/button3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="0"
      android:layout_row="0"
      android:text="C"
      />

    <Button
      android:id="@+id/button2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="1"
      android:layout_row="0"
      android:text="DEL"
      />

    <Button
      android:id="@+id/button4"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="2"
      android:layout_row="0"
      android:text="/"
      />

    <Button
      android:id="@+id/button5"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="0"
      android:layout_row="1"
      android:text="7"
      />

    <Button
      android:id="@+id/button6"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="1"
      android:layout_row="1"
      android:text="8"
      />

    <Button
      android:id="@+id/button7"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="2"
      android:layout_row="1"
      android:text="9"
      />

    <Button
      android:id="@+id/button12"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="3"
      android:layout_row="1"
      android:text="-"
      />

    <Button
      android:id="@+id/button8"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="0"
      android:layout_row="2"
      android:text="4"
      />

    <Button
      android:id="@+id/button9"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="1"
      android:layout_row="2"
      android:text="5"
      />

    <Button
      android:id="@+id/button10"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="2"
      android:layout_row="2"
      android:text="6"
      />

    <Button
      android:id="@+id/button11"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="3"
      android:layout_row="0"
      android:text="*"
      />

    <Button
      android:id="@+id/button13"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="3"
      android:layout_row="2"
      android:text="+"
      />

    <Button
      android:id="@+id/button15"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="0"
      android:layout_row="3"
      android:text="1"
      />

    <Button
      android:id="@+id/button16"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="1"
      android:layout_row="3"
      android:text="2"
      />

    <Button
      android:id="@+id/button17"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="2"
      android:layout_row="3"
      android:text="3"
      />

    <Button
      android:id="@+id/button14"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="3"
      android:layout_gravity="fill_vertical"
      android:layout_row="3"
      android:layout_rowSpan="2"
      android:text="="
      />

    <Button
      android:id="@+id/button18"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="0"
      android:layout_columnSpan="2"
      android:layout_gravity="fill_horizontal"
      android:layout_row="4"
      android:text="0"
      />

    <Button
      android:id="@+id/button19"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="2"
      android:layout_row="4"
      android:text="."
      />

    <TextView
      android:id="@+id/textView7"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_column="0"
      android:layout_columnSpan="4"
      android:layout_gravity="fill_horizontal"
      android:layout_row="5"
      android:gravity="center"
      android:text="計算器"
      android:textColor="#000000"
      android:textSize="38sp"
      />
  </GridLayout>

</LinearLayout>

下課

這一節課，我們學習了FrameLayout和GridLayout，它們的使用也需要很多技巧。此外，我們要在平時練習的時候多多敲代碼，這樣才能熟能生巧。

到這裏，所有佈局的知識都學習完畢了。接下來，我們就要一起學習各種繽紛的控件了！

關注我，我們一起進步

安卓猴的微博（@安卓猴）

安卓猴的github（@git0pen）