原创 Andrio第六站 众多豪华控件（1）ImageButton CheckBox Toast

目录

4.1 EditText与TextView共舞

setOnKeyListener事件

4.2 设计具有背景图的按钮

4.3 给圣诞老人的信息

Toast对象的使用

4.4 我同意条款

CheckBox的isChecked属性

4.5 消费券采购列表

多选项CheckBox的应用

4.1 EditText与TextView共舞

setOnKeyListener事件

EditText Widget设计的初衷是为了等待User输入而准备的，那么在User输入的同时，又该如何拦截所输入的文字呢？Android的多数Widget都有setOnKeyListener事件，通过Listener捕捉User输入的键盘事件。

接着，本范例将以EditText与TextView示范如何在捕捉User键盘输入文字的同时实时取得文字，同步显示于TextView，类似手机版的Ajax效果，实时输入实时输出。

主程序中唯一也同时是最关键之处，便是利用EditText.OnKeyListener来拦截EditText的键盘输入事件，仅需在其中重写onKey()方法，在onKey()方法中，将EditText.getText()取出的文字，显示于TextView当中，是一个简单易懂的范例练习。

这个实时输入实时显示的效果可以扩展到许多手机应用程序中，不妨尝试在OnKey Listener()里做实时文字过滤效果，例如：当User输入不雅的文字时，可以提示User不接受部分关键字。以输入Shit为例，在TextView就会出现：Sh*t，此种做法可以过滤掉不雅文字的出现。

4.2 设计具有背景图的按钮

延续前一章按钮事件的应用范例重新设计一个具有背景图的按钮，让按钮有美观的背景图片，只是这次不使用先前的Button Widget，而是改以ImageButton Widget来显示。

将按钮背景图预先Import至Drawable里（*.png图形文件），利用这些图片，作为ImageButton的背景图。为了做对照，我们另外在Layout配置一个“一般按钮”，运行结果画面中，可以明显看出图片按钮与一般按钮在外观上的差异。

一般来说，要设置ImageButton背景图有许多方法，此程序使用的方法是ImageButton.setImage- Resource()，需要传递的参数即是res/drawable/下面的Resource ID，除了设置背景图片的方法外，程序需要用到onFocusChange与onClick等按钮事件作为按钮事件单击之后的处理，最后通过TextView来显示目前图片按钮的状态为onClick、onFocus，或offFocus，并且同步更新按钮的背景图，让User有动态交互的感觉。

先设置好main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:background="@drawable/white"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  >
  <TextView
  android:id="@+id/myTextView1"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:textColor="@drawable/blue"
  android:text="@string/str_textview1"/>
 <!--
   預設圖片按鈕的default圖案透過drawable資源中取得
  -->
  <ImageButton
  android:id="@+id/myImageButton1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:src="@drawable/iconempty"/>
   <Button
  android:id="@+id/myButton1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="@string/str_button1" />  
</LinearLayout>

随后我们设计主程序

除了在运行时用onFocus()与onClick()事件来设置按钮背景图片外，Android的MVC设计理念可以让程序运行之际初就以xml定义的方式来初始化ImageButton的背景图，这仅需先将图片导入res/drawable。

设置方法为在res/drawable下自行定义一个xml，主要针对按钮的state_focused、state_pressed与drawable属性作设置，如下所示：

drawable/advancedbutton.xml

然后，在main.xml中将advancedbutton赋值给Button组件中background的属性。

layout/main.xml

4.3 给圣诞老人的信息

Toast对象的使用

Toast是Android专属的提示小对象，它的使用方式相当的简单，不过用途却很广泛。基本上，Toast就是一个简短的小信息，将要告诉用户的信息以一个浮动在最上层的View显示，显示Toast之后，静待几秒后便会自动消失，最常见的应用就是音量大小的调整。当单击音量调整钮之后，会看见跳出的音量指示Toast对象，等待调整完之后便会消失。

通过Toast的特性，可以在不影响用户通话或聆听音乐的情况下，显示给User的信息。对于程序员来说，它也是一个非常好用的debug工具，可以在任何程序运行时通过Toast的方式，显示运行变量或手机环境的概况。

本范例使用一个EditText控件来接受用户输入的文字，以及配置Button按钮Widget，当按下按钮时，会将EditText里的文字，以Toast.makeText()的方法让文字显示于Toast对象中，这段文字会在显示一段时间后自动消失，读者可借此体验一下Toast对象的使用与显示。

主程序如下

主程序需要构建两个控件EditText与Button，在Button的onClick()方法中使用Toast对象的makeText()方法来显示输入的文字。

Toast显示后会在一定时间内消失，在Toast构造参数中的第二个参数为显示的时间常数，可设置为LENGTH_LONG或LENGTH_SHORT，前者提示时间较长，后者较短，当成传递makeText()方法的参数使用。

当然，你也可以使用重写Toast对象的方法，自定义Toast显示的Layout，以不同于系统内置的方式显示客制化的Toast对象，如要在Toast里显示图片（Drawable），方式如下：

或显示自定义的Layout Widget（如TextView），则写法如下：

或者通过AlertDialog.Builder来创建类似Toast的信息对象，读者可以实现看看，实际比较两者有何不同：

4.4 我同意条款

CheckBox的isChecked属性

所有的网络服务在User使用之前，都需要签署同意条款，在手机应用程序、手机游戏的设计经验中，常看见CheckBox在同意条款情境的运用，其选取的状态有两种即isChecked=true与isChecked=false。

以下范例将设计一个TextView放入条款文字，在下方配置一个CheckBox Widget作为选取项，通过Button.onClickListener按钮事件处理，取得User同意条款的状态。

当CheckBox.isChecked为true，更改TextView的文字内容为“你已接受同意!！”，当未选取CheckBox时，Button则不可以被选择的（被Disabled）。

我们先看看布局设计

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout 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:id="@+id/myTextView1"
  android:layout_width="185px"
  android:layout_height="267px"
  android:layout_x="67px"
  android:layout_y="53px"
  android:text="@string/text1"
  />
  <!--建立第二個TextView -->
  <TextView
  android:id="@+id/myTextView2"
  android:layout_width="100px"
  android:layout_height="30px"
  android:layout_x="190px"
  android:layout_y="325px"
  />
  <!--建立一個CheckBox -->
  <CheckBox
  android:id="@+id/myCheckBox"
  android:layout_width="97px"
  android:layout_height="wrap_content"
  android:text="@string/str_agree"
  android:layout_x="99px"
  android:layout_y="318px"
  />
  <!--建立一個Button -->
  <Button
  android:id="@+id/myButton"
  android:layout_width="85px"
  android:layout_height="wrap_content"
  android:text="@string/str_go"
  android:layout_x="102px"
  android:layout_y="363px"
  />
</AbsoluteLayout>

接着设计主程序

public class ex4_4 extends Activity {
 /** Called when the activity is first created. */
  
  /*声明 TextView、CheckBox、Button对象*/
   public TextView myTextView1;
   public TextView myTextView2;
   public CheckBox myCheckBox;
   public Button myButton;
  
     @Override
   public void onCreate(Bundle savedInstanceState)
   {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
    
     /*取得TextView、CheckBox、Button*/
     myTextView1 = (TextView) findViewById(R.id.myTextView1);
     myTextView2 = (TextView) findViewById(R.id.myTextView2);
     myCheckBox = (CheckBox) findViewById(R.id.myCheckBox);
     myButton = (Button) findViewById(R.id.myButton);
    
     /*将CheckBox、Button默认为未选择状态*/
     myCheckBox.setChecked(false);
     myButton.setEnabled(false);
    
     myCheckBox.setOnClickListener(new CheckBox.OnClickListener()
     {
       @Override
       public void onClick(View v)
       {
         // TODO Auto-generated method stub
         if(myCheckBox.isChecked())
         {
           /*设置Button为不能选择对象*/
           myButton.setEnabled(true);
           myTextView2.setText("");
         }
         else
         {/*设置Button为可以选择对象*/
           myButton.setEnabled(false);
           myTextView1.setText(R.string.text1);
           /*在TextView2里显示出"请勾选我同意"*/
           myTextView2.setText(R.string.no);         
         }
       }
     });
      
     myButton.setOnClickListener(new Button.OnClickListener()
     {
       @Override
       public void onClick(View v)
       {
         // TODO Auto-generated method stub
         if(myCheckBox.isChecked())       
         {
           myTextView1.setText(R.string.ok);           
         }else
         {     
         }
       }
     });
   
   }
}

CheckBox在默认内容为空白时（没有任何默认的提示文字下），可设置提示User的文字，其调用的方法为CheckBox.setHint()方法；在扩展学习的范例练习，是抓取R.string.hello这个字符串常数，其与默认CheckBox文字的结果是相同的，你不妨试试看。

myTextView1 = (TextView) findViewById(R.id.myTextView1);

myTextView2 = (TextView) findViewById(R.id.myTextView2);

myCheckBox = (CheckBox) findViewById(R.id.myCheckBox);

myButton = (Button) findViewById(R.id.myButton);

myCheckBox.setChecked(false);

/*利用setHIT抓取strings里面的值*/

CharSequence hint = getString(R.string.hello);

myCheckBox.setHint(hint);

/*设置文字颜色*/

myCheckBox.setHintTextColor(Color.RED);

4.5 消费券采购列表

多选项CheckBox的应用

你使用过消费券吗？总额度只有3600元的消费券，虽然活动已经宣告结束，但也可以当成一个限制使用额度的范例示范。这个范例程序要示范的是CheckBox.setOnCheckedChangeListener，在程序中设计3个CheckBox核取项，分别表示三种物品列表，当User勾选其中一个物品，就在TextView里显示已选择的物品列表。

程序的关键在同时监听3个CheckBox.OnCheckedChangeListener的状态，并在CheckBox. onChecked()方法中，重组所有被勾选的物品文字。

先设计界面：3个checkbox

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  android:id="@+id/widget28"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  xmlns:android="http://schemas.android.com/apk/res/android"
>
<TextView
  android:id="@+id/myTitle"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="@string/str_title"
>
</TextView>
<CheckBox
  android:id="@+id/myCheckBox1"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="@string/str_checkbox1"
>
</CheckBox>
<CheckBox
  android:id="@+id/myCheckBox2"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="@string/str_checkbox2"
>
</CheckBox>
<CheckBox
android:id="@+id/myCheckBox3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/str_checkbox3"
>
</CheckBox>
<TextView
android:id="@+id/myTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</TextView>
</LinearLayout>

主程序的重点在于构造3个CheckBox的对象，以及一个TextView对象，并通过setOnChecked ChangeListener实现onCheckedChanged()方法来更新TextView文字。

import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.TextView;

public class ex4_5 extends Activity {
 
  /*声明对象变量*/
   private TextView mTextView1;
   private CheckBox mCheckBox1;
   private CheckBox mCheckBox2;
   private CheckBox mCheckBox3;
  
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        /*通过findViewById取得TextView对象并调整文字内容*/
        mTextView1 = (TextView) findViewById(R.id.myTextView1);
        mTextView1.setText("你所选择的项目有:");
       
        /*通过findViewById取得三个CheckBox对象*/
        mCheckBox1=(CheckBox)findViewById(R.id.myCheckBox1);
        mCheckBox2=(CheckBox)findViewById(R.id.myCheckBox2);
        mCheckBox3=(CheckBox)findViewById(R.id.myCheckBox3);
       
        /*设置OnCheckedChangeListener给三个CheckBox对象*/
        mCheckBox1.setOnCheckedChangeListener(mCheckBoxChanged);
        mCheckBox2.setOnCheckedChangeListener(mCheckBoxChanged);
        mCheckBox3.setOnCheckedChangeListener(mCheckBoxChanged);
        }
       
    /*声明并构造onCheckedChangeListener对象*/
        private CheckBox.OnCheckedChangeListener mCheckBoxChanged
        = new CheckBox.OnCheckedChangeListener()
        { 
                 @Override
          public void onCheckedChanged( CompoundButton buttonView,
              boolean isChecked)
          {
            // TODO Auto-generated method stub 

   /*通过getString()取得CheckBox的文字字符串*/
            String str0="所选的项目为: ";
            String str1=getString(R.string.str_checkbox1);
            String str2=getString(R.string.str_checkbox2);
            String str3=getString(R.string.str_checkbox3);
            String plus=";";
            String result="但是超过预算啰!!";
            String result2="还可以再多买几本喔!!";
           
            /*任一CheckBox被勾选后,该CheckBox的文字会改变TextView的文字内容

             * 三个对象总共八种情境*/

//在这里做判断

            if(mCheckBox1.isChecked()==true & mCheckBox2.isChecked()==true
                & mCheckBox3.isChecked()==true)
            {
              mTextView1.setText(str0+str1+plus+str2+plus+str3+result);
            }
            else if(mCheckBox1.isChecked()==false & mCheckBox2.isChecked()==true
                & mCheckBox3.isChecked()==true)
            {
              mTextView1.setText(str0+str2+plus+str3+result);
            }
            else if(mCheckBox1.isChecked()==true & mCheckBox2.isChecked()==false
                & mCheckBox3.isChecked()==true)
            {
              mTextView1.setText(str0+str1+plus+str3+result);
            }
            else if(mCheckBox1.isChecked()==true & mCheckBox2.isChecked()==true
                & mCheckBox3.isChecked()==false)
            {
              mTextView1.setText(str0+str1+plus+str2+result);
            }
            else if(mCheckBox1.isChecked()==false & mCheckBox2.isChecked()==false
                & mCheckBox3.isChecked()==true)
            {
              mTextView1.setText(str0+str3+plus+result2);
            }
            else if(mCheckBox1.isChecked()==false & mCheckBox2.isChecked()==true
                & mCheckBox3.isChecked()==false)
            {
              mTextView1.setText(str0+str2);
            }
            else if(mCheckBox1.isChecked()==true & mCheckBox2.isChecked()==false
                & mCheckBox3.isChecked()==false)
            {
              mTextView1.setText(str0+str1);
            }
            else if(mCheckBox1.isChecked()==false & mCheckBox2.isChecked()==false
                & mCheckBox3.isChecked()==false)
            {
              mTextView1.setText(str0);
            }
          }
         };
}

读者可以将OnCheckedChangeListener更改为OnTouchListener（屏幕触控事件），方法如下：（无法仿真）

请试着比较OnCheckedChangeListener与OnTouchListener在使用上的差异。