【Android】利用表格版面配置，Android中xml檔案與java的互動製作登入介面

標籤：android   布局   登入   控制項   安卓   

登入介面是圖形編程、網頁編程的一個經典而又基礎的程式。

在安卓中，一個基本登入介面：

點擊取消按鈕就關閉這個程式，點擊登入按鈕則顯示使用者輸入的使用者名稱與密碼。

一、基本布局

這個程式利用到安卓中的表格布局。

先開啟res/values/strings.xml中定義幾個字串。之所以不直接把字串直接寫在activity_main.xml的組件中，是因為免得Eclipse出現警告。這個檔案的代碼如下：

<?xml version="1.0" encoding="utf-8"?><resources>    <string name="app_name">登入介面</string>    <string name="action_settings">Settings</string>    <string name="textview1">使用者名稱</string>    <string name="textview2">密碼</string>    <string name="button1">登入</string>    <string name="button2">取消</string></resources>

之後，在res/layout/activity_main.xml中刪除所有代碼，也就是刪除一建立工程就內建的處於相對布局之下的Textview組件的Helloworld標籤文本。

寫入我們用表格布局的登入框。

先定義一個表格布局TableLayout，整個表格布局的寬度、高度都是鋪滿螢幕，佔據整個main_activity。這在《【Android】利用Java代碼布局，按鈕添加點擊事件》（點擊開啟連結）中已經說過了。

之後，設定其gravity屬性也只能使其豎直置中而已，TableLayout不會自己水平置中的。真正使其水平置中的是每一行的TableRow組件中的android:gravity="center_horizontal"。

這個表格組件其實與HTML中的table標籤非常相似，table-tr。只是其沒有td而已。

你在一個TableRow中定義多少個組件，它就給你多少個td。

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center" >    <!-- 第一行 -->    <TableRow        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center_horizontal" >        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="@string/textview1"            android:textSize="24sp" />        <EditText            android:id="@+id/edittext1"            android:layout_width="200dp"            android:layout_height="wrap_content"            android:inputType="text"            android:textSize="24sp" />    </TableRow>    <!-- 第二行 -->    <TableRow        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center_horizontal" >        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="@string/textview2"            android:textSize="24sp" />        <EditText            android:id="@+id/edittext2"            android:layout_width="200dp"            android:layout_height="wrap_content"            android:inputType="textPassword"            android:textSize="24sp" />    </TableRow>    <!-- 第三行 -->    <TableRow        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center_horizontal" >        <Button            android:id="@+id/button1"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="@string/button1" />        <Button            android:id="@+id/button2"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="@string/button2" />    </TableRow></TableLayout>

在第一行中現在一個textview的標籤文本，寬度高度皆是包裹住文本就OK，裡面的文字大小為24sp。sp，scaled pixels，放大像素。主要用於字型顯示。根據google的建議，TextView的字型大小最好使用sp做單位

之後是一個編輯框，寬度固定200dp。這樣才能撐大表格布局中的單元格。以免輸入框太小，讓使用者太蛋疼。dp，device independent pixels，裝置獨立像素，不同裝置有不同的顯示效果，這個和裝置硬體有關，一般我們為了支援WVGA、HVGA和QVGA推薦使用這個，不依賴像素。然後這個編輯框輸入方式是文字框，給一個id=edittext1給他，一會兒要到java檔案中擷取其輸入的值，這個根本就是跟javascript是一個道理。

接下去的第二行和第一行沒有什麼區別，除了編輯框的id變成了edittext2，輸入方式是密碼框以外，沒有任何區別。

這裡靜態標籤文本textview因為我們一會兒在java檔案中不控制它，因為不給它設定id。

最後一行是兩個按鈕，設定好相應的id。一會兒在java檔案中給它們都建立事件。

二、MainActivity.java

接下去就是建立兩個按鈕的點擊事件。在MainActivity.java的代碼中，與struts2一樣，先要在整個方法中聲明你要操作的變數，也就是按鈕1、2，編輯框1、2，當然那些什麼煩人的getter與setter就不需要了。這裡是猶如Javascript中那句document.getElementbyId("組件id")一樣，安卓是通過(強制類型轉換)findViewById(R.id.組件id)，讓你在xml設定的組件與java檔案聯絡起來的。

package com.example.xml_java_view;import android.os.Bundle;import android.app.Activity;import android.view.Menu;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.EditText;import android.widget.Toast;public class MainActivity extends Activity {private Button button1;private Button button2;private EditText edittext1;private EditText edittext2;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);button1 = (Button) findViewById(R.id.button1);button2 = (Button) findViewById(R.id.button2);edittext1 = (EditText) findViewById(R.id.edittext1);edittext2 = (EditText) findViewById(R.id.edittext2);button1.setOnClickListener(new OnClickListener() {// 為button1添加點擊事件@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this,"使用者名稱：" + edittext1.getText() + "，密碼："+ edittext2.getText(), Toast.LENGTH_LONG).show();//漸層消失的訊息提示}});button2.setOnClickListener(new OnClickListener() {// 為button2添加點擊事件@Overridepublic void onClick(View v) {System.exit(0);//退出程式}});}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}}

“登入”按鈕的點擊，則顯示Toast組件，也就是那個顯示後會自動消失的訊息提示組件。

如上所示的方法搞出這個Toast組件，關鍵makeText中的第二個參數，設定了顯示的文本。

在通過(強制類型轉換)findViewById(R.id.組件id)拿到在xml檔案中設定的edittext1與edittext2兩個組件的文本之後，直接現實出來。

至於取消按鈕，退出程式的事件，就是在java中的System.exit(0)。

至此，整個登入介面的app做完。

【Android】利用表格版面配置，Android中xml檔案與java的互動製作登入介面