系出名門Android(6) - 控件(View)

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

SeekBar, AutoCompleteTextView, MultiAutoCompleteTextView

做者：webabcd

介紹 在 Android 中使用各類控件(View) DatePicker - 日期選擇控件 TimePicker - 時間選擇控件 ToggleButton - 雙狀態按鈕控件 EditText - 可編輯文本控件 ProgressBar - 進度條控件 SeekBar - 可拖動的進度條控件 AutoCompleteTextView - 支持自動完成功能的可編輯文本控件 MultiAutoCompleteTextView - 支持自動完成功能的可編輯文本控件，容許輸入多值（多 值之間會自動地用指定的分隔符分開） 一、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");     } } 二、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");     } } 三、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()));             }         });     } } 四、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("我可編輯");     } } 五、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);     } } 六、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("中止跟蹤觸摸");     } } 七、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",     }; } 八、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