2017年9月17日 星期日

Xamarin Forms 常用View的介紹

前言:
  • Xamarin Forms可以讓你寫一次code就可以同時製作出Android、IOS、Windows Phone,甚至是可以在PC、HoloLens、Xbox上面跑的Windows App,相當的方便!其跨平台所帶來的好處不言而喻,但同時也會造成一些問題:
  1. 開發環境建置門檻高
    • 由於牽涉到多種平台的聯繫,等於需要對各種平台都要有相當的了解才知道怎麼設定。這個問題相較於以前已經減輕很多
  2. 功能性
    • 每個平台都有各自的功能,Xamarin Forms只能取其交集,對於Xamarin Forms不提供的特定功能只能針對該平台單獨實作。問題在於你可能不了解該平台,因此不知道該如何實作
    • 同時,身為新技術,Xamarin Forms的確也還沒實作完「全部的交集」,某些功能在每個平台都有提供,但Xamarin Forms卻還未提供該功能,這時也會需要針對各個平台分別實作。這個問題已經改善很多,在未來也會持續改進
  3. 相容性
    • 每個平台皆可獨立於Xamarin Forms之外自行更新,但這常常造成Xamarin Forms對於該平台的相容性問題,建議不要隨意升級各個平台的套件,由Xamarin Forms統一管理其升級事宜。這個問題相較於以前已經減輕很多

名詞解釋:
  • View:通常是一個長方形的東西,有的可以在上面顯示文字、圖片、進度或任何你想顯示的東西,有的用手指點一下會有反應 (「按鈕」就是一種View),有的可以用來輸入文字
  • Layout:是一種View,也是一個長方形的東西,塞很多的View進去是它唯一的功能,但Layout很重要,因為沒有Layout你就不能在同一個畫面中放超過一個View。Layout通常是隱形的,你只能看到它怎麼將塞進它裡面的View排列在畫面上,而不能直接看到Layout本身
    p.s. 以下介紹中Layout會用斜體+粗體表示

接下來就按照使用程度來介紹前10名小莫常用的View吧~


  1. Button
    • 這大概是最親民的View了吧,因為用手指戳它會有反應XD
      新手入門可以從Button開始玩起
    • Debug的時候很好用,可以用來觸發某段測試程序
    • 常用的
      • 屬性:Text
      • 事件:Clicked
  2. StackLayout
    • 想要將多個View放進同一個畫面,可以從StackLayout下手~它會幫你將View由上而下排得整整齊齊的XD
    • 常用的
      • 屬性:Children, Orientation
  3. ScrollView
    • 當一個View太大,比一個螢幕的大小還大,要怎麼辦呢?讓它可以用手指滑動是一個好選擇,就把它塞進ScrollView裡面吧~ScrollView是一個比較特別的Layout,它只能塞一個View進去
    • 常用的
      • 屬性:Content
  4. Editor
    • 想要一個可以打字的地方嗎?那就非Editor莫屬了!
    • 常用的
      • 屬性:Text
  5. Image
    • 想要顯示一張圖片嗎?那就非Image莫屬了!
    • 常用的
      • 屬性:Source
  6. ActivityIndicator
    • 如果程式正在下載一個檔案,或者進行一個龐大的計算,要很久,怎麼辦?顯示一個圈圈轉轉轉,或者一堆點點跑跑跑,讓使用者更心煩(X)紓壓(O)吧~
    • 常用的
      • 屬性:IsRunning
  7. Label
    • 想要顯示文字?不想像Button一樣被戳會有反應,也不想像Editor一樣可以編輯文字。哦,那就用Label吧!除了用來顯示文字之外,甚麼事都不能做!XD
    • 常用的
      • 屬性:Text
  8. Entry
    • 這是一個只能輸入一行的Editor,這有甚麼用?方便的很呢,這樣使用者平常按換行 (Enter) 的那個鍵就可以用來當作「輸入完畢」鍵了!
    • 常用的
      • 屬性:Text, Placeholder, IsPassword
      • 事件:Completed
  9. Grid
    • 要怎麼把View排成九宮格呀?看看那邊~Grid正在對你偷笑!^_^
      除了做出九宮格之外,Grid的強大排版功能可不只你想的那樣!
    • 警告:GridLength.Auto不可濫用,100個Auto會拖慢你的App至少0.5秒!
    • 常用的
      • 屬性:RowDefinitions, ColumnDefinitions
  10. ProgressBar
    • ProgressBar就是進度條,使用時機和ActivityIndicator類似,但是多了「顯示進度」的功能
    • 說的容易做起來難,你在寫程式的時候要怎麼讓程式知道自己跑了幾趴(%)?OwO
      各顯神通吧XD
    • 常用的
      • 屬性:Progress
      • 方法:ProgressTo


更多View的介紹請見Xamarin Forms官方網站 (全英文)
圖片來源:ViewsLayouts

沒有留言:

張貼留言

歡迎留言或問問題~
若您的留言中包含程式碼,請參考這篇
如果留言不見了請別慌,那是因為被google誤判成垃圾留言,小莫會盡快將其手動還原

注意:只有此網誌的成員可以留言。