UIKit) Switch, Stepper, Activity Indicator, Progress View
Switch, Stepper, Activity Indicator, Progress View 알아보기.
class UISwitch: UIControl
class UIStepper : UIControl
class UIProgressView : UIView
class UIActivityIndicatorView : UIView
위에 있는 네가지 클래스들은 Cocoa tuch Framework 내부에 속해있다.
제공하는 속성이 몇가지 되지않아 이번 포스팅이 모두 다루어보려고 한다.
이번 공부를 통해서 어떤 기능을 수행하고 앱을 만들면서 어떻게 활용하면 좋을지
생각해보는것도 좋은 기회일거 같다.
그럼 하나하나씩 알아보도록 하자!!
UISwitch
Switch는 On - Off 상태를 구현하는 것이다.
스위치의 속성을 보면 네가지 속성밖에 없다.
- Stage 는 스위치의 On-Off상태를 표시한다
- On Tint - On 상태에서 표시되는 내부 컬러를 표시한다.
- Thumeb Tint - Thumeb 컬러를 표시한다.
스위치를 터치했을 때 전구이미지가 달과 해가 바뀌는 것을 구현해보자.
imageView와 스위치를 인터페이스 빌더에 올려놓는다.
imageView의 속성에서 상태에 따라 다른 이미지를 주기위해 highlighted 상태의 이미지도 추가한다.
imageView와 Switch를 아웃렛 연결하고, Switch를 액션으로 연결한다.
- switch의 이벤트를 보면 Value Changed다.
마지막으로 액션 매서드에 상태에 따라 변경되는 값을 주면 위와같은 스위치가 작동한다!!
UIStepper
Stepper는 지정된 범위 내에서 값을 증가시키거나 감소시키는 컨트롤이다.
Stepper의 -를 누르면 값이 감소하고 +를 누르면 값이 증가한다.
스태퍼의 저장되어있는 최종값을 레이블에 표현해보자.
스태퍼의 속성을 먼저 알아보자.
- value - 현재값
- Minimum, Maximum - 최소값과 최대값
- Step - 증가시키거나 감소시킬 값의 크기
- Autorepeat - 스태퍼를 터치하고있는 동안 값이 반복적으로 없데이트
- Continuous - value Changed이벤트가 전달되는 시점을 설정
- Wrap - 최소값이나 최대값에 도달한 후 다음값을 처리하는 방법을 결정
인스펙터 빌더에 레이블과 스태퍼를 넣어주고 아웃렛 연결을 해준다.
그리고 스태퍼를 액션으로 연결한다.
- Stepper의 이벤트는 Value Changed이다.
그러면 스태퍼에 +나 -를 터치했을때 값이 변하는것을 확인할 수 있다.
위에서 설명한 Autorepeat, Continuous, Wrap 속성을 추가하면
꾹 누르고 있을 때 값이 변경되고 최소, 최대값에 도달했을 때의 액션을 변경할 수 있다.
Activity Indicator View
앱을 작동하다보면 완료시점을 알 수 있는 작업이 있고, 그렇지 못한 작업이있다.
Activity Indicator view는 완료시점을 알 수 없을 때 사용하는 것이다.
Activity Indicator View의 속성을 보자.
- Style - 사이즈를 Midium , Large로 설정할 수 있다.
- Color - 말 그대로 색상을 바꾸는 속성이다.
- Animating - Activity Indicator View의 애니메이션 설정
필요한 시점에 메서드를 호출해서 애니메이션을 시작할 수 있다.
- Hides When Stopped - 선택되어 있다면 애니메이션이 중지되는 시점에 화면에서 사라진다.
인스펙터 빌더에 Activity Indicator View를 가운데 배치해준다.
아웃렛에 연결하고 viewDidLoad에 코드를 입력해주면
애니매이션이 적용 된 Activity Indicator View를 확인할 수 있다.
Progress View
Progress View는 작업의 진행속도와 완료시점을 보여줄때 주로 사용한다.
Progress View의 속성들을 알아보자.
- Style - Default와 Bar 스타일이 있다.
Bar 스타일은 tool bar나 navigation var에 주로 사용한다.
- Progres - 진행 상태를 나타내는 값. 0.0 ~ 1.0
- Progress Tint - bar 의 컬러를 설정
- Track Tint - 트랙의 컬러를 설정
- Image - 이미지는 Progress bar의 높이가 지정되어있어 이미지가 찌그러지는 현상이 발생해서 잘 사용하지 않는다.
버튼을 클릭했을때 Progress View가 작동하는 것을 구현해 보자.
위에 액션 버튼을 보면 0.8만큼 bar가 채워지도록 애니메이션을 지정해줬다.
나머지는 주석을 참고하자.
버튼을 클릭 후 바의 상태가 0.8만큼 채워진것을 확인할 수 있다.
Comments