iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 30
3
Software Development

Kotlin for Android系列 第 30

Day 30. 常用快捷鍵 | 應用程式 Icon

  • 分享至 

  • xImage
  •  

常用快捷鍵

  列出一些作者最常使用的快捷鍵 (除了剪下、複製、貼上、復原),在程式撰寫時能有很大的幫助:

  • 單行註解【Ctrl + /】、多行註解【Ctrl + Shift + /】

  • 重新命名【Shift + F6】
      用於專案總管上想將現有檔案修改名稱時使用

  • 重新排版【Ctrl + Alt + L】
      在編輯程式碼或 XML 檔案時,會使用 Tab 或空白將程式碼編排好,有時寫得太順來不及按空白鍵或覺得一直空格很麻煩的時候 (宣告陣列),可使用這組快捷鍵,自動將整個頁面的程式碼重新編排好,可以省下很多按空白鍵的時間。

https://ithelp.ithome.com.tw/upload/images/20181113/20111944cOWNyNY2Qx.png

  • 於上方插入一行【Ctrl + Alt + Enter】、於下方插入一行【Ctrl + Shift + Enter】
      撰寫程式過程不總是一次到位,有時會想在兩行之間補上程式碼或增加分行間格開,一般會特地將游標瞄準在上方程式碼的尾端按下 Enter 鍵新增一行,但透過這兩組快捷鍵,可以跳脫限制,無論是在欲加入的位置的上方或下方都能插入一行,同時也不必瞄準在尾端,在該行程式碼任一個位置 (開頭、程式碼之中、結尾) 皆可在不影響到本段程式碼的前提下增加一行。
// Ctrl + Alt + Enter
val list = arrayListOf("A", "B", "C") // 本行任何位置都能使用
// Ctrl + Shift + Enter
  • 調整程式位置【Ctrl + Shift + ↑, Ctrl + Shift + ↓】
      將已經撰寫好的程式行/段進行上下移動,單行移動時也不需要特地瞄準在尾端。另外也能進行整段程式碼的移動,只需反白要移動的部分即可整段挪動 (也不需要完整反白,如下圖)。

https://ithelp.ithome.com.tw/upload/images/20181113/20111944wQk9X4IqgF.png

  • 複製並貼上【Ctrl + D】
      可將該行程式碼透過本組快捷鍵直接完成複製並貼上下一行的動作,單行複製時不需要特地瞄準位置,但若要多行複製時,需要完全反白要複製的部分並再往上多反白一空行,自動貼上時也許會遇到排版亂掉,可以透過上面重新排版快捷鍵解決。
      
  • 程式碼詞句移動【Ctrl + →, Ctrl + ←】
      在同行程式碼移動中,除了使用方向鍵一格一格移動,還有另一個選擇,透過本組快捷鍵,能以一個詞為移動單位並略過空白,讀者可以下列程式碼測試移動模式。
val arraySize = resources.getStringArray(R.array.options).size
  • 程式碼詞句反白【Ctrl + Shift + →, Ctrl + Shift + ←】
      複製並貼上、詞句移動、詞句反白這三組快捷鍵會搭配一起使用,當我們複製一段程式後,一定需要微調部分內容,此時可以透過詞句移動到該位置,接著使用詞句反白,直接輸入新的程式碼取代掉舊內容,能夠省很多工。

  • 轉換大小寫【Ctrl + Shift + U】
      游標停留在一個詞句或單字上時,按下此組快捷鍵會由 IDE 自動反白並轉化成全部小寫,在按一次快捷鍵則變成大寫,按第三下並不會回復原始樣貌,只會再次變成全部小寫,也可自行反白想要轉換的範圍再按此組快捷鍵。


更換 App Icon

  前幾章節我們開發了很多不同功能的應用程式,可以發現全部都是共用同一個預設圖示,此小節將示範如何修改應用程式 Icon

https://ithelp.ithome.com.tw/upload/images/20181113/20111944MG7Ak9ANny.png

  首先可以前往:AndroidAssetStudio,製作 Icon 圖檔資源,進入網頁後選擇 Launcger icon generator

https://ithelp.ithome.com.tw/upload/images/20181113/20111944ML4znygw0H.png

  有三種製作模式:

  1. Image:上傳 PNG、JPG、GIF、AVG
  2. Clipart:使用 Material Design Icons
  3. Text:純文字

  進入網頁預設會是 Clipart,選擇圖示的部分就先任意挑選一個。

https://ithelp.ithome.com.tw/upload/images/20181113/20111944QxUlFiSyCM.png

  接著是去除空白的選項,原始圖周圍會有一圈透明的邊界,如果選擇 Trim 就會將這些透明部分去除,Icon 看起來較大,反之就會維持一個透明空間,可將 Padding 調成 0%,兩者之間的差異會比較明顯,Padding 相信各位也不陌生,在 Icon 設計可以視為兩個圖層,一個是背景另一個是前景圖,透過 Padding 決定前景圖與背景圖的內部間隔。

https://ithelp.ithome.com.tw/upload/images/20181113/201119447Q7WzKRQqk.png

  接下來的幾個參數都很淺顯易懂,Scaling 只有在 Image 編輯模式才有作用,就跟之前教學使用 ImageView 調整圖片顯示方式的概念是一樣的,可以決定自行上傳的圖檔呈現方式,分為填滿空間 (Crop),或是置中 (Center)

https://ithelp.ithome.com.tw/upload/images/20181113/20111944D1fI9AVdia.png

  Shape 可以設定背景層的形狀,最常見為 SquareCircle,以目前 Android 趨勢,新版作業系統主要是使用 Circle 圓形方式呈現,次要則是 Square 圓角正方形。

  如果選擇的是圓形,則命名的部分可加上 _round => ic_launcher_round,這樣在匯出圖檔後會比較方便使用。

https://ithelp.ithome.com.tw/upload/images/20181113/20111944qxJhE3TN3Q.png


  Effect 的三種效果:由左至右 Elevate (內部陰影)、Cast shadowScore

https://ithelp.ithome.com.tw/upload/images/20181113/20111944qGvMIGhWg0.png

  調整好之後,按下網頁右上方的下載按鈕,會得到一個 .zip 檔案,解壓縮後有個 res 資料夾,先從 Studio 專案總管app > res 資料夾上按右鍵選擇 Show in Explorer,再把解壓縮得到的 res 直接覆蓋。

  需要注意地方,打開專案的 res 資料夾,會看到有個 mipmap-anydpi-v26 資料夾,這是在 Android 8.0 之後推出的 Adaptive Launcher Icons,新的圖示設計不再是透過固定圖檔的設計模式,而是透過 xml 架構搭配向量圖格式,讀者可以打開 mipmap-anydpi-v26 資料夾,任選一個 xml 打開查看:

https://ithelp.ithome.com.tw/upload/images/20181113/20111944t8lNdqZ3JW.png

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
   <background android:drawable="@drawable/ic_launcher_background" />
   <foreground android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

  這裡又導向另外兩個檔案:ic_launcher_background.xmlic_launcher_foreground.xml,類似於剛才課程提到過上下層概念,只不過在新版當中用兩個 xml 存放各自的向量設計值。透過新的設計模式,有兩個好處:

1. 開發者只需一次設計,讓使用者決定顯示的圖型 (無論是圓形還是方形都可自行遮罩)
2. 能附加動畫效果在 Icon 上

  這邊強烈建議閱讀以下兩篇文章,能夠更了解 Adaptive 的概念包含一些設計的共通原則:

Adaptive icons
https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

Designing Adaptive Icons
https://medium.com/google-design/designing-adaptive-icons-515af294c783


  接著請先將 mipmap-anydpi-v26 資料夾備份到其它位置,然後將它暫時刪除,目的是繼續展示在舊版本作業系統上的 icon 機制 (或也可把模擬機的作業系統版本往下調),接著就可以執行程式查看結果,若步驟正確一定能成功看到新圖示。

https://ithelp.ithome.com.tw/upload/images/20181113/20111944Ykwhd5IRv8.png

  讀者可以試著將原廠應用程式拖曳到主畫面,然後按著不放上下左右晃動一下,再比對我們剛剛設計的應用程式,應該能察覺到只有前者有動畫效果,而我們設計的圖是固定不動的,這就是 Adaptive Launcher Icons 設計模式帶來的變化,若對這方面有興趣的讀者可將剛刪除的 mipmap-anydpi-v26 資料夾復原回來,動手設計看看。以下再提供一個網站讓讀者可以實際動手了解新設計模式的互動方式。

Adapticon
https://adapticon.tooo.io/


  課程來到尾聲,本教學內容僅僅是基礎入門的層級,希望能引起讀者的學習興趣,再往更深入的專業技術邁進,感謝一路支持的讀者,以下就以所有曾經講述過的課程應用程式,當作成就勳章結尾,送給一同完成了 30 天挑戰的各位,後會有期。

https://ithelp.ithome.com.tw/upload/images/20181113/20111944lAIlBkaGYO.png


上一篇
Day 29. Kotlin for Android Configuration | Dialog
系列文
Kotlin for Android30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

2
SunAllen
iT邦研究生 1 級 ‧ 2018-11-13 14:06:18

恭喜大大完賽!/images/emoticon/emoticon42.gif

藍諾 iT邦新手 5 級 ‧ 2018-11-13 19:18:32 檢舉

感謝您的支持 !! /images/emoticon/emoticon12.gif

1
Leon
iT邦新手 5 級 ‧ 2019-01-03 12:11:38

感謝藍諾大大!!
收益良多
/images/emoticon/emoticon12.gif

我要留言

立即登入留言