iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 16
0
Software Development

Kotlin for Android系列 第 16

Day 16. Android Layout 版面設計-2/4

  在預設的版面設計上,會有一個動作列如下圖左邊所示,此項目主要用於放選單、查詢、排序...等等,一些介面操控功能,或是顯示目前使用者所在的動作頁面,各位不妨打開手機查看如:Gmail、Google 雲端硬碟參考相同位置的設計。

https://ithelp.ithome.com.tw/upload/images/20181030/20111944ASXu0Psnbo.png

  若應用程式架構很單純,例如只有單一功能頁面,你可以透過 app > res > values > styles.xml 修改 style: parent 的值,將 DarkActionBar 改成 NoActionBar,再回到 activity_main.xml 的設計畫面,就能看到動作列已經取消,請務必確認對使用者操作體驗不會造成困擾再將動作列取消。

https://ithelp.ithome.com.tw/upload/images/20181030/20111944PH4XLANeCv.png

  修改應用程式主視覺色碼參考的方法,在之前的章節有提到過,路徑在:app > res > values > colors.xml,這邊就不再重複說明。


  接著進行多重物件的排版練習,首先加入一個 ImageView,這裡可以各位可以先依照下列需求描述,試著自己調整,檢驗概念是否正確,作者的參數設定都會以圖片方式呈現供參考。第一個 ImageView 我們把它當成橫幅的背景,位置切齊最上方,寬度滿版,需要 120dp 的高度並且將背景色設為跟狀態列一樣。

https://ithelp.ithome.com.tw/upload/images/20181030/20111944c0WW8knnl0.png

  解答如下圖所示,看看您的概念是否相同吧!

https://ithelp.ithome.com.tw/upload/images/20181030/20111944IMZgK82DN2.png


  下一步我們加入三個向量圖,首先要將圖檔放入資源庫中,在第一個 App 的章節有提到,若忘記的話,可從 res 右鍵 > New > Vector Asset,挑選並加入三張圖示,並將第一張設為 75 x 75,其餘兩張為 50 x 50,顏色自行配置。

  再來將三個 ImageView 加入到版面,指定 Drawable > Project > 中的三個圖檔,若這個階段卡住無法成功,可以回到 Day 03 的教學查看詳細說明。

https://ithelp.ithome.com.tw/upload/images/20181030/20111944EI5z4HgwIS.png


  接續調整三個圖示的位置,我們想要將 ***android 圖示***相對於橫幅進行垂直水平置中,你可透過該物件的四邊原點直接拖曳至橫幅的四邊參考點,或於屬性視窗設定,注意將 Margin 的部分設為相同 (0 or 8),才能絕對置中。

https://ithelp.ithome.com.tw/upload/images/20181030/20111944xqbFUsmdK0.png


  下一步給各位一個考驗,要如何調整成下列的結果呢?

https://ithelp.ithome.com.tw/upload/images/20181030/20111944WxZKW2r6FF.png


  這邊是採用與中間的圖形做約束,以左邊的讚來說,先將右側增加一個 Margin 24dp,再把底部拉一條線到 ***android 圖示***的底部,這邊的意思是以底部當作對齊約束。

https://ithelp.ithome.com.tw/upload/images/20181030/20111944zyXaVnT3ta.png

  完成後別忘了執行看看,檢視一下最終畫面是否正確呈現,有時候約束設計錯誤在設計視窗上看到的,與在模擬器上執行的結果會不一樣,記得每完成一個階段,就使用模擬器測試一下。

https://ithelp.ithome.com.tw/upload/images/20181030/20111944a2EKCUW683.png


  下一步驟示範如何加入外部向量圖 (自己設計或網路下載的 SVG 檔),同樣透過 res 按右鍵選擇 vector asset,這次選擇 Local file,在路徑的部分指定電腦上的圖檔位置,按下 OK 就簡單完成匯入圖檔的步驟,後續同樣新增一個 ImageView 裝入此向量圖。

https://ithelp.ithome.com.tw/upload/images/20181030/20111944NTxkMjNvPT.png

  這裡要介紹一個將圖檔以圓角方式呈現的其中一種方法,不透過程式碼修改,純粹以排版方式達到圓角的效果 (當然你可以直接設計圓角的 SVG),剛剛匯入的 SVG 圖檔是四邊形,作者從 Wikimedia 下載了一張 Kotlin logo 的圖形,但匯入到 Android Studio 後,你會發現在設計版面上看到的圖形是不完全的,但執行模擬機右是正常顯示 (右圖),這點特別列出來提醒大家。

https://ithelp.ithome.com.tw/upload/images/20181030/201119445QHBQ5WxVg.png


  要達到圓角效果,我們需要從工具箱加入一個 Layouts > FrameLayout 元件,接著在 **res > drawable **點右鍵新增下圖所示的檔案,接下來出現的視窗只要命好名稱:frame,其他選項都不用理會,確認後就會在資料夾出現一個 xml 檔。

https://ithelp.ithome.com.tw/upload/images/20181030/20111944eACMhsuWfj.png

  打開該檔案,並且切換到 Text 編輯模式,在將以下內容完全取代,若需要調整框的顏色可以在 color= 的地方調整:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
     <solid android:color="#00ffffff" />
     <padding android:left="6dp"
        android:top="6dp"
        android:right="6dp"
        android:bottom="6dp" />
     <corners android:radius="12dp" />
     <stroke android:width="6dp" android:color="#ffffffff" />
</shape>

https://ithelp.ithome.com.tw/upload/images/20181030/20111944SKCNLMZ69F.png


  回到 activity_main,再新增一個 ImageView 指定剛剛的 frame.xml,現在你會有三個元件,再將 kotlinIcon 以及 frame 拖曳到 frameLayout 上,如下圖所示:

https://ithelp.ithome.com.tw/upload/images/20181030/20111944N88FPLfcTV.png

  小提醒:排列順序會影響到顯示效果,各位可以試試將 Layout 中的兩個元件,互相交換順序的結果。緊接設分別設定三個元件的屬性,由於元件重疊,你可以透過工具箱下方的 Component Tree 來協助。

  按照慣例,作者在這邊稍微描述一下作法,各位可以先自行嘗試看看,順便驗證一下排版概念。三元件的編排以 frameLayout 為主,大小及位置都設定在此。frame (ImageView) 的用途是產生圓角,所以設定相依於 layout 即可。kotlinIcon 也同樣相依於 layout,不過因為還有一層 frame 會覆蓋在它上方,因此需要設定一下邊界值,讓出被遮蔽的空間。

  詳細參數設定請對照以下三張示意圖:

https://ithelp.ithome.com.tw/upload/images/20181030/20111944rvh9BI7NPf.png
https://ithelp.ithome.com.tw/upload/images/20181030/20111944QrpFnSNDXr.png
https://ithelp.ithome.com.tw/upload/images/20181030/20111944is29eWvRiY.png

  另外,由於增加了一個 Logo,上方橫幅的空間略顯擁擠,順手將 android 圖示的左邊約束連接到 kotlin 的右邊,如下:

https://ithelp.ithome.com.tw/upload/images/20181030/20111944F2BrS0dju7.png

https://ithelp.ithome.com.tw/upload/images/20181030/20111944BWf5dtnRx9.png


  今天的課程就到這邊,下一章會接續完成下半部的排版,同時介紹如何透過程式碼達成圓角效果,我們明天見!


資料參考

ActionBar 的靜態與動態宣告方式
https://xnfood.com.tw/action-bar/

TechrePublic-Round corners on an Android ImageView
https://www.techrepublic.com/article/pro-tip-round-corners-on-an-android-imageview-with-this-hack/


上一篇
Day 15. Android Layout 版面設計-1/4
下一篇
Day 17. Android Layout 版面設計-3/4
系列文
Kotlin for Android30

尚未有邦友留言

立即登入留言