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

[索引页]
[源码下载]

系出名门Android(5) - 控件(View)之TextView, Button, ImageButton, ImageView, CheckBox, RadioButton, AnalogClock, DigitalClock

作者：webabcd


介绍
在 Android 中使用各种控件(View)

• TextView - 文本显示控件
• Button - 按钮控件
• ImageButton - 图片按钮控件
• ImageView - 图片显示控件
• CheckBox - 复选框控件
• RadioButton - 单选框控件
• AnalogClock - 钟表（带表盘的那种）控件
• DigitalClock - 电子表控件

1、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显示文字用的");
        }
}

 

 

2、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( "按钮被单击了");
                        }
                });
        }
}

 

 

3、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( "图片按钮被单击了");
                        }
                });
        }
}

 

 

4、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);
        }
}

 

 

5、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));                                
                        }
                });
        }
}

 

 

6、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() + " 被选中");                                        
                        }
                });    
        }
}

 

 

7、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");
        }
}

 

 

8、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
[源码下载]