系出名門Android(6) - 控件(View)之DatePicker, TimePicker, ToggleButton, EditText, ProgressBar, SeekBar, AutoCompleteTextView, MultiAutoCompleteTextView

介紹
在 Android 中使用各種控件(View)

• DatePicker - 日期選擇控件
• TimePicker - 時間選擇控件
• ToggleButton - 雙狀態按鈕控件
• EditText - 可編輯文本控件
• ProgressBar - 進度條控件
• SeekBar - 可拖動的進度條控件
• AutoCompleteTextView - 支持自動完成功能的可編輯文本控件
• MultiAutoCompleteTextView - 支持自動完成功能的可編輯文本控件，允許輸入多值（多值之間會自動地用指定的分隔符分開）

1、DatePicker 的 Demo
datepicker.xml
 

  <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    
    <!--
        DatePicker - 日期選擇控件
    -->
    <DatePicker android:id="@ id/datePicker"
        android:layout_width="wrap_content" android:layout_height="wrap_content">
    </DatePicker>
    
</LinearLayout>

_DatePicker.java
 

  package com.webabcd.view;

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

public class _DatePicker extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.datepicker);

        // 具體的應用可參見對話框中的示例
        setTitle("DatePicker");
    }
}

2、TimePicker 的 Demo
timepicker.xml
 

  <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    
    <!--
        TimePicker - 時間選擇控件
    -->
    <TimePicker android:id="@ id/timePicker"
        android:layout_width="wrap_content" android:layout_height="wrap_content">
    </TimePicker>
    
</LinearLayout>

_TimePicker.java
 

  package com.webabcd.view;

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

public class _TimePicker extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.timepicker);

        // 具體的應用可參見對話框中的示例
        setTitle("TimePicker");
    }
}

3、ToggleButton 的 Demo
togglebutton.xml
 

  <?xml version="1.0" encoding="utf-8"?>
<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:layout_width="fill_parent"
        android:layout_height="wrap_content" android:id="@ id/textView" />
        
    <!-- 
        ToggleButton - 雙狀態按鈕控件
            textOn - 當按鈕狀態為 true 時所顯示的文本
            textOff - 當按鈕狀態為 false 時所顯示的文本
    -->
    <ToggleButton android:id="@ id/toggleButton"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:textOn="關閉" android:textOff="打開" />
        
</LinearLayout>

_ToggleButton.java
 

  package com.webabcd.view;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.ToggleButton;

public class _ToggleButton extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.togglebutton);

        setTitle("ToggleButton");
        
        final ToggleButton btn = (ToggleButton) this.findViewById(R.id.toggleButton);
        // setOnClickListener() - 響應按鈕的鼠標單擊事件
        btn.setOnClickListener(new Button.OnClickListener(){
            @Override
            public void onClick(View v) {
                TextView txt = (TextView) _ToggleButton.this.findViewById(R.id.textView);
                // ToggleButton.isChecked() - 雙狀態按鈕的按鈕狀態
                txt.setText("按鈕狀態："   String.valueOf(btn.isChecked()));
            }
        });
    }
}

4、EditText 的 Demo
edittext.xml
 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    
    <!--
        EditText - 可編輯文本控件
    -->
    <EditText android:id="@ id/editText" android:layout_width="fill_parent"
        android:layout_height="wrap_content">
    </EditText>
    
</LinearLayout>

_EditText.java
 

package com.webabcd.view;

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

public class _EditText extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.edittext);

        setTitle("EditText");
        
        EditText txt = (EditText) this.findViewById(R.id.editText);
        txt.setText("我可編輯");
    }
}

5、ProgressBar 的 Demo
progressbar.xml
 

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

    <!--
        ProgressBar - 進度條控件
    -->

    <!--以下分別為大、中、小的進度條控件（圓圈狀）-->
    <ProgressBar android:id="@ android:id/progress_large"
        style="?android:attr/progressBarStyleLarge" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ProgressBar android:id="@ android:id/progress"
        android:layout_width="wrap_content" android:layout_height="wrap_content" />
    <ProgressBar android:id="@ android:id/progress_small"
        style="?android:attr/progressBarStyleSmall" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <!--
        進度條控件（條狀）的演示
            style - 進度條的樣式，本例使用內置樣式
            max - 進度的最大值
            progress - 第一進度位置
            secondaryProgress - 第二進度位置
    -->
    <ProgressBar android:id="@ id/progress_horizontal"
        style="?android:attr/progressBarStyleHorizontal" android:layout_width="200px"
        android:layout_height="wrap_content" android:max="100"
        android:progress="50" android:secondaryProgress="75" />

</LinearLayout>

_ProgressBar.java
 

  package com.webabcd.view;

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


// 另見對話框中的進度條
public class _ProgressBar extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);        
        
        // 設置特性以允許在應用程序的標題欄上顯示進度條（條狀）
        requestWindowFeature(Window.FEATURE_PROGRESS);
        // 設置特性以允許在應用程序的標題欄上顯示進度條（圓圈狀）
        requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);

        this.setContentView(R.layout.progressbar);

        setTitle("ProgressBar");
        
        // 在標題欄上顯示進度條（條狀）
        setProgressBarVisibility(true);
        // 在標題欄上顯示進度條（圓圈狀）
        setProgressBarIndeterminateVisibility(true);
        
        // 指定進度條的進度
        setProgress(50 * 100);
        setSecondaryProgress(75 * 100);
    }
}

6、SeekBar 的 Demo
seekbar.xml
 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    
    <!--
        SeekBar - 可拖動的進度條控件
            max - 進度的最大值
            progress - 第一進度位置
            secondaryProgress - 第二進度位置
    -->
    <SeekBar android:id="@ id/seekBar" android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:max="100"
        android:progress="50" android:secondaryProgress="75" />

    <TextView android:id="@ id/progress" android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <TextView android:id="@ id/tracking" android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

_SeekBar.java
 

package com.webabcd.view;

import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;

public class _SeekBar extends Activity implements
        SeekBar.OnSeekBarChangeListener {

    SeekBar mSeekBar;
    TextView mProgressText;
    TextView mTrackingText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.seekbar);

        setTitle("SeekBar");

        mSeekBar = (SeekBar) findViewById(R.id.seekBar);
        // setOnSeekBarChangeListener() - 響應拖動進度條事件
        mSeekBar.setOnSeekBarChangeListener(this);
        
        mProgressText = (TextView) findViewById(R.id.progress);
        mTrackingText = (TextView) findViewById(R.id.tracking);
    }

    // 拖動進度條後，進度發生改變時的回調事件
    public void onProgressChanged(SeekBar seekBar, int progress,
            boolean fromTouch) {
        mProgressText.setText(progress   "%");
    }

    // 拖動進度條前開始跟蹤觸摸
    public void onStartTrackingTouch(SeekBar seekBar) {
        mTrackingText.setText("開始跟蹤觸摸");
    }

    // 拖動進度條後停止跟蹤觸摸
    public void onStopTrackingTouch(SeekBar seekBar) {
        mTrackingText.setText("停止跟蹤觸摸");
    }

}

7、AutoCompleteTextView 的 Demo
autocompletetextview.xml
 

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

    <!--
        AutoCompleteTextView - 支持自動完成功能的可編輯文本控件
    -->
    <AutoCompleteTextView android:id="@ id/editText"
        android:layout_width="fill_parent" android:layout_height="wrap_content" />

</LinearLayout>

_AutoCompleteTextView.java
 

  package com.webabcd.view;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;

public class _AutoCompleteTextView extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.autocompletetextview);

        setTitle("AutoCompleteTextView");
        
        // 實例化適配器，指定顯示格式及數據源
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(
                this,
                android.R.layout.simple_dropdown_item_1line, 
                ary);
        AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.editText);
        // 指定自動完成控件的適配器
        textView.setAdapter(adapter);
    }

    // 自動完成控件的所需數據的數據源
    private String[] ary = new String[] {
        "abc",
        "abcd",
        "abcde",
        "abcdef",
        "abcdefg",
        "hij",
        "hijk",
        "hijkl",
        "hijklm",
        "hijklmn",
    };
}

8、MultiAutoCompleteTextView 的 Demo
multiautocompletetextview.xml
 

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

    <!--
        MultiAutoCompleteTextView - 支持自動完成功能的可編輯文本控件，允許輸入多值（多值之間會自動地用指定的分隔符分開）
    -->
    <MultiAutoCompleteTextView android:id="@ id/editText"
        android:layout_width="fill_parent" android:layout_height="wrap_content" />

</LinearLayout>

_MultiAutoCompleteTextView.java
 

  package com.webabcd.view;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.MultiAutoCompleteTextView;

public class _MultiAutoCompleteTextView extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.multiautocompletetextview);

        setTitle("MultiAutoCompleteTextView");
        
        // 實例化適配器，指定顯示格式及數據源
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(
                this,
                android.R.layout.simple_dropdown_item_1line, 
                ary);
        MultiAutoCompleteTextView textView = (MultiAutoCompleteTextView) findViewById(R.id.editText);
        textView.setAdapter(adapter);
        
        // 設置多個值之間的分隔符，此處為逗號
        textView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());
    }

    // 自動完成控件的所需數據的數據源
    private String[] ary = new String[] {
        "abc",
        "abcd",
        "abcde",
        "abcdef",
        "abcdefg",
        "hij",
        "hijk",
        "hijkl",
        "hijklm",
        "hijklmn",
    };
}

OK
[源碼下載]