[Swift] UI 구성 요소 사용방법 : Button, TextField

해당 글은 SwiftUI내에서 Button, TextField에 대해서 구성하는 방법에 대해서 공유합니다.

 

 

0) 개발 환경

---

구분	구분 종류	버전
언어	Swift	5.7.2
UI Interface	SwiftUI
개발 도구	XCode	14.2

 

1) Button 사용방법

---

1. 불러 올 **View 파일로 이동하여서 + (Library) 버튼을 누릅니다

---

 

2. Library 내에서 “Button”을 검색하여 선택합니다

---

 

3. Button를 통해서 아래와 같이 구성하였습니다.

---

 

/**
 * ContentView.swift
 * Created by Lee on 2023/02/22.
 */
import SwiftUI

struct ContentView: View {
    @State private var userId: String = ""  // 업데이트되는 값.
    @State private var roomNo: String = ""  // 업데이트되는 값.
    
    var body: some View {
        VStack {
            Image("swift_icon")
                .resizable()
                .frame(width: 200, height: 80).padding()
            
            TextField("사용자 아이디를 입력해주세요.", text: $userId)
                .background(Color(red: 175, green: 175, blue: 175))
                .textFieldStyle(.roundedBorder).padding()
            
            TextField("방 번호를 입력해주세요.", text: $roomNo)
                .background(Color(red: 175, green: 175, blue: 175))
                .textFieldStyle(.roundedBorder).padding()
            Button(action: {
                // 버튼이 눌렸을 때 실행되는 액션
            }) {
                Text("입 장")
                    .frame(width: 350, height: 20)
                    .buttonStyle(PlainButtonStyle())
                    .foregroundColor(Color.white)
                    .padding()
                    .background(Color("#243062"))
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

[참고] SwiftUI의 Button 속성입니다.

속성	설명	비고
Text()	버튼의 텍스트를 지정할때 사용됩니다.
frame	버튼의 크기를 지정할때 사용됩니다.	width, height
buttonStyle	버튼의 스타일을 변경할때 사용됩니다. Button 인스턴스를 만들 때 스타일을 지정해야 합니다.	DefaultButtonStyle(), BorderlessButtonStyle(), PlainButtonStyle()
background	버튼의 배경색을 변경할때 사용됩니다.
foregroundColor	버튼의 텍스트 및 이미지등의 전경색을 변경할때 사용됩니다.
stoke	버튼의 테두리를 지정할때 사용됩니다.
cornerRadius	버튼의 모서리를 둥글게 만드는 속성입니다.

 

 

2) Textfield 사용 방법

---

1. 불러올 **View로 이동하여서 + (Library) 버튼을 누릅니다.

---

 

2. Library 내에서 Text Field를 검색하여 선택합니다.

---

 

 

3. TextField를 통해서 아래와 같이 구성하였습니다.

---

/**
 * ContentView.swift
 * Created by Lee on 2023/02/22.
 */
import SwiftUI

struct ContentView: View {
    @State private var userId: String = ""  // 업데이트되는 값.
    @State private var roomNo: String = ""  // 업데이트되는 값.
    
    var body: some View {
        VStack {
            Image("swift_icon")
                .resizable()
                .frame(width: 200, height: 80).padding()
            
            TextField("사용자 아이디를 입력해주세요.", text: $userId)
                .background(Color(red: 175, green: 175, blue: 175))
                .textFieldStyle(.roundedBorder).padding()
            
            TextField("방 번호를 입력해주세요.", text: $roomNo)
                .background(Color(red: 175, green: 175, blue: 175))
                .textFieldStyle(.roundedBorder).padding()
            
        }
        .padding()
        
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

[참고] SwiftUI의 TextField의 속성

속성	설명
text	TextField에 입력된 문자열 값을 저장하는 바인딩 변수.
placeholder	TextField가 비어있을 때 표시되는 문자열.
secure	TextField 안에 입력한 문자열을 숨기기 위한 Bool 값.
textFieldStyle	TextField의 스타일을 변화시키는 열거형.
padding	TextField 주위에 여백을 추가합니다.
background	TextField의 배경 색상을 설정합니다.

 

 

 

오늘도 감사합니다. 😀