Android-使用者介面

說明

Andorid有兩種方式可以建立使用者介面，分別為宣告式(declarative)與程式設計式(programmatic)。

宣告式就是直接編輯xml檔案，撰寫特定的tag來指定畫面上要出現的元件，此方式類似於使用HTML來建立網頁。宣告式最大的好處是可以使用「所見即所得」(what you see is what you get, WYSIWYG)的編輯工具，快速的建立使用者介面。

程式設計式就是使用java程式碼來開發使用者介面，與java AWT, java Swing的開發方式雷同。好處是可不受任何限制，但缺點是要自己宣告、設定屬性(如文字、顏色、背景等)。

但一般不會單獨使用一種方式開發，幾乎都是兩者混用，先用宣告式繪製大致的畫面，需要動態調整與事件處理的部分在用程式設計式補足。

View & ViewGroup

Android將使用者介面分為View與ViewGroup兩大類，View是所有Android UI的基礎類別，ViewGroup是View的子類別，是設計用來容納View的容器(Container)並可運用成版面配置(Layout)，ViewGroup裡面又可以有View和ViewGroup。如下圖所示：

資料來源：http://developer.android.com/intl/zh-tw/training/basics/firstapp/building-ui.html

之後會逐一介紹以下的使用者介面元件：

View 

• TextView
• ImageView

ViewGroup

• LinearLayout
• TableLayout
• FrameLayout
• RelativeLayout
• AbsoluteLayout

Android-取得螢幕大小

說明

雖然Andorid可以設定隨視窗大小縮放畫面元件，但程式設計師還是必須知道螢幕的真實尺寸，以處理在Layout上的細節問題。

在Andorid中，取得螢幕尺寸的Class為android.util.DisplayMetrics。

範例程式：
TextView textView = (TextView)this.findViewById(R.id.textView);

DisplayMetrics displayMetrics = new DisplayMetrics(); 
this.getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);

String px = displayMetrics.widthPixels + " x " + displayMetrics.heightPixels;
String dp = displayMetrics.xdpi  + " x " + displayMetrics.ydpi;
String density = "densityDpi = " + displayMetrics.densityDpi + ", density=" + displayMetrics.density + ", scaledDensity = " + displayMetrics.scaledDensity;

textView.setText(px + "\n" + dp + "\n" +density); 

關於px, dp, dpi的說明，可以參見Android-長度單位(px, dp, sp)。

Android-長度單位(px, dp, sp)

• px (pixel):  就是我們最常用的螢幕解析度(如1024x768, 800x600等解析度單位就是px)，是螢幕的實體像素，以RGB螢幕來說，是三原色合成的一個彩色點，就是1 px。

但px單位不被建議使用，因為不同的手機/平板可能具有不同的像素密度，例如同為4吋的手機，有480x320解析度的也有800x480解析度的，前者的像素密度就比較低。若同樣是480x480px的圖片，在不同手機上顯示的實際大小可能不同。 為了說明px像素與螢幕實際大小的關係，需要先了解另一個名詞dpi(dot per inch)，其表示在1英吋有幾個點。160dpi就表示1英吋的長度中，會有160個pixel。

以同樣480px寬度的圖片為例，在120dpi, 160dpi, 240dpi, 320dpi的大小如下表：


pixel	dpi	計算式	實際長度
480	120	480/120	4.0 英吋
480	160	480/160	3.0 英吋
480	240	480/240	2.0 英吋
480	320	480/320	1.5 英吋

• dp(另一縮寫為dip, Density-Independent Pixels):  正因為使用像素px為長度單位，會有上述的問題。Android使用了dp的單位，直接翻譯叫"與(像素)密度無關的像素"，就是想要有一種數字單位，在不同的dpi手機/平板下，實際長度會一樣。
  
  讓我們來看看Andoid解決如何這個問題的方法的吧！首先，它將常用的幾個dpi列出來，有ldpi (low)為120dpi, mdpi (medium)為160dpi, hdpi (high)為240dpi, xhdpi (extra high)為320dpi。
  
  其次，Andoid以mdpi(160dpi)為基礎，定義在160dpi的環境時，1dp=1px，其他的dpi在跟160dpi作乘法的換算。
  

  dp	dpi	density	pixel	計算式	實際長度
  480	120	120/160=0.75	480*0.75=360	360/120	3.0 英吋
  480	160	160/160=1.0	480*1.0=480	480/160	3.0 英吋
  480	240	240/160=1.5	480*1.5=720	730/240	3.0 英吋
  480	320	320/160=2.0	480*2.0=960	960/320	3.0 英吋

  
  所以使用dp為長度單位，可以在不同的dpi手機/平板下，實際長度會一樣(但因為實際的dpi有時會有四捨五入問題，精確的說是"接近")。

• sp(Scale Independent Pixels):  觀念跟dp一樣，只要用在設定字體大小，但它也可以根據使用者設定的字體大小再作放大縮小。在160dpi的環境時，1sp=1dp=1px。

Android-自定樣式(style)

說明

Andorid專案開發的過程中，會有許多樣式是一再重複使用的，老是一個一個UI元件去設定文字背景的顏色、字型、大小等，是一件毫無效率又容易出錯的事情，與HTML的CSS相似，Andorid也容許使用者預先制定樣式(style)，作法是新增或修改styles.xml於res/values/styles.xml下，範例如下：
<?xml version="1.0" encoding="utf-8"?>

<resources>
    <style name="textViewStyle1">
        <item name="android:textColor">#FF0000FF</item>
        <item name="android:background">#FFFF0000</item>
    </style>    
</resources>

若有自訂顏色於res/values/color.xml下時，亦可在styles.xml直接使用，範例如下：
<?xml version="1.0" encoding="utf-8"?>

    <style name="textViewStyle1">
        <item name="android:textColor">@color/blue</item>
        <item name="android:background">@color/red</item>
    </style>    

以下為以TextView設定樣式的範例：
<TextView
        style="@style/textViewStyle1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="藍底紅色" />

Android-設定文字或背景顏色

說明

Andorid的顏色表示法(#AARRGGBB)與HTML的的十六進位的RGB顏色表示法(#RRGGBB)類似，但前面多了兩碼為AA為alpha值來表示透明度，00表示是完全透明；FF表示是完全不透明。

若不想指定透明度也可以直接用#RRGGBB的方式來設定，此時alpha值為FF，如#FF0000(=#FFFF0000)表示紅色、#00FF00(=#FF00FF00)表示綠色、#0000FF(=#FF0000FF)表示藍色、#000000(=#FF000000)表示黑色、#FFFFFF(=#FFFFFFFF)表示白色。


以下以TextView設定背景顏色為紅色的範例：
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#FFFF0000"
    android:text="紅色" />

程式寫法為：
textView.setBackgroundColor(0xFFFF0000);

Andorid內建的顏色

Android有一些已經預先定義好的常見顏色，設定在android.graphics.Color的Class中：

常數	色碼	顏色
android.graphics.Color.BLACK	#FF000000
android.graphics.Color.WHITE	#FFFFFFFF
android.graphics.Color.RED	#FFFF0000
android.graphics.Color.GREEN	#FF00FF00
android.graphics.Color.BLUE	#FF0000FF
android.graphics.Color.GRAY	#FF888888
android.graphics.Color.LTGRAY	#FF444444
android.graphics.Color.DKGRAY	#FFCCCCCC
android.graphics.Color.YELLOW	#FFFFFF00
android.graphics.Color.CYAN	#FF00FFFF
android.graphics.Color.MAGENTA	#FFFF00FF
android.graphics.Color.TRANSPARENT	#00000000	透明

自訂顏色

Andorid專案開發的過程中，會有許多顏色是需要一再重複使用的，比較好的作法集中定義這些顏色，作法是新增color.xml於res/values/color.xml下，範例如下：
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="red">#FFFF0000</color>
    <color name="green">#FF00FF00</color>
    <color name="blue">#FF0000FF</color>
    <color name="gray">#FF888888</color>
    <color name="ltgray">#FF444444</color>
    <color name="dkgray">#FFCCCCCC</color>
    <color name="yellow">#FFFFFF00</color>
    <color name="cyan">#FF00FFFF</color>
    <color name="magenta">#FFFF00FF</color>
    <color name="transparent">#00000000</color>
</resources>

上述以TextView的範例可以改為：
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/red"
    android:text="紅色" />