서근 개발노트

티스토리에 팔로잉

PROJECT/Simple

SwiftUI Project2 : Slider

서근

4년 전

QUOTE THE DAY

“ 위대한 과학은 거인의 어깨 위에 거인이 올라선 경우처럼 대단하게 비유된다. 하지만, 소프트웨어 산업은 난쟁이 발가락 위에 난쟁이가 서있는 것처럼 매우 쉽게 이야기 된다. ”

- Alan Cooper (앨런 쿠퍼)

목차 

Flag 배열 생성
Extenstion 생성
Slider 될 때마다 이미지 추가
전체 코드

Project2 : Slider

Flag 배열 생성

Slider를 사용하여 프로젝트를 만들어보겠습니다.

첫 번째로, ContentView에 NavigationView를 생성해서 NavigationBarTitle을 "국기"로 정해주겠습니다,

swift

UNFOLDED

 struct ContentView: View {
    let flag = ["🇰🇷", "🇺🇸", "🇯🇵", "🇪🇺", "🇸🇱", "🇧🇪", "🇲🇨", "🇬🇳", "🇿🇦", "🇳🇮", "🇨🇦", "🇹🇷", "🇨🇮", "🇮🇹", "🇬🇧", "🇨🇭", "🇸🇴"]
    
    var body: some View {
        NavigationView {
            VStack {
            
            }
            .navigationBarTitle("국기")
        }
    }
}

그리고 flag의 배열에 한 번 더 배열로 감싸주겠습니다. 짝을 지어주는거죠

swift

UNFOLDED

     let flag = [["🇰🇷", "🇺🇸"],["🇯🇵", "🇪🇺"],["🇸🇱", "🇧🇪"],["🇲🇨", "🇬🇳",],
                ["🇿🇦", "🇳🇮"],["🇨🇦", "🇹🇷", "🇨🇮"],["🇮🇹", "🇬🇧"],["🇨🇭", "🇸🇴"]]

swift

UNFOLDED

     var body: some View {
        NavigationView {
            VStack {
                List(self.flag, id: \.self) { flagPair in
                    ForEach(flagPair, id: \.self) { flags in
                        Text(flags)
                            //국기의 크기를 설정
                            .font(.system(size: 100))
                    }
                }
            }
            .navigationBarTitle("국기")
        }
    }

Extenstion 생성

Xcode에 새로운 폴더를 만들고, 이름을 Extension이라고 정합니다. 새로운 폴더를 생성 후 이름은 'Array+Extension'이라고 설정해줬습니다. 코드를 다음과 같이 작성해줍니다.

swift

UNFOLDED

 //Array+Extension.swift
 
import Foundation
 
//배열을 설정하는 익스텐션
extension Array {
    //chunks라는 변수를 만든다.
    func chunks(size: Int) -> [ArraySlice<Element>] {
        
        var chunks: [ArraySlice<Element>] = [ArraySlice<Element>]()
        // stride는 한 항목에서 다른 항목으로, 현위치에서 다른위치로 이동할 수 있게 한다.
        for index in stride(from: 0, through: self.count - 1, by: size) {
            
            var chunk = ArraySlice<Element>()
            let end = index + size
            if end >= self.count {
                chunk = self[index..<self.count]
            } else {
                chunk = self[index..<end]
            }
            chunks.append(chunk)
            
            if (end + 1) == self.count {
                let remainingChunk = self[end..<self.count]
                chunks.append(remainingChunk)
            }
        }
        //반환값
        return chunks
    }
}

Slider 될 때마다 이미지 추가

자, Extension을 만들어줬으면 이제 이것을 ContentView에 적용시켜보도록 하겠습니다.

swift

UNFOLDED

 struct ContentView: View {
    let flag = [...]
    
    @State private var sliderValue: CGFloat = 1

그리고 슬라이드 할 때 마다 숫자가 바뀌는 코드를 생성해줘야 합니다.

VStack 안에 다음과 같은 코드를 작성해주겠습니다.

swift

UNFOLDED

 VStack {
                                              //3페이지 까지만 보여줌
                Slider(value: $sliderValue, in: 1...3, step: 1)
                //슬라이드 할 때 마다 숫자가 변함
                Text(String(format: "%.0f", self.sliderValue))
                    .font(.system(size: 20))
                    .fontWeight(.bold)
                    .padding()
                    .background(Color.black)
                    .foregroundColor(Color.white)
                    .clipShape(Circle())

SwiftUI Project2 : Slider - Slider 될 때마다 이미지 추가

슬라이더를 움직일 때마다 숫자가 바뀌지만, 아래 이미지는 바뀌지 않는 것을 확인할 수 있습니다.

우리는 Extentsion을 따로 만들어줬으니, 이것을 ContentView에 적용시켜야 합니다.

먼저, flag를 재 배열해줍니다.

swift

UNFOLDED

    let flag = ["🇰🇷", "🇺🇸", "🇯🇵", "🇪🇺", "🇸🇱", "🇧🇪", "🇲🇨", "🇬🇳","🇿🇦", "🇳🇮", "🇨🇦", "🇹🇷", "🇨🇮", "🇮🇹", "🇬🇧","🇨🇭", "🇸🇴"]

그리고 List 부분을 다음과 같이 수정해줍니다.

swift

UNFOLDED

                 List(self.flag.chunks(size: self.sliderValue), id: \.self) { flagPair in
                    ForEach(flagPair, id: \.self) { flags in
                        Text(flags)
                            //국기의 크기를 설정
                            .font(.system(size: 100))
                    }
                }

List(self.flag.chunks(size: self.sliderValue)를 넣어주면 오류가 생깁니다.

sliderValue는 CGFloat값 이기 때문에 Int가 와야 하기 때문이죠. Fix를 눌러주면 다음과 같은 코드가 됩니다.

swift

UNFOLDED

  List(self.flag.chunks(size: Int(self.sliderValue)), id: \.self) { flagPair in
                    ForEach(flagPair, id: \.self) { flags in
                        Text(flags)
                            //국기의 크기를 설정
                            .font(.system(size: 100))
                    }
                }

flagPair 부분도 chunk라고 수정해줍니다.

swift

UNFOLDED

  List(self.flag.chunks(size: Int(self.sliderValue)), id: \.self) { chunk in
                    ForEach(chunk, id: \.self) { flags in
                        Text(flags)
                            //국기의 크기를 설정
                            .font(.system(size: 100))
                    }
                }

화면을 이미지가 꽉 채워질 수 있도록 사이즈를 조절해주도록 하겠습니다.

swift

UNFOLDED

          List(self.flag.chunks(size: Int(self.sliderValue)), id: \.self) { chunk in
             ForEach(chunk, id: \.self) { flags in
                 Text(flags)
                     //국기의 크기를 설정
                             //숫자를 변경해보면 화면에 딱맞는건 300이라는걸 알 수 있다.
                     .font(.system(size: CGFloat(300/self.sliderValue)))
             }
         }

전체 코드

contentView

swift

UNFOLDED

 import SwiftUI
 
struct ContentView: View {
    let flag = ["🇰🇷", "🇺🇸", "🇯🇵", "🇪🇺", "🇸🇱", "🇧🇪", "🇲🇨", "🇬🇳","🇿🇦", "🇳🇮", "🇨🇦", "🇹🇷", "🇨🇮", "🇮🇹", "🇬🇧","🇨🇭", "🇸🇴"]
    
    @State private var sliderValue: CGFloat = 1
    
    var body: some View {
        NavigationView {
            
            
            VStack {
                
                Slider(value: $sliderValue, in: 1...7, step: 1)
                //슬라이드 할 때 마다 숫자가 변함
                Text(String(format: "%.0f", self.sliderValue))
                    .font(.system(size: 20))
                    .fontWeight(.bold)
                    .padding()
                    .background(Color.black)
                    .foregroundColor(Color.white)
                    .clipShape(Circle())
                
                List(self.flag.chunks(size: Int(self.sliderValue)), id: \.self) { chunk in
                    ForEach(chunk, id: \.self) { flags in
                        Text(flags)
                            //국기의 크기를 설정
                                    //숫자를 변경해보면 화면에 딱맞는건 300이라는걸 알 수 있다.
                            .font(.system(size: CGFloat(300/self.sliderValue)))
                    }
                }
            }
            .navigationBarTitle("국기")
        }
    }
}
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

extension

swift

UNFOLDED

 import Foundation
 
//배열을 설정하는 익스텐션
extension Array {
    //chunks라는 변수를 만든다.
    func chunks(size: Int) -> [ArraySlice<Element>] {
        
        var chunks: [ArraySlice<Element>] = [ArraySlice<Element>]()
        // stride는 한 항목에서 다른 항목으로, 현위치에서 다른위치로 이동할 수 있게 한다.
        for index in stride(from: 0, through: self.count - 1, by: size) {
            
            var chunk = ArraySlice<Element>()
            let end = index + size
            if end >= self.count {
                chunk = self[index..<self.count]
            } else {
                chunk = self[index..<end]
            }
            chunks.append(chunk)
            
            if (end + 1) == self.count {
                let remainingChunk = self[end..<self.count]
                chunks.append(remainingChunk)
            }
        }
        //반환값
        return chunks
    }
}

읽어주셔서 감사합니다🤟

본 게시글의 전체코드 GitHub 👇🏻

Seogun95/SwiftUI_Project2-Slider-

SwiftUI에서 Grid를 사용하여 간단한 프로젝트를 만들어 봅시다. Contribute to Seogun95/SwiftUI_Project2-Slider- development by creating an account on GitHub....

github.com

이 글도 읽어보세요

[SwiftUI 기초/View layout] - SwiftUI : Slider

[SwiftUI 기초/View layout] - SwiftUI : ForEach

[SwiftUI 기초/View layout] - SwiftUI : List (ListStyle / onDelete / onMove)

잘못된 내용이 있으면 언제든 피드백 부탁드립니다.

이 글이 좋으셨다면 구독 & 좋아요

구독과 좋아요를 눌러주시면 저에게 큰 힘이됩니다.

저작자표시

'PROJECT > Simple' 카테고리의 다른 글

SwiftUI Project6 : Use Views From Other Frameworks (0)	2021.03.08
SwiftUI Project5 : 날씨앱 'SwiftUI 기초 배우기' (0)	2021.03.06
SwiftUI Project4 : Lottie 애니메이션으로 카드만들기 (0)	2021.02.10
SwiftUI Project3 : List view를 사용하여 Grid 만들기 (0)	2021.02.09
SwiftUI Project1 : Extension으로 정보가져오기 (0)	2021.02.02

누락되었거나 수정해야 할 부분은 이곳으로 메일 부탁드립니다.😃

Written by

SEOGUN

안녕하세요! 저는 프론트엔드 를 위주로 개발을 하는 개발자 입니다. 조언해주실 부분이 있으시면 언제든 이메일 부탁드립니다.

'PROJECT/Simple' 카테고리의 관련 포스팅

티스토리 댓글

깃허브 댓글

서근

위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

SwiftUI Project2 : Slider

Project2 : Slider

Flag 배열 생성

Extenstion 생성

Slider 될 때마다 이미지 추가

전체 코드

'PROJECT > Simple' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	struct ContentView: View {
	let flag = ["🇰🇷", "🇺🇸", "🇯🇵", "🇪🇺", "🇸🇱", "🇧🇪", "🇲🇨", "🇬🇳", "🇿🇦", "🇳🇮", "🇨🇦", "🇹🇷", "🇨🇮", "🇮🇹", "🇬🇧", "🇨🇭", "🇸🇴"]

	var body: some View {
	NavigationView {
	VStack {

	}
	.navigationBarTitle("국기")
	}
	}
	}

	let flag = [["🇰🇷", "🇺🇸"],["🇯🇵", "🇪🇺"],["🇸🇱", "🇧🇪"],["🇲🇨", "🇬🇳",],
	["🇿🇦", "🇳🇮"],["🇨🇦", "🇹🇷", "🇨🇮"],["🇮🇹", "🇬🇧"],["🇨🇭", "🇸🇴"]]

	//Array+Extension.swift

	import Foundation

	//배열을 설정하는 익스텐션
	extension Array {
	//chunks라는 변수를 만든다.
	func chunks(size: Int) -> [ArraySlice<Element>] {

	var chunks: [ArraySlice<Element>] = [ArraySlice<Element>]()
	// stride는 한 항목에서 다른 항목으로, 현위치에서 다른위치로 이동할 수 있게 한다.
	for index in stride(from: 0, through: self.count - 1, by: size) {

	var chunk = ArraySlice<Element>()
	let end = index + size
	if end >= self.count {
	chunk = self[index..<self.count]
	} else {
	chunk = self[index..<end]
	}
	chunks.append(chunk)

	if (end + 1) == self.count {
	let remainingChunk = self[end..<self.count]
	chunks.append(remainingChunk)
	}
	}
	//반환값
	return chunks
	}
	}

	struct ContentView: View {
	let flag = [...]

	@State private var sliderValue: CGFloat = 1

	VStack {
	//3페이지 까지만 보여줌
	Slider(value: $sliderValue, in: 1...3, step: 1)
	//슬라이드 할 때 마다 숫자가 변함
	Text(String(format: "%.0f", self.sliderValue))
	.font(.system(size: 20))
	.fontWeight(.bold)
	.padding()
	.background(Color.black)
	.foregroundColor(Color.white)
	.clipShape(Circle())

	List(self.flag.chunks(size: self.sliderValue), id: \.self) { flagPair in
	ForEach(flagPair, id: \.self) { flags in
	Text(flags)
	//국기의 크기를 설정
	.font(.system(size: 100))
	}
	}

	List(self.flag.chunks(size: Int(self.sliderValue)), id: \.self) { flagPair in
	ForEach(flagPair, id: \.self) { flags in
	Text(flags)
	//국기의 크기를 설정
	.font(.system(size: 100))
	}
	}

	List(self.flag.chunks(size: Int(self.sliderValue)), id: \.self) { chunk in
	ForEach(chunk, id: \.self) { flags in
	Text(flags)
	//국기의 크기를 설정
	.font(.system(size: 100))
	}
	}

	import SwiftUI

	struct ContentView: View {
	let flag = ["🇰🇷", "🇺🇸", "🇯🇵", "🇪🇺", "🇸🇱", "🇧🇪", "🇲🇨", "🇬🇳","🇿🇦", "🇳🇮", "🇨🇦", "🇹🇷", "🇨🇮", "🇮🇹", "🇬🇧","🇨🇭", "🇸🇴"]

	@State private var sliderValue: CGFloat = 1

	var body: some View {
	NavigationView {


	VStack {

	Slider(value: $sliderValue, in: 1...7, step: 1)
	//슬라이드 할 때 마다 숫자가 변함
	Text(String(format: "%.0f", self.sliderValue))
	.font(.system(size: 20))
	.fontWeight(.bold)
	.padding()
	.background(Color.black)
	.foregroundColor(Color.white)
	.clipShape(Circle())

	List(self.flag.chunks(size: Int(self.sliderValue)), id: \.self) { chunk in
	ForEach(chunk, id: \.self) { flags in
	Text(flags)
	//국기의 크기를 설정
	//숫자를 변경해보면 화면에 딱맞는건 300이라는걸 알 수 있다.
	.font(.system(size: CGFloat(300/self.sliderValue)))
	}
	}
	}
	.navigationBarTitle("국기")
	}
	}
	}

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

Apr
일	월	화	수	목	금	토
		1	1	1	1	1
1	1	1	1	1	1	1
1	1	1	1	1	1	1
1	1	1	1	1	1	1
1	1	1	1

SwiftUI Project2 : Slider

Project2 : Slider

Flag 배열 생성

Extenstion 생성

Slider 될 때마다 이미지 추가

전체 코드

'PROJECT > Simple' 카테고리의 다른 글

SwiftUI Project5 : 날씨앱 'SwiftUI 기초 배우기'

SwiftUI Project4 : Lottie 애니메이션으로 카드만들기

SwiftUI Project3 : List view를 사용하여 Grid 만들기

SwiftUI Project1 : Extension으로 정보가져오기

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

Flag 배열 생성

Extenstion 생성

Slider 될 때마다 이미지 추가

전체 코드