iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0
自我挑戰組

向Android APP開發說Hello系列 第 3

Day 3. VIEWS - ViewGroups (part.1)

今天來看看ImageView,以及如何配置簡單的Views。

ImageView

類似TextView,ImageView是用來放置圖片的視圖,如下XML:

  • android:src屬性中,drawable是要在Android顯示的graphic路徑,而cake是圖片檔案名稱(不含副檔名)。
    • 圖片路徑為:[專案資料夾]\Java2\app\src\main\res\drawable\
  • 其餘屬性的使用也類似TextView (都是繼承自View父類別的同樣屬性,往後文章會再提到)。
<ImageView
    android:src="@drawable/cake"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="center"/>

現在我們有了TextView與ImageView,如果要將它們擺在一起,這時就輪到ViewGroup登場了。

ViewGroups

ViewGroup將不同view組合在一起
這裡介紹兩種ViewGroup (parent view)

  • LinearLayout
    • 將children view依垂直或水平方向排列
  • RelativeLayout
    • 可定位children view相對於parent view內的位置
    • 可根據不同children view定位

我們先來試試看LinearLayout
此XML配置使用LinearLayout標籤將其他子views包起來,有幾點要注意的是:

  • xmlns:android屬性是一個命名空間宣告
    • 用於說明底下的屬性是屬於Android的,所以都以android:開頭,並可用於自訂屬性,避免相同屬性名稱但有不同行為,這是android獨有的XML格式。
    • 在XML開頭的標記應始終加入此宣告
  • layout_開頭的屬性(例如layout_height)實際上是交由parent view(父視圖)所控制並處理,而非子視圖本身的行為。
  • android:orientation屬性中,可設定為"vertical"(垂直)或"horizental(水平)排列"
<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:text="Happy Birthday to you!"
    android:background="#5E35B1"
    android:textColor="#E3F2FD"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:textAppearanceLarge"
    android:textStyle="bold"
    android:textAllCaps="true"/>

<ImageView
    android:src="@drawable/cake"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"/>
</LinearLayout>

https://ithelp.ithome.com.tw/upload/images/20181018/20107569RoQxfKVRq0.jpg

今天先到這邊,明天來試試看第二種parent view - RelativeLayout有什麼不同。


上一篇
Day 2. VIEWS - TextView篇
下一篇
Day 4. VIEWS - ViewGroups (part.2)
系列文
向Android APP開發說Hello30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言