눌러서 쓰는 Button 사용해보기
1) 기본동작
Button("버튼에 적어줄 문구")
만약, 클릭되었다면, "Hitted"를 출력하게됨
1-1) 클로저 사용
struct ContentView: View {
var body: some View {
Button {
print("Hitted2")
} label: {
Text("Hitted2!")
}
}
}2) 이미지로 바꿔보기
버튼 모양을 이미지로도 변경 가능
struct ContentView: View {
var body: some View {
Button {
print("Hitted2") // 어떻게 바꿀 것인지
} label: {
Image(systemName: "heart") // 어떻게 꾸밀 것인지
}
}
}3) 배경색 추가하기
.background(.purple)
// 보라색으로 배경주기4) padding, 여백주기
.padding() // 여백을 주고
.background(.purple)// 보라색으로 배경주기주의
.background(.purple) // 보라색으로 배경주고
.padding() // 여백 추가순서가 달라지면, 의미하는 바도 달라짐
5) 윤곽선
.cornerRadius(13)13만큼 둥글게 만들어줌
6) 크기
.frame(width: 150)frame으로 너비를 조정해줌
7) 삭제 역할 모양 버튼
Button("Delete", role: .destructive) {
print("deleted!")
}삭제 버튼처럼 빨갛게 변환됨, 이외에도 role 값을 cancel, none 등으로 값을 바꿔주면 각각 역할에 맞는 기본적인 색감 제공
글자를 보여주는 Text 사용해보기
struct ContentView: View {
var body: some View {
VStack {
Text("Hello ddongle")
.bold() // 굵게
.italic()
.strikethrough() // 줄긋기
Text("Hello ddongle")
.font(.system(size: 60)) // 폰트 사이즈 조절
Text("Hello ddongle")
.underline(true, color: .orange) // 오랜지색 밑줄
.foregroundColor(.red) // 폰트 색 빨강
.background(.purple) // 배경 색 보라
Text("Hello ddongle")
.foregroundColor(.green) // 폰트 색 초록
.font(.system(size: 39, weight: .bold, design: .rounded))
// 폰트 사이즈 39, 굵게, 둥글게
}
}
}Image 추가
struct ContentView: View {
var body: some View {
Image("winter")
.resizable() // 이미지를 안에 들어갈 수 있게 만들어줌
.aspectRatio(contentMode: .fit) // 원본 비율을 유지 할 수 있도록
.frame(width: 200, height:200) // 크기
.background(.orange) // 배경 오렌지
}
}fit -> fill
무시하고 꽉 차게 만들어짐
clip() 사용 시 잘라줌
border() 태두리
Image(systemName: "sun.min") // apple에서 기본적으로 제공되는 아이콘
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 30, height:30)Stack으로 쌓아보아요
VStack, 수직으로 쌓는 Stack
struct ContentView: View {
var body: some View {
VStack{
Text("1")
Text("2")
Text("3")
}
}
}
HStack, 수평으로 쌓는 Stack
struct ContentView: View {
var body: some View {
HStack{
Text("1")
Text("2")
Text("3")
}
}
}
ZStack, 레이어처럼 차곡 차곡 쌓는 Stack
struct ContentView: View {
var body: some View {
ZStack{
Text("1")
Text("2")
Text("3")
}
}
}
. 범위에 따라 다양한 효과 주기 가능
이때, VStack에는 10개 값 정도만 들어갈 수 있음
ScrollView로 화면보다 큰 컨텐츠 움직이기
기존 Stack으로 쌓으면 고정되어 원하는 내용을 스크롤 할 수 없어 볼 수 없는 상황이 됨
이때 Stack을 ScrollView로 바꾸면
스크롤하며 볼 수 있게됨
struct ContentView: View {
var body: some View {
ScrollView {
Text("1")
.frame(width: 300, height: 500)
.background(.red)
Text("2")
.frame(width: 300, height: 500)
.background(.blue)
Text("3")
.frame(width: 300, height: 500)
.background(.orange)
}
}
}
가로로 스크롤도 가능하다
struct ContentView: View {
var body: some View {
ScrollView(.horizontal) {
HStack{
Text("1")
.frame(width: 300, height: 500)
.background(.red)
Text("2")
.frame(width: 300, height: 500)
.background(.blue)
Text("3")
.frame(width: 300, height: 500)
.background(.orange)
}
}
.background(.yellow)
}
}UITableView와 닮은 List로 리스트 만들기
struct ContentView: View {
var body: some View {
List{
HStack{
Image(systemName: "heart")
Text("dongle")
}
HStack{
Image(systemName: "heart.fill")
Text("maple")
}
HStack{
Image(systemName: "bolt")
Text("universe")
}
}
}
}정적이지만 간단한 리스트 만들기
List(names, id: \.self) {name in
Text(name)
} // id로 식별해줄 수 있는 값을 넣어주어야 함. 이때는 위에서 사용한 배열의 순서가 됨동적으로 만들어보기
struct ContentView: View {
var body: some View {
let people : [Person] = [Person(name:"dongle", imageName: "heart"),
Person(name:"maple", imageName: "heart.fill"),
Person(name:"universe",imageName: "bolt")]
List(people) {person in
HStack{
Image(systemName: person.imageName)
Text(person.name)
}
}
}
}
위의 코드의 경우 리스트에 사람이 추가되면 자동적으로 리스트가 생겨나게 됨
List안에서 구역을 나눠주는 Section
기존 리스트를 구현하면 A반, B반, C반을 적어두어도 분리되어 보이지 않는 문제가 있다
이때 Section을 사용하게 되면
한눈에 알아볼 수 있게 된다.
struct ContentView: View {
var body: some View {
List{
Section {
HStack{
Image(systemName: "heart")
Text("dongle")
}
HStack{
Image(systemName: "heart.fill")
Text("maple")
}
HStack{
Image(systemName: "bolt")
Text("universe")
}
}
Section {
HStack{
Image(systemName: "heart")
Text("dongle")
}
HStack{
Image(systemName: "heart.fill")
Text("maple")
}
HStack{
Image(systemName: "bolt")
Text("universe")
}
}
Section {
HStack{
Image(systemName: "heart")
Text("dongle")
}
HStack{
Image(systemName: "heart.fill")
Text("maple")
}
HStack{
Image(systemName: "bolt")
Text("universe")
}
}
}
}
}
header와 footer를 사용해 어떤 그룹인지 표시해줄 수 있다
이때 사용하지 않는 header나 footer는 지워줄 수 있다.
struct ContentView: View {
var body: some View {
List{
Section{
HStack {
Image(systemName: "heart")
Text("dongle")
}
HStack{
Image(systemName: "heart.fill")
Text("maple")
}
HStack{
Image(systemName: "bolt")
Text("universe")
}
} header: {
Text("A class")
} footer: {
Text("Footer")
}
Section{
HStack {
Image(systemName: "heart")
Text("dongle")
}
HStack{
Image(systemName: "heart.fill")
Text("maple")
}
HStack{
Image(systemName: "bolt")
Text("universe")
}
} header: {
Text("B class")
} footer: {
Text("Footer")
}
Section{
HStack {
Image(systemName: "heart")
Text("dongle")
}
HStack{
Image(systemName: "heart.fill")
Text("maple")
}
HStack{
Image(systemName: "bolt")
Text("universe")
}
} header: {
Text("C class")
} footer: {
Text("Footer")
}
}
}
}
header나 footer 에는 커스텀한 view도 들어갈 수 있다.
헤더는 항상 대문자로 입력된다
개발자를 꿈꾸는 학생입니다!