參考《Professional Android 4 Development》

Android UI基本元素

下面這些概念是Android UI設計的基礎，深入學習和理解它們是Android UI設計的基礎：

• View：View是所有UI元素，包括Layout在內，的父類。
• View Groups：View的子類，實現了ViewManager介面。一個ViewGroup可以包含多個子View。
• Fragmengts：用於封裝UI的基本元素。Fragment有自己的layout配置檔案，可以接收使用者輸入，可以方便地適配不同的螢幕。
• Activity：用於表達android裝置的螢幕，Activity
  類似於Web開發中的Form表單。View等UI元素只有綁到Activity中才可以被使用者可見。

Android UI基礎

Android UI與Activity的繫結

最常用的方法是使用setContentView()將Layout ID或View物件傳到Activity中，例如：

@Override
public void onCreate(Bundle savedInstanceState) {
　　super.onCreate(savedInstanceState);
　　setContentView(R.layout.main);
}
@Override
public void onCreate(Bundle savedInstanceState) {
　　super.onCreate(savedInstanceState);
　　TextView myTextView = new TextView(this);
　　setContentView(myTextView);
 

　　myTextView.setText(“Hello, Android”);
}

同樣的，使用findViewById()方法可以通過View ID獲取View物件：

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

Layout簡介

Layout是ViewGroup的子類，用於描述和管理Android UI的佈局。Android自帶了很多Layout，常用的包括FrameLayout，LinearLayout，RelativeLayout和GridLayout。關於Layout的更多資訊，可以參考這個連結：

下面是一個Layout

<?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=”match_parent”
　　android:layout_height=”wrap_content”
　　android:text=”Enter Text Below”
　　/>
　　<EditText
　　android:layout_width=”match_parent”
　　android:layout_height=”wrap_content”
　　android:text=”Text Goes Here!”
　　/>
</LinearLayout>

wrap_content將View的高（或寬）設定為能包裹控制元件內容的最小值，而match_parent則使View儘可能地填充父容器。

Layout優化

<merge>: 由於Layout可以nest（疊加？）使用，所以有時會出現冗餘的Layout。一個常見的例子是使用FrameLayout建立一個單根的配置檔案，例如：

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
　　<ImageView
　　android:id=”@+id/myImageView”
　　android:layout_width=”match_parent”
　　android:layout_height=”match_parent”
　　android:src=”@drawable/myimage”
　　/>
　　<TextView
　　android:id=”@+id/myTextView”
　　android:layout_width=”match_parent”
　　android:layout_height=”wrap_content”
　　android:text=”@string/hello”
　　android:gravity=”center_horizontal”
　　android:layout_gravity=”bottom”
　　/>
</FrameLayout>

若將上面的layout新增到另一個Layout中，則會產生冗餘（redundant），更好的解決方式是使用<merge>標籤：

<?xml version=”1.0” encoding=”utf-8”?>
<merge xmlns:android=”http://schemas.android.com/apk/res/android”>
　　<ImageView
　　android:id=”@+id/myImageView”
　　android:layout_width=”match_parent”
　　android:layout_height=”match_parent”
　　android:src=”@drawable/myimage”
　　/>
　　<TextView
　　android:id=”@+id/myTextView”
　　android:layout_width=”match_parent”
　　android:layout_height=”wrap_content”
　　android:text=”@string/hello”
　　android:gravity=”center_horizontal”
　　android:layout_gravity=”bottom”
　　/>
</merge>

當使用<merge>標籤的配置檔案被嵌入到另一個檔案中時，<merge>標籤會被刪掉。<merge>標籤常和<include>一起使用，例如：

<?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”>
　　<include android:id=”@+id/my_action_bar”
　　layout=”@layout/actionbar”/>
　　<include android:id=”@+id/my_image_text_layout”
　　layout=”@layout/image_text_layout”/>
</LinearLayout>

使用ViewStub

ViewStub是View的子類，使用類似Lazy Load的方式載入，從而節省了系統資源。在程式碼中使用：

// Find the stub
View stub = findViewById(R.id. download_progress_panel_stub);
// Make it visible, causing it to inflate the child layout
stub.setVisibility(View.VISIBLE);
// Find the root node of the inflated stub layout
View downloadProgressPanel = findViewById(R.id.download_progress_panel);

配置檔案：

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout “xmlns:android=http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
　　<ListView
　　android:id=”@+id/myListView”
　　android:layout_width=”match_parent”
　　android:layout_height=”match_parent”
　　/>
　　<ViewStub
　　android:id=”@+id/download_progress_panel_stub”
　　android:layout=”@layout/progress_overlay_panel”
　　android:inflatedId=”@+id/download_progress_panel”
　　android:layout_width=”match_parent”
　　android:layout_height=”wrap_content”
　　android:layout_gravity=”bottom”
　　/>
</FrameLayout>