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

系出名門Android(5) - 控件(View)之TextView, Button, ImageButton, ImageView, CheckBox,

RadioButton, AnalogClock, DigitalClock

做者：webabcd

介紹 在 Android 中使用各類控件(View) TextView - 文本顯示控件 Button - 按鈕控件 ImageButton - 圖片按鈕控件 ImageView - 圖片顯示控件 CheckBox - 複選框控件 RadioButton - 單選框控件 AnalogClock - 鐘錶（帶錶盤的那種）控件 DigitalClock - 電子錶控件 一、TextView 的 Demo textview.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 - 文本顯示控件     -->     <TextView android:layout_width="fill_parent"         android:layout_height="wrap_content" android:id="@+id/textView" />          </LinearLayout> _TextView.java 代碼 package com.webabcd.view; import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class _TextView extends Activity {     @Override     protected void onCreate(Bundle savedInstanceState) {         // TODO Auto-generated method stub         super.onCreate(savedInstanceState);         this.setContentView(R.layout.textview);         // 設置 Activity 的標題         setTitle("TextView");                  TextView txt = (TextView) this.findViewById(R.id.textView);         // 設置文本顯示控件的文本內容，須要換行的話就用「\n」         txt.setText("我是 TextView\n顯示文字用的");     } } 二、Button 的 Demo button.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" />           <!--         Button - 按鈕控件      -->         <Button android:id="@+id/button"         android:layout_width="wrap_content" android:layout_height="wrap_content">     </Button>      </LinearLayout> _Button.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; public class _Button extends Activity {     @Override     protected void onCreate(Bundle savedInstanceState) {         // TODO Auto-generated method stub         super.onCreate(savedInstanceState);         this.setContentView(R.layout.button);         setTitle("Button");                  Button btn = (Button) this.findViewById(R.id.button);         btn.setText("click me");                  // setOnClickListener() - 響應按鈕的鼠標單擊事件         btn.setOnClickListener(new Button.OnClickListener(){             @Override             public void onClick(View v) {                 TextView txt = (TextView) _Button.this.findViewById(R.id.textView);                 txt.setText("按鈕被單擊了");             }         });     } } 三、ImageButton 的 Demo imagebutton.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" />          <!--        ImageButton - 圖片按鈕控件     -->         <ImageButton android:id="@+id/imageButton"         android:layout_width="wrap_content" android:layout_height="wrap_content">     </ImageButton>      </LinearLayout> _ImageButton.java 代碼 package com.webabcd.view; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.ImageButton; import android.widget.TextView; public class _ImageButton extends Activity {     @Override     protected void onCreate(Bundle savedInstanceState) {         // TODO Auto-generated method stub         super.onCreate(savedInstanceState);         this.setContentView(R.layout.imagebutton);         setTitle("ImageButton");                  ImageButton imgButton = (ImageButton) this.findViewById(R.id.imageButton);         // 設置圖片按鈕的背景         imgButton.setBackgroundResource(R.drawable.icon01);                  // setOnClickListener() - 響應圖片按鈕的鼠標單擊事件         imgButton.setOnClickListener(new Button.OnClickListener(){             @Override             public void onClick(View v) {                 TextView txt = (TextView) _ImageButton.this.findViewById(R.id.textView);                 txt.setText("圖片按鈕被單擊了");             }         });     } } 四、ImageView 的 Demo imageview.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">          <!--        ImageView - 圖片顯示控件     -->     <ImageView android:id="@+id/imageView" android:layout_width="wrap_content"         android:layout_height="wrap_content"></ImageView>          </LinearLayout> _ImageView.java 代碼 package com.webabcd.view; import android.app.Activity; import android.os.Bundle; import android.widget.ImageView; public class _ImageView extends Activity {     @Override     protected void onCreate(Bundle savedInstanceState) {         // TODO Auto-generated method stub         super.onCreate(savedInstanceState);         this.setContentView(R.layout.imageview);         setTitle("ImageView");                  ImageView imgView = (ImageView) this.findViewById(R.id.imageView);         // 指定須要顯示的圖片         imgView.setBackgroundResource(R.drawable.icon01);     } } 五、CheckBox 的 Demo checkbox.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" />              <!--        CheckBox - 複選框控件     -->     <CheckBox android:text="CheckBox01" android:id="@+id/chk1"         android:layout_width="wrap_content" android:layout_height="wrap_content"></CheckBox>     <CheckBox android:text="CheckBox02" android:id="@+id/chk2"         android:layout_width="wrap_content" android:layout_height="wrap_content"></CheckBox>     <CheckBox android:text="CheckBox03" android:id="@+id/chk3"         android:layout_width="wrap_content" android:layout_height="wrap_content"></CheckBox>          </LinearLayout> _CheckBox.java 代碼 package com.webabcd.view; import android.app.Activity; import android.os.Bundle; import android.widget.CheckBox; import android.widget.CompoundButton; import android.widget.TextView; public class _CheckBox extends Activity {     @Override     protected void onCreate(Bundle savedInstanceState) {         // TODO Auto-generated method stub         super.onCreate(savedInstanceState);         this.setContentView(R.layout.checkbox);         setTitle("CheckBox");                  CheckBox chk = (CheckBox) this.findViewById(R.id.chk1);         // setOnCheckedChangeListener() - 響應複選框的選中狀態改變事件         chk.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {             @Override             public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {                 TextView txt = (TextView) _CheckBox.this.findViewById(R.id.textView);                 txt.setText("CheckBox01 的選中狀態：" + String.valueOf(isChecked));                             }         });     } } 六、RadioButton 的 Demo radiobutton.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" />              <!--        RadioButton - 單選框控件         RadioGroup - 對其內的單選框控件作分組             checkedButton - 指定組內被選中的單選框的 ID     -->     <RadioGroup android:id="@+id/radioGroup"         android:layout_width="fill_parent" android:layout_height="fill_parent"         android:checkedButton="@+id/rad3" android:orientation="horizontal"         android:gravity="center_vertical|center_horizontal">         <RadioButton android:text="rad1" android:id="@+id/rad1"             android:layout_width="wrap_content" android:layout_height="wrap_content"></RadioButton >         <RadioButton android:text="rad2" android:id="@+id/rad2"             android:layout_width="wrap_content" android:layout_height="wrap_content"></RadioButton >         <RadioButton android:text="rad3" android:id="@+id/rad3"             android:layout_width="wrap_content" android:layout_height="wrap_content"></RadioButton >     </RadioGroup>      </LinearLayout> _RadioButton.java 代碼 package com.webabcd.view; import android.app.Activity; import android.os.Bundle; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.TextView; public class _RadioButton extends Activity {     @Override     protected void onCreate(Bundle savedInstanceState) {         // TODO Auto-generated method stub         super.onCreate(savedInstanceState);         this.setContentView(R.layout.radiobutton);         setTitle("RadioButton");                  RadioGroup group = (RadioGroup) this.findViewById(R.id.radioGroup);         // setOnCheckedChangeListener() - 響應單選框組內的選中項發生變化時的事件         group.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {                 @Override             public void onCheckedChanged(RadioGroup group, int checkedId) {                 TextView txt = (TextView) _RadioButton.this.findViewById(R.id.textView);                 txt.setText(((RadioButton)findViewById(checkedId)).getText() + " 被選中");                                 }         });      } } 七、AnalogClock 的 Demo analogclock.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">          <!--        AnalogClock - 鐘錶（帶錶盤的那種）控件     -->     <AnalogClock android:id="@+id/analogClock"         android:layout_width="wrap_content" android:layout_height="wrap_content">     </AnalogClock>      </LinearLayout> _AnalogClock.java 代碼 package com.webabcd.view; import android.app.Activity; import android.os.Bundle; public class _AnalogClock extends Activity {     @Override     protected void onCreate(Bundle savedInstanceState) {         // TODO Auto-generated method stub         super.onCreate(savedInstanceState);         this.setContentView(R.layout.analogclcok);         setTitle("AnalogClock");     } } 八、DigitalClock 的 Demo digitalclock.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">          <!--        DigitalClock - 電子錶控件     -->     <DigitalClock android:id="@+id/digitalClock"         android:layout_width="wrap_content" android:layout_height="wrap_content">     </DigitalClock>      </LinearLayout> _DigitalClock.java 代碼 package com.webabcd.view; import android.app.Activity; import android.os.Bundle; public class _DigitalClock extends Activity {     @Override     protected void onCreate(Bundle savedInstanceState) {         // TODO Auto-generated method stub         super.onCreate(savedInstanceState);         this.setContentView(R.layout.digitalclcok);         setTitle("DigitalClcok");     } } OK