Android用戶界面程序設計示例

 

[例1]按鈕和Toast彈出對話框    1

[例2] TextView文本框 （1）    3

[例3]TextView文本框 （2）    4

[例4]編輯框EditText    4

[例5]單選RadioButton    6

[例6]Toast的用法簡介    8

[例7]多選checkbox    12

[例8]菜單Menu    14

[例9]Dialog對話框    16

[例10]圖片視圖ImageView    19

[例11]圖片按鈕ImageButton    21

界面布局    24

[例12]垂直線性布局    24

[例13]水平線性布局    25

[例14]相對布局    26

絕對布局    27

[例15]表單布局    27

[例16]切換卡(TabWidget)         31

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[例1]按鈕和Toast彈出對話框

1、設計界面如圖所示：

2、布局文件：

 

    <TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

/>

<Button

android:id="@+id/ok"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="OK"/>

 

3、Activity界面程序：

 

public class Activity01 extends Activity {

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        // 獲得Button對象

        Button button_ok = (Button) findViewById(R.id.ok);

        // 設置Button控件監聽器

        button_ok.setOnClickListener(new Button.OnClickListener() {

            public void onClick(View v) {

                // 這里處理事件

                //DisplayToast("點擊了OK按鈕");

Toast.makeText(this, ("點擊了OK按鈕", Toast.LENGTH_SHORT).show();

            }

        });

    }

 

    public void DisplayToast(String str) {

        Toast.makeText(this, str, Toast.LENGTH_SHORT).show();

    }

 

 

    /* 按鍵按下所觸發的事件 */

    public boolean onKeyDown(int keyCode, KeyEvent event) {

        switch (keyCode) {

        case KeyEvent.KEYCODE_DPAD_CENTER:

            DisplayToast("按下：中鍵");

            break;

        case KeyEvent.KEYCODE_DPAD_UP:

            DisplayToast("按下：上方向鍵");

            break;

        case KeyEvent.KEYCODE_DPAD_DOWN:

            DisplayToast("按下：下方向鍵");

            break;

        case KeyEvent.KEYCODE_DPAD_LEFT:

            DisplayToast("按下：左方向鍵");

            break;

        case KeyEvent.KEYCODE_DPAD_RIGHT:

            DisplayToast("按下：右方向鍵");

            break;

        }

        return super.onKeyDown(keyCode, event);

    }

 

    /* 按鍵彈起所觸發的事件 */

    public boolean onKeyUp(int keyCode, KeyEvent event) {

        switch (keyCode) {

        case KeyEvent.KEYCODE_DPAD_CENTER:

            DisplayToast("彈起：中鍵");

            break;

        case KeyEvent.KEYCODE_DPAD_UP:

            DisplayToast("彈起：上方向鍵");

            break;

        case KeyEvent.KEYCODE_DPAD_DOWN:

            DisplayToast("彈起：下方向鍵");

            break;

        case KeyEvent.KEYCODE_DPAD_LEFT:

            DisplayToast("彈起：左方向鍵");

            break;

        case KeyEvent.KEYCODE_DPAD_RIGHT:

            DisplayToast("彈起：右方向鍵");

            break;

        }

 

        return super.onKeyUp(keyCode, event);

    }

 

[例2]TextView（1）

1、設計界面如圖所示：

 

2、布局文件：

    <TextView

android:id="@+id/textview"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

/>

 

 

3、Activity界面程序的核心語句：

 

        textview = (TextView)this.findViewById(R.id.textview);

        String string = "TextView示例，wangzhiguo";

        /* 設置文本的顏色 */

        textview.setTextColor(Color.RED);

        /* 設置字體大小 */

        textview.setTextSize(20);

        /* 設置文字背景 */

        textview.setBackgroundColor(Color.BLUE);

        /* 設置TextView顯示的文字 */

    textview.setText(string);

 

[例3]TextView（2）

1. 設計界面 （略）

 

2、布局文件：

    <TextView

android:id="@+id/textview"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

android:background="#FFFFFF"

android:textColor="#000000"

android:textSize="20px"

/>

 

其他一些屬性

android:textColor="#ff0000"

android:textSize="24sp"

android:textStyle="bold"

 

3、Activity界面程序的核心語句：

setContentView(R.layout.main);//設置內容顯示的xml布局文件   

TextView textView=(TextView)findViewById(R.id.text_view);//取得TextView組件   

textView.setTextColor(Color.RED);//設置成紅色   

textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 24f);//設置成24sp   

textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));//加粗   

 

android:autoLink="web"  

android:autoLink="phone"

android:autoLink="all"

實現跑馬燈效果

1. <TextView    
2.     android:id="@+id/text_view"  
3.     android:autoLink="all"  
4.     android:layout_width="fill_parent"    
5.     android:layout_height="wrap_content"  
6.     android:text="@string/hello"  
7.     android:ellipsize="marquee"    
8.     android:focusable="true"    
9.     android:marqueeRepeatLimit="marquee_forever"    
10.     android:focusableInTouchMode="true"    
11. android:singleLine="true"
12.     android:scrollHorizontally="true"/>  
13. </LinearLayout>  

    

 

[例4]編輯框EditText

1、設計界面如圖所示：

 

2、布局文件：

    <string name="hello">文本框中內容是</string>

<string name="message">請輸入賬號</string>

<string name="app_name">EditText_wangzhiguo</string>

 

    <TextView

    android:id="@+id/TextView01"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

/>

     <EditText

     android:id="@+id/EditText01"

     android:layout_width="fill_parent"

     android:layout_height="wrap_content"

     android:textSize="18sp"

     android:layout_x="29px"

     android:hint="@string/message"

     android:layout_y="33px"

     />

 

 

3、Activity界面程序的核心語句：

 

super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        m_TextView = (TextView) findViewById(R.id.TextView01);

        m_EditText = (EditText) findViewById(R.id.EditText01);

        m_TextView.setTextSize(20);

        /**

         * 設置當m_EditText中為空時提示的內容 在XML中同樣可以實現：android:hint="請輸入賬號"

         */

        // m_EditText.setHint("請輸入賬號");

 

        /* 設置EditText事件監聽 */

        m_EditText.setOnKeyListener(new EditText.OnKeyListener() {

            @Override

            public boolean onKey(View arg0, int arg1, KeyEvent arg2) {

                // 得到文字，將其顯示到TextView中     m_TextView.setText(Activity01.this.getString(R.string.hello) +

m_EditText.getText().toString());

     return false;

    }

});

 

補充：關於EditText的一些細節操作

android:hint="請輸入用戶名..." 提示屬性

 android:textColorHint="#238745" 更改提示顏色

android:enabled="false" 不可編輯

android:lines="10" 通過設定行高，實現文本域功能

android:maxLength="40"  最大內容長度

android:password="true" 要求輸入密碼

android:phoneNumber="true" 只能輸入電話號碼

droid:numeric="signed"

android:inputType="date" 指定輸入類型

android:imeOptions="actionSearch" Enter鍵圖標設置

1. actionUnspecified  未指定，對應常量EditorInfo.IME_ACTION_UNSPECIFIED.效果：
2. actionNone 沒有動作,對應常量EditorInfo.IME_ACTION_NONE 效果：
3. actionGo 去往，對應常量EditorInfo.IME_ACTION_GO 效果：
4. actionSearch 搜索，對應常量EditorInfo.IME_ACTION_SEARCH 效果：
5. actionSend 發送，對應常量EditorInfo.IME_ACTION_SEND 效果：
6. actionNext 下一個，對應常量EditorInfo.IME_ACTION_NEXT 效果：
7. actionDone 完成，對應常量EditorInfo.IME_ACTION_DONE 效果：

課堂練習

作業提示  

//監聽EditText文本的回車鍵   

 editText.setOnEditorActionListener(new OnEditorActionListener() {

            @Override  

 public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {   

      Toast.makeText(HelloEditText.this, String.valueOf(actionId), Toast.LENGTH_SHORT).show();   

       return false;   

     }   

  });   

  //獲取EditText文本  

public void onClick(View v) {   

             Toast.makeText(HelloEditText.this, editText.getText().toString(), Toast.LENGTH_SHORT).show();   

Button all=(Button)findViewById(R.id.btn_all);   

   all.setOnClickListener(new OnClickListener() {   

            @Override  

          public void onClick(View v) {   

            editText.selectAll();   

         }   

    });   

//讓EditText全選   

 Button all=(Button)findViewById(R.id.btn_all);   

    all.setOnClickListener(new OnClickListener() {   

        @Override  

      public void onClick(View v) {   

             editText.selectAll();   

       }   

    });   

//從第2個字符開始選擇EditText文本

public void onClick(View v) {   

        Editable editable=editText.getText();   

        Selection.setSelection(editable, 1,editable.length());   

      }   

public void onClick(View v) {   

  int start=editText.getSelectionStart();   

  int end=editText.getSelectionEnd();   

  CharSequence selectText=editText.getText().subSequence(start, end);   

    oast.makeText(HelloEditText.this, selectText, Toast.LENGTH_SHORT).show();   

      }   

/**  

     * 交換兩個變量的值  

     * @param start 變量初值  

     * @param end 變量終值  

     */  

    protected void switchIndex(int start, int end) {   

        int temp=start;   

        start=end;   

        end=temp;   

    }   

 

 

[例5]單選RadioButton

1、設計界面如圖所示：

 

 

2、布局文件：

<resources>

<string name="hello">Android底層是基於什么操作系統？</string>

<string name="app_name">單選RadioButton_wangzhiguo</string>

<string name="RadioButton1">Windows</string>

<string name="RadioButton2">Linux</string>

<string name="RadioButton3">Moc os</string>

<string name="RadioButton4">Java</string>

</resources>

 

    <TextView

    android:id="@+id/TextView01"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

/>

<RadioGroup

android:id="@+id/RadioGroup01"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

android:layout_x="3px"

android:layout_y="54px"

>

<RadioButton

android:id="@+id/RadioButton1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/RadioButton1"

/>

<RadioButton

android:id="@+id/RadioButton2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/RadioButton2"

/>

<RadioButton

android:id="@+id/RadioButton3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/RadioButton3"

/>

<RadioButton

android:id="@+id/RadioButton4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/RadioButton4"

/>

</RadioGroup>

 

 

 

3、Activity界面程序的核心語句：

    /**

         * 獲得TextView對象 獲得RadioGroup對象 獲得4個RadioButton對象

         */

        m_TextView = (TextView) findViewById(R.id.TextView01);

        m_RadioGroup = (RadioGroup) findViewById(R.id.RadioGroup01);

        m_Radio1 = (RadioButton) findViewById(R.id.RadioButton1);

        m_Radio2 = (RadioButton) findViewById(R.id.RadioButton2);

        m_Radio3 = (RadioButton) findViewById(R.id.RadioButton3);

        m_Radio4 = (RadioButton) findViewById(R.id.RadioButton4);

 

        /* 設置事件監聽 */

        m_RadioGroup

                .setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

        @Override

    public void onCheckedChanged(RadioGroup group, int checkedId) {

            // TODO Auto-generated method stub

        if (checkedId == m_Radio2.getId()) {

            DisplayToast("正確答案：" + m_Radio2.getText()

                        + "，恭喜你，回答正確！");

            } else {

                     DisplayToast("請注意，回答錯誤！");

                    }

            }

        });

    }

    /* 顯示Toast */

    public void DisplayToast(String str) {

        Toast toast = Toast.makeText(this, str, Toast.LENGTH_LONG);

        // 設置toast顯示的位置

        toast.setGravity(Gravity.TOP, 0, 220);

        // 顯示該Toast

        toast.show();

}

 

[例6]Toast的用法簡介

[例6_1] 彈出式提示框的默認樣式

1. 設計界面如圖所示：

2、核心語句：

Toast.makeText(getApplicationContext(), "默認Toast樣式",
     Toast.LENGTH_SHORT).show();

 

 [例6_2] 自定義提示框顯示位置

1. 設計界面如圖所示：

2、核心語句：

toast = Toast.makeText(getApplicationContext(),
     "自定義位置Toast", Toast.LENGTH_LONG);
   toast.setGravity(Gravity.CENTER, 0, 0);
   toast.show();

   

[例6_3]帶圖片提示框效果

1. 設計界面如圖所示：

 

 2、核心語句：

toast = Toast.makeText(getApplicationContext(),
     "帶圖片的Toast", Toast.LENGTH_LONG);
   toast.setGravity(Gravity.CENTER, 0, 0);
   LinearLayout toastView = (LinearLayout) toast.getView();
   ImageView imageCodeProject = new ImageView(getApplicationContext());
   imageCodeProject.setImageResource(R.drawable.icon);
   toastView.addView(imageCodeProject, 0);
   toast.show();

 [例6_4]帶圖片的自定義提示框效果

1、設計界面如圖所示：

 

2、核心語句：

LayoutInflater inflater = getLayoutInflater();
   View layout = inflater.inflate(R.layout.custom,
     (ViewGroup) findViewById(R.id.llToast));
   ImageView image = (ImageView) layout
     .findViewById(R.id.tvImageToast);
   image.setImageResource(R.drawable.icon);
   TextView title = (TextView) layout.findViewById(R.id.tvTitleToast);
   title.setText("Attention");
   TextView text = (TextView) layout.findViewById(R.id.tvTextToast);
   text.setText("完全自定義Toast");
   toast = new Toast(getApplicationContext());
   toast.setGravity(Gravity.RIGHT | Gravity.TOP, 12, 40);
   toast.setDuration(Toast.LENGTH_LONG);
   toast.setView(layout);
   toast.show();

[例6_5] 其他線程

1、設計界面如圖所示：

1. 核心語句：

new Thread(new Runnable() {
     public void run() {
      showToast();
     }
   }).start();

[例7]多選checkbox

1、設計界面如圖所示：

 

2、布局文件：

<string name="hello">調查：你喜歡Android的原因？</string>

<string name="app_name">CheckBox_wangzhiguo</string>

<string name="CheckBox1">無界限的應用程序</string>

<string name="CheckBox2">應用程序是在平等的條件下創建的</string>

<string name="CheckBox3">應用程序可以輕松地嵌入網絡</string>

<string name="CheckBox4">應用程序可以並行運行</string>

 

<TextView

    android:id="@+id/TextView1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

/>

<CheckBox

android:id="@+id/CheckBox1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/CheckBox1"

>

</CheckBox>

<CheckBox

android:id="@+id/CheckBox4"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/CheckBox4"

>

</CheckBox>

<Button

android:id="@+id/button1"

 

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="提交"

>

</Button>

 

 

 

3、核心語句：

m_CheckBox1.setOnCheckedChangeListener(new CheckBox.OnCheckedChangeListener() {

                    @Override

            public void onCheckedChanged(CompoundButton buttonView,

                boolean isChecked) {

                if (m_CheckBox1.isChecked()) {

                    DisplayToast("你選擇了：" + m_CheckBox1.getText());

                    }

                }

        });

 

        m_Button1.setOnClickListener(new Button.OnClickListener() {

            public void onClick(View v) {

                int num = 0;

                if (m_CheckBox1.isChecked()) {

                    num++;

                }

                if (m_CheckBox2.isChecked()) {

                    num++;

                }

                if (m_CheckBox3.isChecked()) {

                    num++;

                }

                if (m_CheckBox4.isChecked()) {

                    num++;

                }

                DisplayToast("謝謝參與！你一共選擇了" + num + "項！");

            }

        });

 

[例8] 菜單Menu

1、設計界面如圖所示：

 

 

2、布局文件：

<string name="hello">主界面,點擊關於會跳到另一個界面!（Activity01）</string>

<string name="hello2">關於\nAndroid Menu使用范例！（Activity02）</string>

<string name="app_name">Menu_wangzhiguo</string>

    <string name="ok">切換Activity</string>

    <string name="back">返回</string>

 

創建menu文件夾，其中放入menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@+id/about"

android:title="關於" />

<item android:id="@+id/exit"

android:title="退出" />

</menu>

 

創建兩個main.xml，兩個activity，並且在AndroidManifest.xml中加入

<activity android:name=".Activity02" ></activity>

 

3、Activity界面程序的核心語句：

啟用菜單

/* 創建menu */

    public boolean onCreateOptionsMenu(Menu menu) {

        MenuInflater inflater = getMenuInflater();

        // 設置menu界面為res/menu/menu.xml

        inflater.inflate(R.menu.menu, menu);

        return true;

    }

 

    /* 處理菜單事件 */

    public boolean onOptionsItemSelected(MenuItem item) {

        // 得到當前選中的MenuItem的ID,

        int item_id = item.getItemId();

        switch (item_id) {

        case R.id.about:

            /* 新建一個Intent對象 */

            Intent intent = new Intent();

            /* 指定intent要啟動的類 */

            intent.setClass(Activity01.this, Activity02.class);

            /* 啟動一個新的Activity */

            startActivity(intent);

            /* 關閉當前的Activity */

            Activity01.this.finish();

            break;

        case R.id.exit:

            Activity01.this.finish();

            break;

        }

        return true;

    }

啟用菜單的另外一種方式

    public boolean onCreateOptionsMenu(Menu menu) {

        // 為menu添加內容

        menu.add(0, 0, 0, R.string.ok);

        menu.add(0, 1, 1, R.string.back);

        return true;

    }

 

 

 

 

[例9] Dialog對話框

1、設計界面如圖所示：

 

 

2、核心語句：

    Dialog dialog = new AlertDialog.Builder(this).

            setTitle("exit").setMessage("你確定退出程序嗎").setNegativeButton("取消", new DialogInterface.OnClickListener(){

                    @Override

                    public void onClick(DialogInterface dialog, int which)

//                        Acitivity01.this.finish();

                        Acitivity01.this.loginDialog().show();

                        

                    }}

            ).setPositiveButton("ok", new DialogInterface.OnClickListener(){

                    @Override

                    public void onClick(DialogInterface dialog, int which) {

                        pDialog = ProgressDialog.show(Acitivity01.this, "請稍等", "您正在登陸", true);

                        new Thread(){

                            public void run() {

                                try {

                                    Thread.sleep(3000);

                                } catch (InterruptedException e) {

                                    // TODO Auto-generated catch block

                                    e.printStackTrace();

                                }

                                pDialog.dismiss();

                            };

                        }.start();

                        Acitivity01.this.finish();

                    }}).create();

        dialog.show();

 

public Dialog loginDialog(){

    LayoutInflater factory = LayoutInflater.from(Acitivity01.this);

    View dialogView = factory.inflate(R.layout.dialog, null);

    Dialog dialog = null;

    AlertDialog.Builder builder = new AlertDialog.Builder(Acitivity01.this);

    builder.setTitle("this is a login view");

    builder.setView(dialogView);

    builder.setPositiveButton("ok", null);

    builder.setNegativeButton("cancel", null);

    dialog = builder.create();

    return dialog;

}

 

[例10] 圖片視圖ImageView

1、設計界面如圖所示：

 

2、布局文件：

<ImageView

    android:id="@+id/ImageView01"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    >

</ImageView>

<TextView

    android:id="@+id/TextView01"

    android:layout_below="@id/ImageView01"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

>

 

3、核心語句：

// 獲得ImageView的對象

        imageview = (ImageView) this.findViewById(R.id.ImageView01);

        textview = (TextView) this.findViewById(R.id.TextView01);

 

        // 設置imageview的圖片資源。同樣可以再xml布局中像下面這樣寫

        // android:src="@drawable/logo"

        imageview.setImageResource(R.drawable.logo);

 

        // 設置imageview的Alpha值，Alpha值表示透明度，如：全透明，半透明

        imageview.setAlpha(image_alpha);

 

        // 開啟一個線程來讓Alpha值遞減

        new Thread(new Runnable() {

            public void run() {

                while (isrung) {

                    try {

 

                        Thread.sleep(200);

                        // 更新Alpha值

                        updateAlpha();

                    } catch (InterruptedException e) {

                        e.printStackTrace();

                    }

                }

 

            }

        }).start();

 

        // 接受消息之后更新imageview視圖

        mHandler = new Handler() {

            @Override

            public void handleMessage(Message msg) {

                super.handleMessage(msg);

                imageview.setAlpha(image_alpha);

                textview.setText("現在alpha值是：" + Integer.toString(image_alpha));

                // 更新

                imageview.invalidate();

            }

        };

    }

 

    public void updateAlpha() {

        if (image_alpha - 7 >= 0) {

            image_alpha -= 7;

        } else {

            image_alpha = 0;

            isrung = false;

        }

        // 發送需要更新imageview視圖的消息

        mHandler.sendMessage(mHandler.obtainMessage());

    }

 

列表視圖ListView

1 參考幫助文檔的一種寫法

public class MainActivity extends ListActivity {

String[] strs = {"aa1","bb2","cc3"};

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

ArrayAdapter<String> aa = new ArrayAdapter<String>(this, R.layout.simple_list_item_1, strs);

setListAdapter(aa);

ListView lv = this.getListView();

lv.setOnItemClickListener(new OnItemClickListener() {

 

            public void onItemClick(AdapterView<?> parent, View view,

                    int position, long id) {

                Toast.makeText(MainActivity.this, strs[position], Toast.LENGTH_LONG).show();

                

            }

        });

}

}

監聽還可以這樣加

protected void onListItemClick(ListView l, View v, int position, long id) {

    // TODO Auto-generated method stub

    super.onListItemClick(l, v, position, id);

    Toast.makeText(this, strs[position], Toast.LENGTH_LONG).show();

}

第二種ListView的寫法

<ListView

android:id="@+id/ListView01"

android:layout_width="fill_parent"

android:layout_height="wrap_content"/>

 

public class TestListView2 extends Activity {

    ListView lv;

    String[] strs = { "Java", "JavaME", "JavaEE", "Android" };

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.test_listview);

        

        lv = (ListView)findViewById(R.id.ListView01);

        

        ArrayAdapter<String> aa = new

        ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,strs);

        lv.setAdapter(aa);

        

        lv.setOnItemClickListener(new OnItemClickListener() {

            public void onItemClick(AdapterView<?> parent, View view,

                    int position, long id) {

                Toast.makeText(TestListView2.this, strs[position], Toast.LENGTH_LONG).show();

            }

        });

    }

}

第三種ListView的寫法

<ImageView android:id="@+id/ImageView01"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

 

<TextView

android:text=""

android:id="@+id/text_TextView01"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

public class TestListView3 extends ListActivity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setListAdapter(new MyAdapter());

    }

    class MyAdapter extends BaseAdapter {

        String[] strs = { "Java", "JavaME", "JavaEE", "Android" };

        LayoutInflater li = LayoutInflater.from(getApplicationContext());

        public int getCount() {

            return strs.length;

        }

        public Object getItem(int position) {

            return null;

        }

        public long getItemId(int position) {

            return 0;

        }

        public View getView(int position, View convertView, ViewGroup parent) {

            View v = li.inflate(R.layout.listview_item, null);

            ImageView iv = (ImageView)v.findViewById(R.id.ImageView01);

            TextView tv = (TextView)v.findViewById(R.id.text_TextView01);

            tv.setText(strs[position]);

            iv.setImageResource(R.drawable.icon);

            return v;

        }

    }

}

[例11] 圖片按鈕ImageButton

1、設計界面如圖所示：

 

2、布局文件：

m_TextView = (TextView) findViewById(R.id.TextView01);

        // 分別取得4個ImageButton對象

        m_ImageButton1 = (ImageButton) findViewById(R.id.ImageButton01);

        m_ImageButton2 = (ImageButton) findViewById(R.id.ImageButton02);

        m_ImageButton3 = (ImageButton) findViewById(R.id.ImageButton03);

        m_ImageButton4 = (ImageButton) findViewById(R.id.ImageButton04);

 

        // 分別設置所使用的圖標

        // m_ImageButton1是在xml布局中設置的，這里就暫時不設置了

        m_ImageButton2.setImageDrawable(getResources().getDrawable(

                R.drawable.button2));

        m_ImageButton3.setImageDrawable(getResources().getDrawable(

                R.drawable.button3));

        m_ImageButton4.setImageDrawable(getResources().getDrawable(

                android.R.drawable.sym_call_incoming));

 

        // 以下分別為每個按鈕設置事件監聽setOnClickListener

    m_ImageButton1.setOnClickListener(new Button.OnClickListener() {

        public void onClick(View v) {

            // 對話框

        Dialog dialog = new AlertDialog.Builder(Activity01.this)

                        .setTitle("提示").setMessage("我是ImageButton1")

                        .setPositiveButton("確定",

                        new DialogInterface.OnClickListener() {

                            public void onClick(DialogInterface dialog,

                                        int whichButton) {

                                    }

                            }).create();// 創建按鈕

                dialog.show();

            }

    });

m_ImageButton2.setOnClickListener(new Button.OnClickListener() {

    public void onClick(View v) {

        Dialog dialog = new AlertDialog.Builder(Activity01.this)

            .setTitle("提示").setMessage(

            "我是ImageButton2，我要使用ImageButton3的圖標")

            .setPositiveButton("確定",

                new DialogInterface.OnClickListener() {

                    public void onClick(DialogInterface dialog,

                    int whichButton) {m_ImageButton2

     .setImageDrawable(getResources()

                     .getDrawable(R.drawable.button3));

                    }

            }).create();// 創建按鈕

        dialog.show();

    }

});

m_ImageButton3.setOnClickListener(new Button.OnClickListener() {

    public void onClick(View v) {

    Dialog dialog = new AlertDialog.Builder(Activity01.this)

        .setTitle("提示")

        .setMessage("我是ImageButton3，我要使用系統打電話圖標")

        .setPositiveButton("確定",

            new DialogInterface.OnClickListener() {

                public void onClick(DialogInterface dialog,

                int whichButton) {

m_ImageButton3.setImageDrawable(getResources()

                        .getDrawable(                         android.R.drawable.sym_action_call));

                            }

                }).create();// 創建按鈕

            dialog.show();

        }

    });

m_ImageButton4.setOnClickListener(new Button.OnClickListener() {

    public void onClick(View v) {

        Dialog dialog = new AlertDialog.Builder(Activity01.this)

            .setTitle("提示").setMessage("我是使用的系統圖標！")

            .setPositiveButton("確定",

                new DialogInterface.OnClickListener() {

                    public void onClick(DialogInterface dialog,

                            int whichButton) {

                            }

                    }).create();// 創建按鈕

            dialog.show();

        }

});

 

 

界面布局

[例12] 垂直線性布局

1. 設計界面如圖所示：

 

2、布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

    <TextView

     android:text="第一行"

     android:gravity="top"

     android:textSize="15pt"

     android:background="#aa0000"

     android:layout_width="fill_parent"

     android:layout_height="wrap_content"

     android:layout_weight="3"/> //重量級，越大則在界面中所占比例也越多（即四行所占比例會把界面全部占滿，重量級越多的占得比例越多）

    

    <TextView

     android:text="第二行"

     android:textSize="15pt"

     android:gravity="right"

     android:background="#00aa00"

     android:layout_width="fill_parent"

     android:layout_height="wrap_content"

     android:layout_weight="2"/>

    

    <TextView

     android:text="第三行"

     android:textSize="15pt"

     android:gravity="center_vertical"

     android:background="#0000aa"

     android:layout_width="fill_parent"

     android:layout_height="wrap_content"

     android:layout_weight="1"/>

    <TextView

     android:text="第四行"

     android:textSize="15pt"

     android:gravity="center_vertical"

     android:background="#aaaa00"

     android:layout_width="fill_parent"

     android:layout_height="wrap_content"

     android:layout_weight="0"/>

</LinearLayout>

[例13] 水平線性布局

1、設計界面如圖所示：

 

2、布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

    <TextView

     android:text="第一列"

     android:gravity="center_horizontal"

     android:background="#aa0000"

     android:layout_width="wrap_content"

     android:layout_height="fill_parent"

     android:layout_weight="1"/>

    

    <TextView

     android:text="第二列"

     android:gravity="center_horizontal"

     android:background="#00aa00"

     android:layout_width="wrap_content"

     android:layout_height="fill_parent"

     android:layout_weight="1"/>

    

    <TextView

     android:text="第三列"

     android:gravity="center_horizontal"

     android:background="#0000aa"

     android:layout_width="wrap_content"

     android:layout_height="fill_parent"

     android:layout_weight="1"/>

    

    <TextView

     android:text="第四列"

     android:gravity="center_horizontal"

     android:background="#aaaa00"

     android:layout_width="wrap_content"

     android:layout_height="fill_parent"

     android:layout_weight="1"/>

</LinearLayout>

[例14] 相對布局

1、設計界面如圖所示：

 

2、布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView

android:id="@+id/label"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="請輸入:"/>

<EditText

android:id="@+id/entry"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@android:drawable/editbox_background"

android:layout_below="@id/label"/>// layout_below表示該標簽放在TextView標簽下面

 

<Button

android:id="@+id/ok"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@id/entry"

android:layout_alignParentRight="true" //靠右

android:layout_marginLeft="10dip" //距左邊標簽間隔10個單位

android:text="確定" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_toLeftOf="@id/ok" //在id=ok標簽的左邊

android:layout_alignTop="@id/ok" //頂部和id=ok的標簽對齊

android:text="取消" />

</RelativeLayout>

 

 

絕對布局

[例15] 表單布局

1、設計界面如圖所示：

 

2、布局文件：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:stretchColumns="1">

//第一列可以延伸、擴展。這樣第一列和第二列不會緊挨着排列

 

<TableRow>

<TextView

android:layout_column="1" //指明該列為第一列，默認為第0列

android:text="打開..."

android:padding="3dip" />

<TextView

android:text="Ctrl-O"

android:gravity="right" //該視圖靠右邊界面

android:padding="3dip" />

</TableRow>

<TableRow>

<TextView

android:layout_column="1"

android:text="保存..."

android:padding="3dip" />

<TextView

android:text="Ctrl-S"

android:gravity="right"

android:padding="3dip" />

</TableRow>

<TableRow>

<TextView

android:layout_column="1"

android:text="另存為..."

android:padding="3dip" />

<TextView

android:text="Ctrl-Shift-S"

android:gravity="right"

android:padding="3dip" />

</TableRow>

 

<View

android:layout_height="2dip"

android:background="#FF909090" />

<TableRow>

<TextView

android:text="*"

android:padding="3dip" />

<TextView

android:text="導入..."

android:padding="3dip" />

</TableRow>

<TableRow>

<TextView

android:text="*"

android:padding="3dip" />

<TextView

android:text="導出..."

android:padding="3dip" />

<TextView

android:text="Ctrl-E"

android:gravity="right"

android:padding="3dip" />

</TableRow>

<View

android:layout_height="2dip"

android:background="#FF909090" />

 

<TableRow>

<TextView

android:layout_column="1"

android:text="退出"

android:padding="3dip" />

</TableRow>

</TableLayout>

 

 

 

 

 

1、設計界面如圖所示：

 

2、布局文件：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:stretchColumns="0,1,2"

android:shrinkColumns="1,2"

>

<TextView

android:text="Table Test"

android:gravity="center"/>

<TableRow>

<TextView

    android:layout_column="1"

android:text="姓名"

android:gravity="left"/>

<TextView

android:text="基本信息"

android:gravity="center"/>

</TableRow>

<TableRow>

<TextView

android:text=" 1 "

android:gravity="center"/>

<TextView

android:text="hoyah"

android:gravity="left"/>

<TextView

android:text="Wuhan University"

android:gravity="right"/>

</TableRow>

<TableRow>

<TextView

android:text=" 2 "

android:gravity="center"/>

<TextView

android:text="Google"

android:gravity="left"/>

<TextView

android:text="hello Google"

android:gravity="right"/>

</TableRow>

<TableRow>

<TextView

android:text="3"

android:gravity="center"/>

<TextView

android:text="Android"

android:gravity="left"/>

<TextView

android:text="Android OS"

android:gravity="right"/>

</TableRow>

</TableLayout>

 

 

布局講解:

    android:collapse="1

隱藏該TableLayout里的TableRow的列1，即第2列（從0開始計算），若有多列要隱藏，用"，"隔開。

    android:stretchColumns="0,1,2"

設置列0、1、2為可伸展列。

    android:shrinkColumns="1,2"

設置列1、2為可收縮列。

    android:background="@drawable/picture_name"

本例中沒有涉及此屬性，它是要設置當前view 的背景圖片，圖片文件應該放在res文件夾下。

[例16] 切換卡(TabWidget)

1、設計界面如圖所示：

 

2、布局文件：

<?xml version="1.0" encoding="utf-8"?>

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@android:id/tabhost"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<LinearLayout

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TabWidget

android:id="@android:id/tabs"

android:layout_width="fill_parent"

android:layout_height="wrap_content" />

<FrameLayout

android:id="@android:id/tabcontent"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView

android:id="@+id/textview1"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:text="this is a tab" />

<TextView

android:id="@+id/textview2"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:text="this is another tab" />

<TextView

android:id="@+id/textview3"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:text="this is a third tab" />

    </FrameLayout>

</LinearLayout>

</TabHost>

 

3、核心語句：

public class Activity01 extends TabActivity {

    // 聲明TabHost對象

    TabHost mTabHost;

 

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

 

        // 取得TabHost對象

        mTabHost = getTabHost();

 

        /* 為TabHost添加標簽 */

        // 新建一個newTabSpec(newTabSpec)

        // 設置其標簽和圖標(setIndicator)

        // 設置內容(setContent)

    mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 1",    getResources().getDrawable(R.drawable.img1)).setContent(

                 R.id.textview1));

    mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("TAB 2", getResources().getDrawable(R.drawable.img2)).setContent(

                 R.id.textview2));

mTabHost.addTab(mTabHost.newTabSpec("tab_test3").setIndicator("TAB 3",    getResources().getDrawable(R.drawable.img3)).setContent(

                  R.id.textview3));

 

        // 設置TabHost的背景顏色

        mTabHost.setBackgroundColor(Color.argb(150, 22, 70, 150));

        // 設置TabHost的背景圖片資源

        // mTabHost.setBackgroundResource(R.drawable.bg0);

 

        // 設置當前顯示哪一個標簽

    mTabHost.setCurrentTab(0);

        // 標簽切換事件處理，setOnTabChangedListener

    mTabHost.setOnTabChangedListener(new OnTabChangeListener() {

    // TODO Auto-generated method stub

            @Override

    public void onTabChanged(String tabId) {

        Dialog dialog = new AlertDialog.Builder(Activity01.this)

                .setTitle("提示").setMessage("當前選中：" + tabId + "標簽")

                .setPositiveButton("確定",

                 new DialogInterface.OnClickListener() {

                    public void onClick(DialogInterface dialog,

                        int whichButton) {

                                dialog.cancel();

                            }

                    }).create();// 創建按鈕

            dialog.show();

         }

     });

}

}