SwiftUI Image, Button

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