在一個UI 設計中，我們要在Button的左邊設計icon
原本使用Button的屬性android:drawableLeft來設計，但是相對位置上非常難調整成UI 設計人員所制定的位置。
後來使用RelativeLayout並加上ImageView, Button的設計
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <RelativeLayout
android:id="@+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/bt_logout"
style="@style/MenuButtonStyle"
android:layout_below="@+id/relativeLayout2"
android:layout_marginTop="200dp"
android:layout_centerHorizontal="true"
android:text="@string/logout"
android:gravity="center"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@id/bt_logout"
android:layout_alignTop="@id/bt_logout"
android:layout_marginLeft="24dp"
android:layout_marginTop="17dp"
android:src="@drawable/log_out"/>
</RelativeLayout>
|
發現ImageView會被Button所覆蓋。
原因是Android制定Button的Z-Order的層級比ImageView高，所以Button總是在ImageView的上方。
替代方案
由於Button是繼承TextView，而TextView和ImageView為同層級，所以我們可以將Button換成TextView，便可讓ImageView疊在TextView的上方了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <RelativeLayout
android:id="@+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/bt_logout"
style="@style/MenuButtonStyle"
android:layout_below="@+id/relativeLayout2"
android:layout_marginTop="200dp"
android:layout_centerHorizontal="true"
android:text="@string/logout"
android:gravity="center"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@id/bt_logout"
android:layout_alignTop="@id/bt_logout"
android:layout_marginLeft="24dp"
android:layout_marginTop="17dp"
android:src="@drawable/log_out"/>
</RelativeLayout>
|