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());
}
}