2-1 기본기 다지기

UIKit과 SwiftUI 한눈에 비교하기

Views and Controls
- UILable - Text
- UITextField - TextField
- UITextField(isSecureTextEntry) - SecureField
- UIButton - Button
- UIImageView - Image
- UISwitch - Toggle
- UISlider - Slider
- UIStepper - Stepper
- UIPickerView - Picker(WheelPickerStyle)
- UISegmentedControl - Picker(SegmentedPickerStyle)
- UIDatePicker - DatePicker
- UIStackView - HStack, VStack
- UIScrollView - ScrollView
- UITableView(Plain) - List
- UITableView(Grouped) - LIst(GroupedListStyle)
ViewControllers
- UIViewController - View
- UINavigationController - NavigationView
- UITabBarController - TabView
- UISplitViewController - NavigationView
- UITableViewController - List
- UIAlertController(actionSheet) - AcitonSheet
- UIAlertController(alert) - Alert

텍스트(Text)

VStack(spacing: 30) {
    Text("폰트와 굵기 설정")
        .font(.title)
        .fontWeight(.black)
    
    Text("글자색은 foreground, 배경색은 background")
        .foregroundColor(.white)
        .padding()
        .background(Color.blue)
    
    Text("커스텀 폰트, 볼드체, 이탤릭체, 밑줄, 취소선")
        .font(.custom("Menlo", size: 16))
        .bold()
        .italic()
        .underline()
        .strikethrough()
    
    Text("라인 수 제한과 \\n 텍스트 정렬 기능입니다. \\n 이건 안 보입니다.")
        .lineLimit(2)
        .multilineTextAlignment(.trailing)
        .fixedSize()
    
    (Text("자간과 기준선")
        .kerning(8)
        + Text(" 조정도 쉽게 가능합니다.")
        .baselineOffset(8)
        .font(.system(size: 16)))
}

Untitled

수식어 적용 순서 유의사항

함수마다 리턴 타입이 다르기 때문에 리턴 타입을 확인하고 사용해야 한다.
순서에 따라 적용되는 범위가 다릅니다.

Text("🐶🐱🐭🐹")
    .font(.largeTitle)
    .background(Color.yellow)
    .padding()

Untitled

Text("🐶🐱🐭🐹")
    .font(.largeTitle)
    .padding()
    .background(Color.yellow)

Untitled

이미지(Image)

UIKIt의 UIImageView와 비슷하지만 UIImage 객체를 따로 만들지 않고 이미지를 표현할 수 있습니다.

HStack {
    Image("KotlinLogo") // 100x100 이미지
    Image("KotlinLogo")
        .frame(width: 50, height: 50)
    Image("KotlinLogo")
        .frame(width: 200, height: 200)
}

Untitled

Image가 지정한 frame의 크기로 나타나지만 이미지 크기가 변하지 않아서 겹치는 모습으로 보입니다.

HStack {
    Image("KotlinLogo")
    Image("KotlinLogo")
        .resizable()
        .frame(width: 50, height: 50)
    Image("KotlinLogo")
        .resizable()
        .frame(width: 200, height: 200)
}

Untitled

resizable()를 추가하면 지정한 frame에 따라 이미지 크기가 변하는 것을 볼 수 있습니다.

HStack {
    // capInset은 늘어날 영역을 설정하는 것
    Image("KotlinLogo")
        .resizable(capInsets: .init(top: 0, leading: 50, bottom: 0, trailing: 0))
        .frame(width: 150, height: 150)
    
    // resizeingMode
    Image("KotlinLogo")
        .resizable(resizingMode: .tile)
        .frame(width: 150, height: 150)
}

Untitled

resizable()에 파라미터를 추가해서 다양한 스타일로 resize할 수 있습니다.

VStack {
    Image("KotlinLogo")
        .resizable()
        .frame(width: 100, height: 150)
    
    Image("KotlinLogo")
        .resizable()
        .scaledToFit()
        .frame(width: 100, height: 150)
    
    Image("KotlinLogo")
        .resizable()
        .scaledToFill()
        .frame(width: 100, height: 150)
}

scaledToFit()은 비율을 유지하면서 frame에 맞추는 것 scaledToFill()은 비율을 유지하면서 frame을 벗어나는 것

Untitled