[SwiftUI] 버튼 사이즈 유지한 채로 터치 영역만 넓히기

 

 

앱 개발을 하다보면 버튼의 크기가 너무 작아서 터치가 잘 안되는데 디자인 상 크기를 키울 수 없는 경우가 있다. 이럴 때 화면 상 보이는 버튼 크기는 유지한 채로 터치 영역을 넓히는 법을 알아보자!

 

 

터치 영역이 너무 작은 버튼 문제 상황

일부러 사이즈가 작은 버튼을 가져와서 버튼의 사이즈를 알 수 있도록 배경색을 노랑색으로 넣어놓았다. 손으로 터치를 하는 앱 특성상 이런 버튼은 터치가 힘들 것이다. 

Button {
                
} label: {
	Image(systemName: "ellipsis")
		.resizable()
		.scaledToFit()
		.frame(width: 30)
}
.background(.yellow)

버튼 이미지

 

방법 1) .contentShape() 사용

이미지에 `padding()`으로 영역을 넓힌 후 `.contentShape(Rectangle())`을 해주면 넓힌 영역까지 터치 영역으로 확장된다. 

Button {
            
} label: {
	Image(systemName: "ellipsis")
		.resizable()
		.scaledToFit()
        .frame(width: 30)
        .padding()
}
.contentShape(Rectangle())

 

터치 영역 넓힌 버튼 1

 

방법 2) frame의 minWidth, minHeight 사용

`minWidth`와 `minHeight`로 넒히고 싶은 사이즈를 설정한 후 `background` 컬러를 `clear`로 설정하면 된다. 

Button {
            
} label: {
	Image(systemName: "ellipsis")
		.resizable()
        .scaledToFit()
		.frame(width: 30)
}
.frame(minWidth: 50, minHeight: 50)
.background(.yellow)	// .clear로 해주면 시각적으로 안보임

터치 영역 넓힌 버튼 2