第九講：用戶界面 View（四）

有一個(gè)姑涼 · 發(fā)表于 2013-8-28 16:19

674

本講內(nèi)容：Button TextView EditView CheckBox RadioGroup ImageView ImageButton

一、Button 按鈕

按鈕是程序中最常見的一個(gè)元素，我們通過一個(gè)例子感受一下，代碼的講解都寫在注釋里了，所以我就直接上代碼和代碼的運(yùn)行結(jié)果。

package android.basic.lesson9;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
//不熟悉內(nèi)部類的朋友可以留意一下這里的導(dǎo)入方式
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class MainHelloButton extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);

   //實(shí)現(xiàn)一個(gè)多按鈕可用的單擊監(jiān)聽器對象
   OnClickListener listener = new Button.OnClickListener(){
                     @Override
                     public void onClick(View v) {
                              setTitle("您的答案是："+((TextView)v).getText());
                     }
   };

   //為界面中的每個(gè)按鈕綁定上這個(gè)單擊監(jiān)聽器
   findViewById(R.id.Button01).setOnClickListener(listener);
   findViewById(R.id.Button02).setOnClickListener(listener);
   findViewById(R.id.Button03).setOnClickListener(listener);
}
}

復(fù)制代碼

下面是布局文件：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="center" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
      <textview android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/TextView01" android:text="杜鵑不啼，如何讓它啼？" android:textsize="20sp" android:layout_marginbOTTom="10dp">
      </textview>

      <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/Button01" android:text="殺之不足惜！" android:textsize="20sp">
      </button>

      <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/Button02" android:text="誘之自然啼！" android:textsize="20sp">
      </button>

            <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/Button03" android:text="待之莫須急！" android:textsize="20sp">
      </button>
</linearlayout>

復(fù)制代碼

再下面就是運(yùn)行效果：點(diǎn)擊某個(gè)按鈕之后，標(biāo)題欄發(fā)生變化：我們可以留意到 OnClickListener 是View的一個(gè)內(nèi)部接口，也留意到想更改某個(gè)Activity的標(biāo)題欄,可以用setTitle的方法直接設(shè)置。如果看源代碼的話我們也可以留意到Button是我們下面要講的TextView的子類，對句話你有個(gè)印象就行了。二、TextView 文本框我們在很早以前的例子里已經(jīng)開始使用，TextView這個(gè)組件，足可見他應(yīng)用之廣泛。它的用處就是顯示文本，它也是最基本的一個(gè)視圖組件。我們有必要看一下TextView的繼承關(guān)系：從上圖看到Button、EditText、CheckBox、RadioButton等等常用組件都是TextView的直接子類或間接子類，因此我們本講里TextView內(nèi)容雖然不多，但是這個(gè)組件大家還是要處處留意，逐步加深對TextView類的理解。下面我們舉一個(gè)例子，來看一下TextView，并認(rèn)識(shí)一下使用setMovementMethod()方法實(shí)現(xiàn)文本可滾動(dòng)，下面看代碼：

package android.basic.lesson9;

import android.app.Activity;
import android.os.Bundle;
import android.text.method.ScrollingMovementMethod;
import android.widget.TextView;

public class HelloTextView extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);

      //找到TextView組件
      TextView tv = (TextView)findViewById(R.id.TextView01);

      //設(shè)置移動(dòng)方法
      tv.setMovementMethod(ScrollingMovementMethod.getInstance());
}
}

復(fù)制代碼

main,xml代碼：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
<textview android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/TextView01" android:text="@string/hello" android:textsize="30sp">
</textview></linearlayout>

復(fù)制代碼

長長的關(guān)于馮諾依曼的文本我就不粘貼了，它定義在strings.xml文件里。下面是顯示效果：我們知道在TextView外層套一個(gè)ScrollView也可以實(shí)現(xiàn)文本滾動(dòng)的，同學(xué)們自己可以實(shí)現(xiàn)一下，然后對比其顯示效果有何不同（某一個(gè)帶滾動(dòng)條）。三、EditView 可編輯文本框我們通過一個(gè)例子來介紹一下EditView。1、新建一個(gè)項(xiàng)目，在main.xml中添加一個(gè)EditText。<EditText android:text="" android:id="@+id/EditText01"
android:hint="隨便輸點(diǎn)什么然后按回車" android:layout_width="fill_parent" android:layout_height="wrap_content"></EditText>其中，android:hint屬性就是沒有輸入內(nèi)容之前的提示內(nèi)容，hint英文的意思也是暗示之意。2、在onCreate()方法中添加如下代碼：

//找到xml中定義的EditText
final EditText et = (EditText) findViewById(R.id.EditText01);
et.setOnKeyListener(new View.OnKeyListener() {

      @Override
      public boolean onKey(View v, int keyCode, KeyEvent event) {
            //監(jiān)視硬鍵盤按鍵
            if(event.getAction()== KeyEvent.ACTION_DOWN && keyCode== KeyEvent.KEYCODE_ENTER){
                     //按住把EditView中的文版顯示在吐司消息中
                     Toast.makeText(MainHelloEditView.this, et.getText(),
                                    Toast.LENGTH_SHORT).show();
                     //返回true說明你已經(jīng)處理了這個(gè)事件并且它應(yīng)該就此終止，如果返回false就表示此事件還需要繼續(xù)傳遞下去
                     return true;
            }
            return false;
      }
});

復(fù)制代碼

3、運(yùn)行程序，輸入一些文字之后按回車鍵看看效果：有興趣的同學(xué)可以把toast后面的return true換成 return false看看效果，再按OK鍵呼出軟鍵盤試試。四、ImageView 圖片框，ImageButton 圖片按鈕我們通過一個(gè)例子來看一下ImageView和ImageButton的應(yīng)用。

package android.basic.lesson9;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.Toast;

public class MainHelloImageButton extends Activity {
      /** Called when the activity is first created. */
      @Override
      public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);

            // 找到xml中的ImageButton和ImageView
            final ImageButton ib = (ImageButton) findViewById(R.id.ImageButton01);
            final ImageView iv = (ImageView) findViewById(R.id.ImageView01);

            // 定義觸摸監(jiān)聽
            OnTouchListener otl = new OnTouchListener() {
                     @Override
                     public boolean onTouch(View v, MotionEvent event) {
                              switch (v.getId()) {
                              case R.id.ImageButton01:
                                    Toast.makeText(getApplicationContext(), "觸摸"+((ImageView)v).getId(),
                                                      Toast.LENGTH_LONG).show();
                                    break;
                              case R.id.ImageView01:
                                    Toast.makeText(getApplicationContext(), "觸摸"+((ImageView)v).getId(),
                                                      Toast.LENGTH_LONG).show();
                                    break;
                              }
                              return false;
                     }
            };

            // 定義點(diǎn)擊監(jiān)聽
            OnClickListener ocl = new OnClickListener() {
                     @Override
                     public void onClick(View v) {
                              Toast.makeText(getApplicationContext(), "點(diǎn)擊"+((ImageView)v).getId(),
                                             Toast.LENGTH_LONG).show();
                     }
            };

            // 綁定監(jiān)聽
            ib.setOnClickListener(ocl);
            ib.setOnTouchListener(otl);
            iv.setOnClickListener(ocl);
            iv.setOnTouchListener(otl);
      }
}

復(fù)制代碼

main.xml配置：

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

      <imagebutton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/ImageButton01" android:layout_marginbottom="10dp" android:src="@drawable/android_normal">
            </imagebutton>
      <imageview android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/ImageView01" android:src="@drawable/android_normal">
            </imageview>
</linearlayout>

復(fù)制代碼

運(yùn)行效果：通過這個(gè)例子大家可以體會(huì)一下OnTouch和OnClick事件之間的區(qū)別。五、CheckBox 選擇框我們也是使用一個(gè)例子來演示選擇框，請?jiān)谶@里例子里留意 onClickListener和onCheckedChangeListener的區(qū)別

package android.basic.lesson9;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.Toast;

public class MainHelloCheckBox extends Activity {
      /** Called when the activity is first created. */
      @Override
      public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);

            //聲明對象
            final CheckBox cb1 = (CheckBox) findViewById(R.id.CheckBox01);
            final CheckBox cb2 = (CheckBox) findViewById(R.id.CheckBox02);

            //聲明監(jiān)聽器
            OnClickListener ocl = new OnClickListener() {

                     @Override
                     public void onClick(View v) {
                                    if(!((CheckBox)v).isChecked()){
                                    Toast.makeText(MainHelloCheckBox.this, """+((Button)v).getText()+""被取消",
                                                      Toast.LENGTH_SHORT).show();
                                    }
                     }
            };

            OnCheckedChangeListener occl = new OnCheckedChangeListener() {

                     @Override
                     public void onCheckedChanged(CompoundButton buttonView,
                                    boolean isChecked) {
                              if(isChecked){
                                    Toast.makeText(MainHelloCheckBox.this, """+buttonView.getText()+""被選擇",
                                                      Toast.LENGTH_SHORT).show();
                              }
                     }
            };

            //綁定監(jiān)聽器
            cb1.setOnCheckedChangeListener(occl);
            cb2.setOnCheckedChangeListener(occl);
            cb1.setOnClickListener(ocl);
            cb2.setOnClickListener(ocl);
      }
}

復(fù)制代碼

main.xml的代碼：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
<textview android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/TextView01" android:text="選擇你想得到的東西：">
<checkbox android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/CheckBox01" android:text="得不到">
</checkbox>
<checkbox android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/CheckBox02" android:text="已失去">
</checkbox>
</textview></linearlayout>

復(fù)制代碼

行效果如下圖，點(diǎn)擊選擇和取消選擇都會(huì)觸發(fā)事件，做出消息提示，請留意之間的異同。六、RadioGroup and RadioButton 單選組和單選鈕在這一小節(jié)里，我們創(chuàng)建一個(gè)RadioGroup組件和他的兩個(gè)子元素RadioButton，實(shí)現(xiàn)單選效果。1、新建一個(gè)項(xiàng)目，打開res/layout/main.xml 添加如下代碼：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
<radiogroup android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="vertical">
<radiobutton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/radio_red" android:text="紅">
<radiobutton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/radio_blue" android:text="藍(lán)">
</radiobutton></radiobutton></radiogroup>
</linearlayout>

復(fù)制代碼

添加android:checked=”true”可以做一個(gè)默認(rèn)選中項(xiàng)，如果不增加的話默認(rèn)都不是選中狀態(tài)。（讀者可以試一下兩個(gè)單選鈕都設(shè)置了選中狀態(tài)時(shí)，會(huì)有什么結(jié)果，思考一下為什么是這樣。）2、在Acticity里處理一下點(diǎn)擊事件：

package android.basic.lesson9;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.RadioButton;
import android.widget.Toast;

public class MainHelloRadioGroup extends Activity {
      /** Called when the activity is first created. */
      @Override
      public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);

            final RadioButton radio_red = (RadioButton) findViewById(R.id.radio_red);
            final RadioButton radio_blue = (RadioButton) findViewById(R.id.radio_blue);

            OnClickListener ocl = new OnClickListener() {

                     @Override
                     public void onClick(View v) {
                     Toast.makeText(MainHelloRadioGroup.this, ((RadioButton)v).getText(), Toast.LENGTH_SHORT).show();

                     }
            };

            radio_red.setOnClickListener(ocl);
            radio_blue.setOnClickListener(ocl);
      }
}

復(fù)制代碼

3、運(yùn)行程序，查看結(jié)果：本講內(nèi)容比較多，例子也比較多，大家可以多做練習(xí)來加深理解和提高熟練度，并留意一些常用屬性的設(shè)置。這節(jié)課就到這里吧。

› 智能家居 / NAS / 路由 / 開發(fā) / 音響 › TV應(yīng)用開發(fā)交流

第九講：用戶界面 View（四）

第九講：用戶界面 View（四）

相關(guān)帖子