iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0
Mobile Development

ios前端開發學習系列 第 7

【Day07】如何拉取UI介面 (ㄧ) (以調色盤為例)

  • 分享至 

  • xImage
  •  

大家可以看到我在模擬的機型上面放上很多UI元件,但大家可以用放鬆的心情來看待,因為剛開始學習UI介面不一定要一步就到位,在做出功能的同時,大家可以靠自身的創意來隨時添加新想法希望大家能保有正確前端開發學習心態喔!

https://ithelp.ithome.com.tw/upload/images/20230825/201618500pQATXPU8S.png

1. 首先我們選擇之前創建的 xib 檔案(在左邊的 Navigator Area )

2. 接著我們透過右上方的加號( Library ) 來選擇要添加的UI元件

https://ithelp.ithome.com.tw/upload/images/20230825/20161850adxvXSRt7K.png

接下來我們來選擇自己想要用哪種機型來設計

  • 下面的部分為選擇要使用的畫布設計
  • 而上面則是選擇跑模擬時顯示的機型

偷偷跟大家講我喜歡用iphone SE來開發,因為不會有煩人的瀏海跟垃圾島阻擋視野,而且!SE有主頁鍵!!!跟用觸控板來模擬滑掉app比起來真的很方便XD

我們可以來稍微區分一下上面跟下面選擇機型的差異:

上面的機型選擇 - 模擬器運行時的機型

這個部分是用來選擇在模擬器中運行時要模擬的具體機型。這讓您能夠看到應用在不同大小和形狀的屏幕上的實際外觀。例如,您可以選擇 iPhone SE,iPhone 15 pro Max, 不同的機型。
主要是看自己拉好的元件位置有沒有跑掉喔。

下面的機型選擇 - 畫布設計的機型

這部分允許您選擇在 Xcode 的介面設計畫布上使用的機型。這不影響您的應用在實際設備上的外觀,而是讓您在設計階段就能看到您的布局在特定設備上的效果。
這裡我們選擇喜歡的機型就可以嘍,可以不用一直變動。


上一篇
【Day06】內部文件架構介紹
下一篇
【Day08】如何拉取UI介面 (二) (以調色盤為例)
系列文
ios前端開發學習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言