iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
0

30天iOS APP開發系列 第 2

[Day 02] UI處理

專案建立

打開Xcode後會有幾個專案分別為『Get started with a playground』、『Create a new Xcode project』、『Clone an existing project』。
Xcode開啟畫面

  • Get started with a playground:可用於練習swift語言
  • Create a new Xcode project:新增專案
  • Clone an existing project:下載現存專案

建立Single view App
建立單一頁面的APP

專案資料輸入

  • Product Name:專案名稱
  • Team:可以先不用填寫
  • Organization Name:組織名稱
  • Organization Identifier:可輸入自己的網域
  • Language:所使用的程式語言

專案資料夾
許多檔案中Main.storyboard為layout的檔案,本次將以此檔案為主

元件使用

元件選單
在整個Xcode的右方有許多元件可以直接拉入Layout
並且可以切換List view以及Icon View

Label及Button
本次會用到的僅有Label(用於顯示文字)、Button(用於顯示按鈕)

試著拉拉看
任意的將label及button拉入畫面中

點選拉入的元件後可以在右方看到該元件的屬性
屬性設定

  • Title:設定按鈕文字
  • Font:設定字型及大小
  • Text Color:設定字體顏色
  • Backfround:設定背景(非背景色而是背景圖)

在向下滑之後可以看到更多的設定
屬性設定2

  • Background:可以設定按鈕的背景色

在畫面下方可以任意的切換Device,確認該Layout在不同的手機中所呈現的樣子
切換Device

因此可以發現目前的排版排好後僅在其中一種Device可以較佳的體驗,換到其他裝置後會覺得排版很奇怪!因此需要Auto Layout的幫忙

Auto Layout

可以在畫面中下方找到該按鈕,將『Horizontally in Container』、『Vertically in Container』點選後接著按下『Add 2 Constraints』即可將該元件水平置中以及垂直置中
水平、垂直置中

如果是希望距離邊界多少點則可以使用另一個按鈕,例如希望與右邊界及下邊界個相距20點,則如圖輸入後按下『Add 2 Constraints』即可。
距離邊界XXOO點

設定完後在不同裝置看到的結果如下:

iPad Pro 12.9

iPad Pro 12.9

iPhone X

iPhone X

iPhone X(橫)

iPhone X(橫)

iPad Pro 9.7(橫)

iPad Pro 9.7(橫)

參考資料

swift playgrounds


上一篇
[Day 01] iOS APP開發介紹
下一篇
[Day 03] UI更新
系列文
30天iOS APP開發6

尚未有邦友留言

立即登入留言