第二章 吸引你的眼球—UI編程（3）

標籤：android   經驗分享   布局   imageview   ui   

2.1.4圖片顯示—圖片視圖（ImageView）

如果一個介面全是由文字組成的，那這個介面一定是枯燥而乏味的。因此，在合適的位置，放上一些合適的圖片，不僅能大大增加介面的美觀，還能使你的應用更加吸引人。在Android中，要實現在介面上顯示圖片有很多種方法，在這裡，我們介紹一下最常用的圖片視圖組件（ImageView）。ImageView用來顯示任意映像圖片，我們可以自己來定義顯示的尺寸和顏色等。我們還是舉個例子來看看ImageView是怎麼使用的。

首先，在布局檔案中定義ImageView組件：

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent">     <ImageView         android:id="@+id/my_imageview"         android:layout_centerInParent="true"         android:layout_width="200dp"         android:layout_height="200dp"         android:src="@drawable/p06"/> </RelativeLayout>

 

在這裡，我們在布局檔案中定義了一個ID為my_imageview的ImageView組件。讓它在介面上顯示了一張p06.jpeg的圖片，這張圖片我們放在res/drawable目錄下。

如果我們不在布局檔案中設定圖片的話，我們也可以在代碼中來實現：

ImageView image = (ImageView)findViewById(R.id.my_imageview); mage.setImageResource(R.drawable.p06);

 

需要注意的是，我們也可以用android:background="@drawable/p06"來設定圖片。但是二者的使用又有區別：background會根據ImageView的長寬進行展開，而src就存放的是原圖的大小，不會進行展開。當然，它們兩個也可以同時使用。

下面，我們分別來看看src和background效果，2-9和2-10所示：

圖2-9 src效果

 

圖2-10 background效果

 

另外，ImageView中還有一些屬性也是需要我們注意的：

android:adjustViewBounds 是否保持寬高比。需要與maxWidth、MaxHeight一起使用，單獨使用沒有效果；

android:cropToPadding 是否截取指定地區用空白代替。單獨設定無效果，需要與scrollY一起使用 ；

android:maxHeight 定義View的最大高度，需要與AdjustViewBounds一起使用，單獨使用沒有效果。如果想設定圖片固定大小，又想保持圖片寬高比，需要如下設定：

1） 設定AdjustViewBounds為true；

2） 設定maxWidth、MaxHeight；

3） 設定設定layout_width和layout_height為wrap_content。

android:maxWidth 設定View的最大寬度。

android:scaleType 設定圖片的填充方式。

android:src 設定View的圖片或顏色

android:tint 將圖片渲染成指定的顏色。

 

經驗分享： 很多時候，我們設定圖片往往要給圖片設定透明度。src和background不同，設定圖片透明度的方法也略有區別。 當我們是用src來設定圖片的時候，我們在代碼中直接就可以通過 myImageView.setAlpha(int alpha)來設定； 而如果是通過background來設定圖片的話，我們就要先取得它的background然後再設定：myImageView.getBackground().setAlpha(int alpha)。

 

2.1.5多項選擇—多選框（CheckBox）和單項選擇—單選框（RadioBox）

1）多選框(CheckBox)

Android平台提供了CheckBox來實現多項選擇。我們需要注意的是，既然是多項選擇，那麼為了確定使用者是否選擇了某一項，我們就需要對多選框的每一個選項進行事件監聽。在這裡，我們也用一個簡單的例子來看看多選框是如何?的。

首先，我們建立一個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="match_parent"     android:layout_height="match_parent"> <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="請選擇你感興趣的運動"         android:textColor="@android:color/white"         android:textSize="20sp"/> <CheckBox         android:id="@+id/my_checkbox1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="遊泳"/>     <CheckBox         android:id="@+id/my_checkbox2"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="跑步"/>     <CheckBox         android:id="@+id/my_checkbox3"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="打球"/> </LinearLayout>

 

在這個布局檔案中我們定義了一個TextView組件、三個CheckBox組件，然後，我們將該布局檔案作為Activity的content view,效果2-11所示：

圖2-11 CheckBox的使用

 

在代碼中，我們可以分別對每一個CheckBox進行監聽：

CheckBox checkBox1 = (CheckBox)findViewById(R.id.my_checkbox1); CheckBox checkBox2 = (CheckBox)findViewById(R.id.my_checkbox2); CheckBox checkBox3 = (CheckBox)findViewById(R.id.my_checkbox3); checkBox1.setOnCheckedChangeListener(new OnCheckedChangeListener() {              @Override              public void onCheckedChanged(CompoundButton buttonView,                      boolean isChecked) {                  if(isChecked){                      Log.d("test", "checkbox1 is isChecked");                  }              }         }); checkBox2.setOnCheckedChangeListener(new OnCheckedChangeListener() {              @Override              public void onCheckedChanged(CompoundButton buttonView,                      boolean isChecked) {                  if(isChecked){                      Log.d("test", "checkbox2 is isChecked");                  }              }         }); checkBox3.setOnCheckedChangeListener(new OnCheckedChangeListener() {              @Override              public void onCheckedChanged(CompoundButton buttonView,                      boolean isChecked) {                  if(isChecked){                      Log.d("test", "checkbox3 is isChecked");                          }              }         });

 

這樣，我們對多選框的每一項都進行監聽後，就可以針對每一個相應的操作進行處理了。

 

2）單選框(RadioGroup、RadioButton)

單選框和多選框不同，一次只能選擇一個選項。Android平台提供了單選框的組件，可以通過RadioGroup、RadioButton組合起來實現單項選擇的效果。

同樣的，我們也以一個簡單的例子來加以說明。

首先，建立一個radio.xml布局檔案：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="match_parent"     android:layout_height="match_parent">     <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="請選擇您的性別"         android:textColor="@android:color/white"         android:textSize="20sp"/>     <RadioGroup         android:id="@+id/my_rediogroup"         android:orientation="vertical"         android:layout_width="wrap_content"         android:layout_height="wrap_content">     <RadioButton         android:id="@+id/radio_man"         android:layout_width="wrap_content"         android:text="男"         android:layout_height="wrap_content"         android:checked="true"/>     <RadioButton         android:id="@+id/radio_woman"         android:layout_width="wrap_content"         android:text="女"         android:layout_height="wrap_content"/>     </RadioGroup> </LinearLayout>

 

在這個布局檔案中我們定義了一個TextView組件、一個RadioGroup組裡面有兩個RadioButton組件，然後，我們將該布局檔案作為Activity的content view,效果2-12所示：

圖2-12 RadioButton的使用

 

可以看到，在一組RadioGroup中只能有一個RadioButton被選中。

RadioButton除了可以和CheckBox一樣進行監聽之外，我們還能單獨對RadioGroup進行監聽：

RadioGroup myRadioGroup = (RadioGroup)findViewById(R.id. my_rediogroup); myRadioGroup.setOnCheckedChangeListener( new RadioGroup.OnCheckedChangeListener() {                           @Override              public void onCheckedChanged(RadioGroup group, int checkedId) {                  switch(checkedId){                  case R.id.radio_man:                  Log.d("test", "man  is isChecked");                       Break;                                                     case R.id.radio_woman:                 Log.d("test", "woman is isChecked");                  break;                  }                  mHandler.sendMessage(mHandler.obtainMessage(REFLASH));              }         });

 

經驗分享： 我們要設定多選框的大小，並不能單純地通過設定CheckBox的android:layout_width和android:layout_height屬性來設定（如果只是這樣的設定，大家不妨試一試，只能顯示多選框的一部分形狀，而不是把整個多選框等比的縮放），而是需要為它設定一個樣式，並在樣式中為它設定圖片，例如： <style name="gl_task_checkbox" parent="@android:style/Widget.CompoundButton.CheckBox">         <item name="android:button">@drawable/圖片名</item> </style> 這樣的話CheckBox才能按照我們設定的大小來顯示。

第二章 吸引你的眼球—UI編程（3）