1. 程式人生 > >05 用xml檔案視覺化設計窗口布局

05 用xml檔案視覺化設計窗口布局

前面一直用程式碼來設計視窗的佈局,每次修改後,只有程式執行時才可看到設計的結果,而且當視窗的控制元件較多時,寫程式碼的方式較為麻煩了。 所以Android裡還提供了用xml檔案,用視覺化的方式來設計窗口布局.

首先還是先用嚮導建立一個”Add No Activity”的專案, 然後選單”File” –> “New” –> “Class”建立一個視窗類:

/* MyActivity.java */
package com.example.jk.myapplication;

import android.app.Activity;
import android.os.Bundle;

public
class MyActivity extends Activity { public void onCreate(Bundle savedInstance) { super.onCreate(savedInstance); } }

接著不要忘了在AndroidManifest.xml檔案裡宣告MyActivity為Activity視窗:

  <activity android:name=".MyActivity">
      <intent-filter>
          <action android:name="android.intent.action.MAIN"
>
</action> <category android:name="android.intent.category.LAUNCHER"></category> </intent-filter> </activity>

然後可以建立一個xml的layout檔案來設計佈局了, 選單”File” –> “New” –> “XML” –> “Layout XML File”, 出現設定xml檔名及頂層的佈局管理器型別就可以了:
這裡寫圖片描述

完成後,就會在專案的”res” –> “layout”專案子目錄裡創建出”layout.xml”, 雙擊此xml檔案,會在右邊出現可拖拉元件的設計介面,如圖下:
這裡寫圖片描述

可以在設計介面上直接拖入Button等可見的View元件. 設計介面有”Design”和”Text”兩種設計方式(在圖中底部), 其中”Design”是直接拉元件的方式, “Text”是用xml語言描述介面的方式. 在”Design”介面上接元件切換到”Text”也可以看到生成的xml程式碼.
如用”Design”設計介面接入了一個Button:

/* layout.xml */

<?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">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button" />
</LinearLayout>

//用xml設計介面其實本質是與直接用程式碼來設計介面, 本質是一樣的,只是xml會自動生成相應的程式碼。

在Activity裡使用xml佈局檔案:
只需要在MyActivity.java檔案的onCreate函式裡: setContentView(R.layout.layout); //其中R表示專案裡的”res”目錄, “R.layout”表示”res”–> “layout”子目錄, 最後一個的”layout”就是表示”layout.xml”檔案了.

上面完成後,程式編譯執行後就可以看到與設計介面一樣的視窗了. 當再需要修改介面時,只需要在layout.xml上修改即可.

雖然可以用拉元件的方式快速設計介面,但用xml程式碼來描述視窗的方式更為常用.
大概用法:

<LinearLayout ...
     描述屬性
     描述屬性 >   //屬性描述部分完成 

     <控制元件型別             
            android:id="@+id/myid"  //每個控制通常設定一個id,以便在程式碼裡訪問此控制,  myid為id名,也可以理解為物件名
        描述屬性  />    //控制元件描述完畢

     <控制元件型別  
        ...
        ... />           


</LinearLayout>  //佈局管理器的作用域到此, 包含的所有控制元件都由佈局管理器管理

如在layout.xml檔案設計介面, 實現4個按鈕分成每兩個按鈕一行, 其中第一行佔視窗的30%高度,剩下的高度由第二行佔用. 而且第一行的兩個按鈕,一個佔40%寬度,另一個佔用60%寬度。第二行的兩個按鈕佔用的寬度都是50%. 每行用一個水平佈局管理器,最後兩個水平佈局管理器由一個垂直佈局管理器來管理.

/* layout.xml */

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


    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3">

        <Button
            android:id="@+id/btn1"
            android:text="btn1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="4"/>

        <Button
            android:id="@+id/btn2"
            android:text="btn2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="6"/>

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="7">

        <Button
            android:id="@+id/btn3"
            android:text="btn3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="5" />

        <Button
            android:id="@+id/btn4"
            android:text="btn4"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="5"/>

    </LinearLayout>


</LinearLayout>

在程式碼裡訪問xml佈局檔案上的元件,是根據在xml檔案裡設計的id來訪問的, “findViewById(R.id.btn1)”就可以得到id為btn1的Button物件. 在程式碼裡只需要宣告控制元件的引用指向物件”Button btn = findViewById(R.id.btn1)”,不用再建立物件.
如使用上面xml建立的4個Button物件:

/* MyActivity.java */

package com.example.jk.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;

public class MyActivity extends Activity implements View.OnClickListener{
    private Button btn1, btn2, btn3, btn4;
    public void onCreate(Bundle savedInstance) {
        super.onCreate(savedInstance);
        setContentView(R.layout.layout); 

        btn1 = findViewById(R.id.btn1);
        btn2 = findViewById(R.id.btn2);
        btn3 = findViewById(R.id.btn3);
        btn4 = findViewById(R.id.btn4);

        btn1.setOnClickListener(this);
        btn2.setOnClickListener(this);
        btn3.setOnClickListener(this);
        btn4.setOnClickListener(this);

    }
    public void onClick(View v) {
        Button btn = (Button)v;
        Log.d("test", btn.getText().toString());
    }
}