iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Mobile Development

程式初學就來點swift吧!教你掌握整個蘋果生態圈!系列 第 17

Day 17 - SwiftUI開發學習1(按鈕)

我們統整一下前16天的內容,我們花了很多的時間學習swift語言的基本,學完語言之後我們要開始進入到介面的部分。

正文

介面的部分會在content view 裡寫。

接著打開專案底下的ContentView.swift。

這面我們要寫的東西其實也不多,因為可以用找的,不用一個一個背下來。

接著我們按下xcode右上角的加號。

按鈕

我們找到button,拉到你想要的位置。

Button(action: {
    // 執行的內容
}) {
    // 按鈕外觀設置
}

當然,我們把它美觀也是很重要的

Text("我好帥喔喔")
                .padding()
            Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
                Text("我超帥按鈕")
                    .fontWeight(.bold)
                    .font(.title)
                    .padding()
                    .background(Color.green)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .padding(10)
                    
            }
            .padding(.top)

底下美觀的部分可以利用右邊做細部的調整。

他會自動寫進code。

圖片按鈕

這邊我們已用內建庫,如果版本超過ios 13 就可以使用SF Symbols。

我們可以到官網下載程式 SF Symbols

安裝好後就可以打開應用程式找到各式各樣的圖案了!

在剛剛下載好的程式中,找到你想要的圖片,複製名稱到你的程式,這樣子就可以囉!

Button(action: {
            }) {
                HStack {
                    Image(systemName: "person.fill.checkmark")
                        .font(.title3)
                    Text("帥起來!")
                        .fontWeight(.semibold)
                        .font(.title)
                }
                .padding()
                .foregroundColor(.black)
                .background(Color.blue)
                .cornerRadius(40)

自定義color

通常你會找不到你要的顏色,這時候要用自訂義hex,並且宣告該色號的名稱,之後可以直接套用在程式中。(話說你買勞斯萊斯的時候也有相同服務)

點選New Color Set

接著你會看兩個選項Any 跟 Dark。因為自從ios 13 更新後,多了暗黑介面,所以如果兩個介面相同顏色的話就兩個年一樣的Hex,也可以直接開panel調色。(建議把any刪除,並且在右側添加light)

右上color set 填入名稱即可。

Button(action: {
            }) {
                HStack {
                    Image(systemName: "person.fill.checkmark")
                        .font(.title3)
                    Text("帥起來!")
                        .fontWeight(.semibold)
                        .font(.title)
                }
                .padding()
                .foregroundColor(.black)
                .background(Color("pppink"))
                .cornerRadius(40)
            }


上一篇
Day 16 - App設定(icon、名稱)
下一篇
Day 18 - SwiftUI開發學習2(Toggle切換)
系列文
程式初學就來點swift吧!教你掌握整個蘋果生態圈!30

尚未有邦友留言

立即登入留言