iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
1

  今日一開始來小試身手,在 logo 右側加入一個 TextView,設定左下右如下圖的約束:

https://ithelp.ithome.com.tw/upload/images/20181031/20111944Xi5gE8G4gs.png

  再快速的新增三個圖示進來,這裡介紹 Chains,用一個水平鏈將這三個圖示串在一起,鏈可以切換三種模式,如下圖 1、2、3 展示的三種水平間隔型態:

https://ithelp.ithome.com.tw/upload/images/20181031/20111944i1Z3TidxT8.png


  下一步,嘗試將上方與其他元素的底部指定約束,會發現只有一個會跟著變動:

https://ithelp.ithome.com.tw/upload/images/20181031/20111944qOuUbPvcJB.png

  這時可全選三個物件利用 Align > Vertical Centers 將三個以垂直置中的方式限制:

https://ithelp.ithome.com.tw/upload/images/20181031/201119446UFtwFQMV5.png

https://ithelp.ithome.com.tw/upload/images/20181031/20111944HGFzPtbEkz.png

  再來就能夠指定對上方的約束條件,這裡你可能會直覺的從中間拉一條線上去,但實際上你會發現如下圖一樣的偏移,由於三個元件互相約束的關係,必須指定最後一個建立與上方的關聯,如圖二就能夠符合預期的排版結果,若需要加大與上方的空間,也是從最後一個元件設定即可。

https://ithelp.ithome.com.tw/upload/images/20181031/20111944R3rgG5GAbC.png

https://ithelp.ithome.com.tw/upload/images/20181031/20111944BAdGDJ1W18.png

  截至目前為止的成果:

https://ithelp.ithome.com.tw/upload/images/20181031/20111944GGDtCuxWRE.png


  下一步驟要來實作使用 ratio 進行比例排版,首先挑選四張 PNG 圖檔放到 res > drawable 資料夾底下,記得圖檔名稱一定要以英文字母開頭,否則會發生下面錯誤訊息:

https://ithelp.ithome.com.tw/upload/images/20181031/201119448LBbu1wIC3.png

  這四張圖檔我們將 ratio 設定成 1:1,在將四張圖檔彼此鏈結起來,使用水平與垂直鏈結 (可以先分兩次設定水平鏈結,在分兩次設定垂直鏈結),再給予四邊適當高度,這邊就交給大家自由發揮,記得將 ImageViewlayout_widthheight 都設定為 match_constraint,讓條件約束決定實際的大小。

https://ithelp.ithome.com.tw/upload/images/20181031/20111944zIiNZQbyx0.png

  接著可以在進階屬性中設定 Theme 中的 alpha 透明度,記得以小數表示;另外你的圖片原始檔有可能不是 1:1 ,你可以調整 scaleType 讓圖形呈現依照此設定修正。

https://ithelp.ithome.com.tw/upload/images/20181031/20111944hJ0M2YN1PV.png


  最後要介紹的是圖形圓角以程式碼方式實作,在下圖中Line: 19~23 設定了一個迴圈,分四次設定 ImageView,Line: 20 => resources.getIdentifier() 目的是以字串方式提供 imageViewid (這邊我們在設計畫面將四個分別設為 photo1photo2...)。

  Line: 21 => findViewById 則是依照剛指定的 redID 取得 ImageView 物件,在將此物件傳入方法中進行處理。

  Line: 29 => 宣告了一方法,接受 ImageView 型態的傳入,再來是將 view 上的原始圖檔取出、轉化為 rounded,這些過程於 Line: 27~28 處理。接著就可以設定圓角參數 cornerRadius,單位是 f 數值越大,角度越圓,也可直接設定 isCircular 就會變成圓型。最後再將 rounded 設定回 imageView 就完成了。

https://ithelp.ithome.com.tw/upload/images/20181031/201119447fdMSTKSEY.png


  需特別注意的一點,若原始圖檔並非正方形,而在設計界面硬撐為 1:1 時,因為圓角效果是取原始圖檔製作,所以在最終呈現結果會與預期產生落差,各位可以試試。成功的執行結果如下:

https://ithelp.ithome.com.tw/upload/images/20181031/20111944dkqWlKa8ZQ.png

  這三天的章節專注於同一尺寸設備的排版,但在實務設計上,你應該需要針對手機/平板/TV 設計進行特別設計,你可以透過模擬機將剛剛完成的成果進行螢幕旋轉 90 度,你會發現視覺效果跟你的原先設計會產生落差,這部份我們將在下一章節介紹,明天見!


資料參考

線上向量圖示庫
https://www.flaticon.com/

Get Bitmap from ImageView in Android L
https://stackoverflow.com/questions/26865787/get-bitmap-from-imageview-in-android-l/27030439

Android: Using findViewById() with a string / in a loop
https://stackoverflow.com/questions/4865244/android-using-findviewbyid-with-a-string-in-a-loop


上一篇
Day 16. Android Layout 版面設計-2/4
下一篇
Day 18. Android Layout 版面設計-4/4
系列文
Kotlin for Android30

尚未有邦友留言

立即登入留言