티스토리 뷰

이전 imagePicker를 사용하여 사진을 여러 장 추가할 수 있도록 수정했음.

근데 왜 자꾸 무한대로 넘어가는지 알 수 없었음.

 

여러 장 선택할 수 있도록 수정된 코드

... 생략 ...
@StateObject var imagePicker = ImagePicker()
    
let columns = [GridItem(.adaptive(minimum: 100))]

... 생략 ...

ScrollView(.horizontal, showsIndicators: false){
	LazyVGrid(columns: columns) {
    	ForEach(0..<imagePicker.images.count, id: \.self) { index in
        	imagePicker.images[index]
            	.resizable()
                .scaledToFit()
		}
        Button(action: {}) {
        	PhotosPicker(selection: $imagePicker.imageSelections,
            	maxSelectionCount: 10,
                matching: .images,
                photoLibrary: .shared()) {
                	Image(systemName: "plus.circle.fill")
                    	.resizable()
                        .frame(width: 30, height: 30)
                        .tint(.primaryRed)
                }
		}
        .frame(width: 100, height: 100)
        .background(
        	RoundedRectangle(cornerRadius: 8)
            	.fill(Color.navGray)
        	)
        }

... 생략 ...

 

알고보니 

let columns = [GridItem(.adaptive(minimum: 100))]

여기서 .adaptive(minimum: 100) 이것 때문이었음.

 

수정하면서 덤으로

가로로 놓이도록 LazyVGrid에서 LazyHGrid로도 수정함.

그리고 사진 선택 최대 갯수도 5개로 지정해주고 5개 선택 시 버튼 터치를 막도록 button에 disabled 추가함.

 

최종본

... 생략 ...

@StateObject var imagePicker = ImagePicker()
    
let rouws = [GridItem()]
let maxPhotosCount:Int = 5

... 생략 ...

ScrollView(.horizontal, showsIndicators: false){
	LazyHGrid(rows: rouws) {
    	ForEach(0..<imagePicker.images.count, id: \.self) { index in
        	imagePicker.images[index]
            	.resizable()
                .scaledToFit()
                .frame(height: 100)
    	}
	Button(action: {}) {
    	PhotosPicker(selection: $imagePicker.imageSelections,
        	maxSelectionCount:
            	maxPhotosCount - imagePicker.images.count,
                matching: .images,
                photoLibrary: .shared()) {
                	Image(systemName: "plus.circle.fill")
                    	.resizable()
                        .frame(width: 30, height: 30)
                        .tint(.primaryRed)
                }
    	}
    	.disabled(imagePicker.images.count == 5)
    	.frame(width: 100, height: 100)
    	.background(
    		RoundedRectangle(cornerRadius: 8)
    		.fill(Color.navGray)
    	)
	}
}

... 생략 ...

 

반응형
LIST
댓글
링크
공지사항
최근에 올라온 글