2013/4/26

常用View之使用技巧

張貼者： Nason 於 凌晨12:21

Android在UI設計之元件佈局(Layout)是採用xml方式來安排，依此作法可達到跨平台的需求外，另可與主要運作之程式碼作切割分離，這種設計模式已是目前物件導向程式設計之主流技術，底下將常於程式中使用之View作一系列介紹，此篇文章最主要可作為未來使用其它進階View元件基礎概念之養成：
排版(Layout)：
在Layout中安排多個widget時，若最後一個widget採用fill_parent，則此元件將填滿剩餘的空間；但若非為最後一個且採用fill_parent，則其後面安排的widget將無法顯示，此fill_parent意義為填滿父層(即上 一層)Layout剩餘之所有空間。
Eclipse中自動提示功能
一般在Eclipse開發環境下使用xml配置 widget屬性時均會自動帶出其下可使用功能之提示，倘若因某些原因致使自動提示功能消失無法及時動作(如按了滑鼠)，此時可採用Atl+/的方式啟動提示功能。
        接著將常見之View分別敘述如下：
Ø   TextView及Label
        其在xml中之常見屬性如下：
n   android:typeface：字體，如monospace等
n   android:textStyle：字型，如bold、italic或bold|italic等
n   android:textColor： 字體顏色，如#FF0000或red等
n   android:textSize：字體大小，一般可使用px或dip作為尺寸單位。px指的是圖元(pixel)，dip指的是一種基於螢幕密度的抽象單位(在每英寸160點的顯示器上，1dp = 1px)，採用dip可以無須考慮圖元是否密集，而可獲取我們期待的實際大小，故推薦使用dip。
n   android:gravity：排列方式，如center、left或right等
n   android:background：背景色，採用RGB方式
n   android:singleLine：可否允許顯示多行文字，值可為false或true。
Ø   Button
          其在xml中之常見屬性如下：
  <Button
      android:id="@+id/btn"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:onClick="btnClickAction"   <!—此”btnClickAction”為實作觸發事件之方法名稱-->
      />
若依上述指定必要屬性，則在代碼中無須在Activity類別中implement interface，只要直接在其類別中撰寫其觸發事件public void <method_name>(View v)之處理動作即可，如下所示：
......
import android.view.View;
public class ActivityDemo extends Activity{
    public void btnClickAction(View button){
        ... ...
    }
}
Ø   ImageView和ImageButton
 此分別對應上述所言之TextView和Button功能，只是額外帶有Image圖形之功用，其在xml中之常見屬性如下：
  <ImageView
      android:id="@+id/mylanscape"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
     android:adjustViewBounds="true"
      android:src="@drawable/圖形檔名"      <!—指定圖片來源，亦可以setImageURI()代碼型式來指定圖形來源之URI位置來實現載入-->
      />
  ØEditText
其在xml中之常見屬性如下：
   <EditText
       android:id="@+id/myfield"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:singleLine="false"    <!-- 表示是否可輸入多行 -->
        android:autoText="false"       <!-- 是否自動進行拼寫檢驗-->
         addroid:capitalize="false"  <!-- 是否將英文字詞中第一個字母自動改為大寫，此適用於一般名詞之取用，如城市名-->
          andriod:digits="false"   <!-- 是否只允許數字輸入-->
      />  
Ø   CheckBox
         CheckBox和下一個元件RadioBox均是繼承於CompoundButton抽象類別，
而CompoundButton則繼承TextView，其在xml中之常見屬性如下：
  <CheckBox
      android:id="@+id/mycheckbox"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="display-text"
      />
至於checkcbox常用函數有如下：
u  isChecked()：判別選項狀態是否被選取
u  setChecked()：設定選項為選取狀態
u  toggle()：改變選取狀態，如為checked則變成unchecked，反之亦同。
當CheckBox狀態被更動則會觸發事件進行後續處理動作，如下所示：
public class AndriodDemo extends Activity implements CompoundButton.OnCheckedChangeListener{
    private CheckBox mycheckbox = null;
    @Override
    public void onCreate(Bundle savedInstanceState){
        ... ...
        mycheckbox = (CheckBox)findViewById(R.id.mycheckbox);
        mycheckbox.setOnCheckedChangeListener(this);
    }

    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked){
           mycheckbox.setText("This checkbox is : " + (isChecked ? "checked" : "unchcked"));
    }
}
Ø   RadioButton
RadioButton在外觀處理上與前述之CheckBox略有不同，在應用上通常會將同類型功用群組化成為同一個Group，而在此Group中只能指定一個RadioButton可處於checked狀態，其在xml中之常見屬性如下：
  <RadioGroup
      android:id="@+id/myradiogroup"
      android:orientation="vertical"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content" >
        <RadioButton android:id="@+id/radio1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text ="Radio Text One" />
        <RadioButton android:id="@+id/radio2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text ="Radio Text Two" />
        <RadioButton android:id="@+id/radio3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text ="Radio Text Three" />
  </RadioGroup>
欲於程式中操作RadioGroup中之RadioButton，可使用如下之常見方法：
u  check()：如radiogroup.check(R.id.radiobtn1))將指定R.id.radiobtn1對應之RadioButton項設為選取狀態
u  clearCheck()：清除所有選擇為unchecked狀態
u  getCheckedRadioButtonId()：取得選擇RadioButton的ID，若無時則返回-1。
        如在下例中，將前述之CheckBox例子增加RadioButton
public class HelloAndriod extends Activity  implements CompoundButton.OnCheckedChangeListener, RadioGroup.OnCheckedChangeListener{
    private RadioGroup myradiogroup = null;
    public void onCreate(Bundle savedInstanceState){
        ... ...
        myradiogroup = (RadioGroup)findViewById(R.id.myradiogroup);
        myradiogroup.setOnCheckedChangeListener(this);
    }
   ... ...
    public void onCheckedChanged(RadioGroup  group, int checkedId){
           int radioId = myradiogroup.getCheckedRadioButtonId();
           if(radioId < 0 )
               myTextView.setText("No RadioButton is selected");
           else{
               RadioButton rb = (RadioButton)group.findViewById(radioId);
               myTextView.setText("radio button: " + rb.getText());
           }
     }
}
Ø   View
上面所述之常用widget都是繼承View類別所延伸出來的子類別，其均可在xml中定義相依於View之相關屬性，如：
android:visibility="invisible"：定義widget成為不可見，但是保留其所占的位置，但若為"gone"，則為不保留位置。
至於與顏色相關的android:background，除可直接指定顏色之具體數值代碼，如android:background="#0000ff"，亦也可指定為圖片，如android:background="@drawable/picture"(此picture為圖片檔名)，但須注意：若使用在CkeckBox或Radiobutton時則需考慮圖片的大小。
另TextView及其繼承類別可以使用android:textColor="#00ff00"指定text文本的顏色外，亦可採用ColorStateList陣列方式來設定其位處不同情況下之text呈現顏色，使用作法可先在res/layout/目錄下新增一個Android XML檔button_color.xml，其設定內容可參考如下所示，分別指定widget位處不同狀態下之顏色變化進行描述：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#00ff00" android:state_focused="true"/>
    <item android:color="#ff0000" android:state_pressed="true" />
    <item android:color="#0000ff" android:state_pressed="false" />
</selector>
此定義顏色變化之選擇從上至下是具有優先順序的，若將state_focused放置在最後，則並不起作用，因為會先執行了state_pressed="false"的顏色。除上述之狀態定義外，其它相關的狀態有state_selected, state_active, state_checkable, state_checked, state_enabled, state_window_focused。
完成之後即可在main.xml，對相關的widget增加如下屬性：
                     android:textColor="@layout/button_color"     //此button_color為之前定義在res/layout下之button_color.xml檔名
 由於繼承View故亦可使用View定義之方法，其中與UI相關之常用方法有：setEnabled(), isEnabled(),requestFocus(),isFocused()等，而定義在容器中獲取widget實例之相關方法有：getParent()，findViewById(),getRootView()等,其使用概念可透過字義上即可明暸其應用技巧。

 

0 意見:

張貼留言

訂閱： 張貼留言 (Atom)