从简单的android 登陆应用 ，学习布局,

下面是一个简单的Android登陆，使用TableLayout 表格布局来实现，

 

代码如下:

1. package com.birds.android.login;
3. import android.app.Activity;
4. import android.app.AlertDialog;
5. import android.app.AlertDialog.Builder;
6. import android.content.DialogInterface;
7. import android.os.Bundle;
8. import android.view.View;
9. import android.view.View.OnClickListener;
10. import android.widget.Button;
11. import android.widget.EditText;
13. public class LoginUI extends Activity {
15.     @Override
16.     public void onCreate(Bundle savedInstanceState) {
18.         super.onCreate(savedInstanceState);
19.         setContentView(R.layout.login_layou);
21.         Button yesBtn = (Button) findViewById(R.id.btn1);
22.         yesBtn.setOnClickListener(new ButtonHandler(this));
23.         Button cancelBtn = (Button) findViewById(R.id.btn2);
24.         cancelBtn.setOnClickListener(new ButtonHandler(this));
25.     }
26. }
28. class ButtonHandler implements OnClickListener {
30.     private Activity context;
32.     public ButtonHandler(Activity context) {
33.         this.context = context;
34.     }
36.     @Override
37.     public void onClick(View v) {
39.         EditText text1 = (EditText) context.findViewById(R.id.text1);
40.         EditText text2 = (EditText) context.findViewById(R.id.text2);
41.         if (v.getId() == R.id.btn1) {
42.             Builder alertDialog = new AlertDialog.Builder(context);
43.             alertDialog.setPositiveButton("OK",
44.                     new DialogInterface.OnClickListener() {
45.                         public void onClick(DialogInterface v, int btn) {
46.                             v.cancel();  //  关闭当前的对话框.
47.                         }
48.                     });
49.             alertDialog.setTitle("输入的信息:" + text1.getText() + " 密码;"
50.                     + text2.getText());
51.             alertDialog.show();
52.         } else if (v.getId() == R.id.btn2) {
53.             text1.setText("");
54.             text2.setText("");
55.         }
56.     }
57. }

布局设置，我们使用 xml的方式，如下:

login_layou.xml 

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <TableRow
      android:layout_width="fill_parent"
      android:layout_height="wrap_content">
     <TextView
        android:layout_width="100px"
        android:layout_height="wrap_content"
        android:text="账号名称:"
     />
    <EditText
      android:id="@+id/text1"
     android:layout_width="150px"
     android:layout_height="wrap_content"
        android:text=""
        android:maxLength="15"/>
    </TableRow> 
    
    <TableRow
      android:layout_width="fill_parent"
      android:layout_height="wrap_content">
     
     <TextView
        android:layout_width="100px"
        android:layout_height="wrap_content"
        android:text="帐号密码:"
     />
     <EditText
        android:id="@+id/text2"
     android:layout_width="150px"
     android:layout_height="wrap_content"
     android:password="true"
        android:maxLength="15"/>
   </TableRow>
    
   <TableRow
      android:layout_width="fill_parent"
      android:layout_height="wrap_content">
    <Button
    android:id="@+id/btn1"
 android:layout_width="80px"
 android:layout_height="wrap_content"
 android:text="@string/yes"/> 
    <Button
        android:id="@+id/btn2"
      android:layout_width="80px"
     android:layout_height="wrap_content"
     android:text="@string/cancel" />
   </TableRow>
 </TableLayout>

每个xml都有对应的java 代码方法，看起来xml比代码更为清晰。可以参考google android 文档.非常详细。

<TableRow></TableRow> 默认显示为一行。。

string.xml 如下

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, LoginUI</string>
    <string name="app_name">登陆</string>
    <string name="yes">确定</string>
    <string name="cancel">取消</string>
    <string name="text1">t1</string>
    <string name="text2">t2</string>
    <string name="btn1">btn1</string>
    <string name="btn2">btn2</string>
</resources>

 

 TableLayout 和 RelativeLayout 组合可以 显示 多种不同 的布局效果。RelativeLayout 相对复杂一点。