Image
선언방법
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Image("charleyrivers_feature")
Image(systemName: "circle")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
→ Assets 이미지 파일 : Assets에 있는 이미지 파일의 이름을 String 타입으로 입력한다.
→ xcode 기본 이미지 : systemName 파라미터를 사용하여 넣는다.
프레임에 영향을 받지 않는다.
이미지는 기본적으로 자신의 비트맵을 측정하여 크기를 선택하기 때문에 프레임을 조절해도 이미지의 사이즈는 그대로이다.
import SwiftUI
struct ContentView: View {
var body: some View {
Image("charleyrivers_feature")
.border(Color.red) //이미지의 테두리
.frame(width: 450, height: 500)
.border(Color.blue) //프레임의 테두리
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
이미지 사이즈 조정
import SwiftUI
struct ContentView: View {
var body: some View {
HStack {
Image("charleyrivers_feature")
.resizable()
.scaledToFit()
Image("charleyrivers_feature")
.interpolation(.high)
.resizable()
.scaledToFit()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
resizable을 통해 이미지의 사이즈를 조정 가능하게 만든 뒤 다양한 속성을 통해 이미지를 재조정할 수 있다.
→ resizable() : 이미지의 종황비를 무시하고 부모 뷰에서 사용가능한 전체 공간을 이미지로 채워주는 속성이다.
→ aspectRatio(contentMode: .enum) : 각 축에 대해 이미지 배율을 조정해준다.
— .fit : 프레임에 맞게 종황비가 일치하도록 사이즈를 조정해준다.
— .fill : 이미지 사이즈에 맞게 종황비를 일치시켜서 프레임에서 이미지가 벗어날 수 있다.
→ scaledToFit() : aspectRatio(contentMode: .fit)이랑 같은 개념이다.
→ scaledToFill() : aspectRatio(contentMode: .fill)이랑 같은 개념이다.
→ interpolation(enum) : 크기가 조정되어서 보간이 필요한 이미지를 렌더링하기위한 속성이다. enum을 통해 선언을 하며 .none, .low, .medium, .high가 있다.
타일식 이미지
import SwiftUI
struct ContentView: View {
var body: some View {
Image("charleyrivers_feature")
.resizable(
capInsets: .init(
top: 30,
leading: 30,
bottom: 30,
trailing: 30),
resizingMode: .tile)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
resizable의 기본 resizingMode는 .strech모드이다. 이것을 tile모드로 바꾸면 바둑판 형식으로 바꿀 수 있다.
또 capInsets 속성을 통해 크기를 조정하지 않는 이미지 부분을 설정할 수 있다.
Button
import SwiftUI
struct ContentView: View {
var body: some View {
Button("Button") {
print("Button")
}
.foregroundColor(.white)
.padding()
.background(Color.orange)
.cornerRadius(8)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
버튼은 클릭을 하면 이벤트를 발생시키는 컴포넌트로 가장 많이 활용되는 컴포넌트 중 하나이다. Button 키워드안에 title을 입력하고 중괄호 안에 발생 이벤트를 정의하면 클릭시 발생하게 된다.
import SwiftUI
struct ContentView: View {
let title: String
let action: () -> Void
var body: some View {
Button(title, action: action)
.foregroundColor(.white)
.padding()
.background(Color.orange)
.cornerRadius(8)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView(title: "Button") {
print("button")
}
}
}
이런 식으로 title과 action을 미리 정의를 해두고 Button 파라미터안에 입력을 해도 똑같은 결과물이 나온다.
이 때는 ContentView 구조체를 사용할 때 파라미터를 넣어야 한다. 같은 모양의 버튼인데 타이틀과 action이 다른 경우에 사용하면 유용하다.
ButtonStyle
SwiftUI에서 제공하는 프로토콜 중 하나로 Button의 buttonStyle 속성에 지정하는 스타일을 만드는 프로토콜로 해당 프로토콜로 지정한 버튼 스타일을 간편하게 적용할 수 있다.
import SwiftUI
struct OutlineButton: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration
.label
.foregroundColor(configuration.isPressed ? .gray : .accentColor)
.padding()
.background(
RoundedRectangle(
cornerRadius: 8,
style: .continuous
).stroke(Color.accentColor)
)
}
}
struct ContentView: View {
var body: some View {
HStack(spacing: 16) {
Button("Button 1") {}
Button("Button 2") {}
.buttonStyle(OutlineButton())
Button("Button 3") {}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
OutlineButton이라는 ButtonStyle을 만들어서 button2에만 적용을 시킨 모습니다. 파라미터에 있는 configuration은 버튼의 속성을 사용할 수 있는 매개변수로 총 3가지로 사용할 수 있다.
— configuration.label = 버튼의 타이틀에 접근한다(String).
— configuration.self = 나 자신
— configuration.isPressed = 클릭 했는지 여부를 Boolean으로 알려준다.
—Props
— .label : 버튼을 클릭할 때 효과를 줄 수 있게 만드는 속성이다.
— .foregroundColor : title의 색상을 지정해준다. 앞에 코드는 클릭을 하면 회색으로 클릭을 하지 않으면 system default color인 파랑색으로 표시한다.
— .background : 버튼의 배경을 지정하는 속성이다. 앞의 코드는 둥근 사각형에 테두리를 파란색으로 지정했다.
Uploaded by Notion2Tistory v1.1.0