[iOS] UISlider

UISlider

 연속된 값의 범위에서 단일 값을 선택하기 위한 컨트롤

 슬라이더의 thumb을 움직이면, 슬라이더에 연결된 모든 작업으로 업데이트 된 값이 전달된다. 슬라이더의 형태는 변경 가능하다. 트랙과 thumb의 색을 변경할 수 있고 슬라이더 끝에 표시할 이미지를 설정할 수 있다. 코드를 사용하거나 인터페이스 빌더를 통해서 슬라이더를 추가할 수 있다.

 

 

사용자의 상호 작용에 응답

 슬라이더는 Target-Action 디자인 패턴을 사용하여 사용자가 슬라이더를 이동할 때 앱에 알린다. 슬라이더 값이 변경될 때 알림을 받으려면 value Changed 이벤트를 사용한 action 메서드를 등록하면 된다. 실행단계에서, 사용자가 슬라이더의 값을 변경하면 슬라이더가 메서드를 실행한다.

 

 기본적으로 슬라이더는 사용자가 슬라이더의 thumb 컨트롤러를 이동할 때 값이 변경된 이벤트를 연속적으로 보낸다. isContinuous 속성을 false로 설정하면 사용자가 슬라이더의 thumb 컨트롤을 놓을 때만 슬라이더가 이벤트를 전송하여 최종 값을 설정한다.

 

 아래의 세 가지 형식 중 하나를 사용하여 슬라이더와 action 메서드를 연결할 수 있다. 슬라이더의 값 변경에 응답하는 데 필요한 정보를 제공하는 방식을 선택하면 된다.

 

Debug Sliders

 슬라이더에 관한 문제를 디버깅할 때, 아래의 팁을 따라서 일반적인 문제점을 피하자.

• 사용자 정의 색상 또는 사용자 정의 이미지를 사용하되, 둘 다 사용할 수는 없다. 트랙과 thumb 모양에 대한 상반된 설정은 가장 최근에 설정된 값으로 해결된다. 
• 현재 값은 최소값과 최대값 사이여야 한다.
• 모든 컨트롤 상태에 대한 사용자 정의 이미지를 설정해라. 슬라이더에 사용자 정의 트랙 및 thumb 이미지를 사용하는 경우 가능한 모든 UIControl.State에 대한 이미지를 설정해야 한다. 해당 사용자 정의 이미지가 지정되지 않은 상태는 표준 이미지를 대신 표시한다. 하나의 사용자 정의 이미지를 설정한 경우 모두 설정해야 한다.

 

실제 사용

 

 위의 사진처럼 슬라이더(valueSlider)와 Label(valueLabel)을 하나 만들어서 코드와 연결시켜줬다. 그리고 앱이 실행될 때 슬라이더의 최소값, 최대값, 현재 값을 설정해줬고 Label의 텍스트 값은 현재 슬라이더의 값인 "50"으로 설정해줬다.

 슬라이더의 값 설정은 코드로도 설정해줄 수 있고 Inspector창을 통해서도 설정이 가능하다.

Inspector를 통해서 Slider의 현재 값, 최소값, 최대값 설정

 

 이제 action 메서드를 만들어서 슬라이더의 thumb 컨트롤을 이동시켜 값을 변화시켰을 때 해당 값이 Label에 나타나게 설정해주자.

@IBAction func sliderValueChanged(_ sender: UISlider) {
        let value = sender.value
        
        self.valueLabel.text = String(value)
    }

 

 위 코드를 작성하고 실행시킨 후 thumb를 이동시키면 아래 사진과 같이 Label의 text가 변경됨을 알 수 있다.

 

 기본적으로 UISlider의 값은 Float이기 때문에 Label의 값이 Float 형태로 표시되고 있다. Int(sender.value) 표현을 사용해서 정수형 형태로 변경할 수 있다.

 또한 현재 상태에서는 슬라이더의 thumb를 움직일 때마다 Label의 값이 변경되는데 아래와 같은 코드를 사용하면 thumb 컨트롤을 움직인 후 놓았을 때만 Label의 값이 변경되도록 설정할 수 있다.

self.valueSlider.isContinuous = false

 

참고

- https://developer.apple.com/documentation/uikit/uislider

- https://velog.io/@wook4506/iOS-Swift-UISlider%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90