UIControl & Target-Action
IBAction으로 연결할 경우
- Action을 설정시, Argument는 총 세개를 선택할 수 있다.
// sender로 선택할 경우
@IBAction func test1(_ sender: Any) {
}
// None으로 선택할 경우
@IBAction func test2() {
}
// Sender and Event로 설정할 경우
@IBAction func test3(_ sender: Any, forEvent event: UIEvent) {
}
@IBAction func sliderChanged(_ sender: Any) {
}코드로 연결하기
- 먼저 objc로 함수를 생성해준다.
@objc func action(_ sender: Any){
print(#function)
}- 그리고 addTarget해줘서 action 추가해주기
override func viewDidLoad() {
super.viewDidLoad()
// Method를 selector로 변경해주기
let sel = #selector(action(_:))
btn.addTarget(self, action: sel, for: .touchUpInside)
}
}action_: 가 뭔가??
Text Button
- button의 state를 변경해보기
@IBAction func report(_ sender: UIButton) {
DispatchQueue.main.asyncAfter(deadline: .now() + 0.05) {
self.stateLabel.text = sender.state.debugString
}
}
@IBAction func stateChanged(_ sender: UISegmentedControl) {
switch sender.selectedSegmentIndex{
case 0:
btn.isEnabled = true
btn.isSelected = false
btn.isHighlighted = false
case 1:
btn.isHighlighted.toggle()
case 2:
btn.isSelected.toggle()
case 3:
btn.isEnabled = false
default:
break
}
report(btn)
}※ https://zeddios.tistory.com/513 - (DispatchQueue)
- button의 Text 설정을 변경해보기
class TextButtonViewController: UIViewController {
@IBOutlet weak var btn: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
//btn은 text와 textcolor를 아래와 같이 변경할 수 없다.
// btn.titleLabel?.text = "Hello"
// btn.titleLabel?.textColor = .systemRed
// for 아래는 state를 말하는 것이다.
btn.setTitle("Hello", for: .normal)
btn.setTitle("Haha", for: .highlighted)
btn.setTitleColor(.systemRed, for: .normal)
btn.titleLabel?.backgroundColor = .systemYellow
}
}Image Button
- Image를 만들고 해당 Image를 button에 넣기
class ImageButtonViewController: UIViewController {
@IBOutlet weak var btn: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
let normalImage = UIImage(named: "plus-normal")
let highlightedImage = UIImage(named: "plus-highlighted")
btn.setImage(normalImage, for: .normal)
btn.setImage(highlightedImage, for: .highlighted)
//btn.setBackgroundImage(<#T##image: UIImage?##UIImage?#>, for: <#T##UIControl.State#>)
}
}Picker View
-
Picker View를 생성해주고 아래와 같이 datasource와 delegate을 연결해 준다.
-
그리고 아래와 같이 UIPickerViewDataSource 프로토콜을 만족해야된다.
extension TextPickerViewController: UIPickerViewDataSource{
// pickerview의 column은 몇개인가?
func numberOfComponents(in pickerView: UIPickerView) -> Int {
}
// pickerview에는 몇개의 element가 들어가는가?
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
}
}- 아래와 같이 dataSource와 delegate을 설정해 줄 수 있다.
class TextPickerViewController: UIViewController {
let devTools = ["Xcode", "Postman", "SourceTree", "Zeplin", "Android Studio", "SublimeText"]
let fruits = ["Apple", "Orange", "Banana", "Kiwi", "Watermelon", "Peach", "Strawberry"]
override func viewDidLoad() {
super.viewDidLoad()
}
}
extension TextPickerViewController: UIPickerViewDataSource{
// 몇개의 componenet인가?(column)
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return devTools.count
}
}
extension TextPickerViewController: UIPickerViewDelegate{
// 어떤 글자를 나타낼 것인가? pickerview는 위에서부터 index 0이라고 한다.
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
return devTools[row]
}
// 선택될 경우 함수가 실행이 된다.
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
print(devTools[row])
}
}-
만약 numberOfComponents의 return 값을 2로하면 아래와 같아진다.
-
report Action을 설정하여 현재 지목하고 있는 pickerview의 값을 print한다.
@IBAction func report(_ sender: Any) {
// inComponent는 컬럼의 index이다. 즉 0이면 맨 왼쪽 column이다.
let row = picker.selectedRow(inComponent: 0)
guard row >= 0 else {
print("not found")
return
}
print(devTools[row])
}Image PickerView
- PickerView의 datasource와 delegate을 설정해준다.
Datasource 설정해주기
class ImagePickerViewController: UIViewController {
lazy var images: [UIImage] = {
return (0...6).compactMap { UIImage(named: "slot-machine-\($0)") }
}()
}
extension ImagePickerViewController: UIPickerViewDataSource{
// 항목의 column을 몇개로 할 것인가?
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}
// 한 컬럼에는 몇개의 component를 넣어줄 것인가? -> 반복해서 componenet를 보여주는 것이 가능
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return images.count * 3
}
}Delegate 설정하기
/////////// 이해가 잘 안됨 /////////////
// View를 재 사용하기!
extension ImagePickerViewController: UIPickerViewDelegate {
func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
// 만약 마지막 Parameter가 imageview인지 확인하기
if let imageView = view as? UIImageView{
imageView.image = images[row % images.count]
return imageView
}
// 재 사용할 imageview가 없다면 Imageview를 만들어서 사용하기
let imageView = UIImageView()
imageView.image = images[row % images.count]
imageView.contentMode = .scaleAspectFit
return imageView
}
}PickerView 높이 설정하기
// pickerView에 설정된 높이
func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
return 60
}Shuffle Action 설정하기
- Shuffle button을 누를 경우, pickerview가 random하게 설정되게 하기
@IBAction func shuffle(_ sender: Any?) {
let firstIndex = Int.random(in: 0..<images.count) + images.count
let secondIndex = Int.random(in: 0..<images.count) + images.count
let thirdIndex = Int.random(in: 0..<images.count) + images.count
// pickerView에 있는 특정 로우를 선택할 때는 selectRow를 사용한다.
picker.selectRow(firstIndex, inComponent: 0, animated: true)
picker.selectRow(secondIndex, inComponent: 1, animated: true)
picker.selectRow(thirdIndex, inComponent: 2, animated: true)
}- 처음 view가 나올 때, shuffle 설정하기
override func viewDidLoad() {
super.viewDidLoad()
// touchEvent를 비활성화 해주기
picker.isUserInteractionEnabled = false
picker.reloadAllComponents()
shuffle(nil)
}PageControl
-
먼저 scrollView를 datasource와 delegate으로 이어주기
-
아래와 같이 pageControl을 설정해줄 수 있다. UI로 tint color와 current page를 설정해 줄 수 있다.
-
아래와 같이 코드로 pagecontrol을 설정할 수 있다.
@IBOutlet weak var pager: UIPageControl!
@IBOutlet weak var listCollectionView: UICollectionView!
let list = [UIColor.red, UIColor.green, UIColor.blue, UIColor.gray, UIColor.black]
override func viewDidLoad() {
super.viewDidLoad()
// pages를 List의 숫자로 설정하기
pager.numberOfPages = list.count
// 첫 화면의 page를 첫번째꺼로 설정하기
pager.currentPage = 0
//pager의 색깔을 변경해주기
pager.pageIndicatorTintColor = UIColor.systemGray3
pager.currentPageIndicatorTintColor = UIColor.systemRed
}- 근데 현재는 pagecontrol이 scroll이 되어도 변경이 되지 않는다.
- 따라서 아래와 같은 code를 추가해준다.
※ https://sweethoneybee.tistory.com/49 -contentOffset
// page를 넘기면 pagecontrol도 넘어가게 하기
extension PageControlViewController: UIScrollViewDelegate {
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let width = scrollView.bounds.size.width
let x = scrollView.contentOffset.x + (width / 2.0)
let newPage = Int(x / width)
if pager.currentPage != newPage {
pager.currentPage = newPage
}
}
}
- PageControl을 탭하면 다음 페이지로 넘어가게 하기
먼저 아래와 같이 action을 설정해준다.
- 그리고 아래와 같이 코드를 작성해준다.
// pageControl을 탭하는 순간 page가 한개씩 넘어가게 설정해보기
@IBAction func pageChanged(_ sender: UIPageControl) {
let indexPath = IndexPath(item: sender.currentPage, section: 0)
listCollectionView.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)
}Slider
Simple Slider
- 아래와 같이 outlet이 설정이되어있다.
lass SimpleSliderViewController: UIViewController {
@IBOutlet weak var redSlider: UISlider!
@IBOutlet weak var greenSlider: UISlider!
@IBOutlet weak var blueSlider: UISlider!
- slider의 값을 변경할 경우, 그 값을 저장하고, 그 값으로 background color를 설정해보기
// valueChange로 action을 설정하기
@IBAction func sliderChanged(_ sender: Any) {
// 슬라이더의 현재 값을 가져오기
let r = CGFloat(redSlider.value)
let g = CGFloat(greenSlider.value)
let b = CGFloat(blueSlider.value)
let color = UIColor(red: r, green: g, blue: b, alpha: 1.0)
// view의 background를 위에 설정한 color로 설정하기
view.backgroundColor = color
}- 그리고 slider의 초기값을 설정해준다.
override func viewDidLoad() {
super.viewDidLoad()
redSlider.value = 1.0
greenSlider.value = 1.0
blueSlider.value = 1.0
redSlider.minimumValue = 0.0
redSlider.maximumValue = 1.0
}
}CustomSlider
- 아래와 같이 outlet이 설정이되어있다.
class CustomSliderViewController: UIViewController {
@IBOutlet weak var slider: UISlider!
override func viewDidLoad() {
super.viewDidLoad()
}
}- Image랑 track Tintcolor를 설정해보기
override func viewDidLoad() {
super.viewDidLoad()
// slider를 커스텀 이미지로 설정해보기
let img = UIImage(systemName: "lightbulb")
slider.setThumbImage(img, for: .normal)
// track의 tintcolor를 설정해보기
slider.minimumTrackTintColor = UIColor.systemRed
slider.maximumTrackTintColor = UIColor.black
}
}- 위와 같이 설정을 하면 아래와 같이 slider가 구성이 된다.
NonContinuousSlider
- 아래와 같이 outlet과 action(valueChanged)이 설정이 되어있다.
class NonContinuousSliderViewController: UIViewController {
@IBOutlet weak var valueLabel1: UILabel!
@IBOutlet weak var slider1: UISlider!
@IBOutlet weak var valueLabel2: UILabel!
@IBOutlet weak var slider2: UISlider!
@IBAction func sliderChanged1(_ sender: UISlider) {
valueLabel1.text = String(format: "%.1f", sender.value)
}
@IBAction func sliderChanged2(_ sender: UISlider) {
valueLabel2.text = String(format: "%.1f", sender.value)
}
override func viewDidLoad() {
super.viewDidLoad()
}
}- 아래와 같이 storyBoard가 구성되어있다.
Continuous Updates
- Slider의 continuous update가 체크가 되어있다면, slider를 움직일 때마다 계속 값이 변경이 되지만, continuous update가 체크가 되어있지않다면, slier를 움직이다가 때야지 값이 변경이 된다.
Segmented Control
-
아래와 같이 segmented control을 추가해주고, segments를 3으로 설정하면 3개의 segment가 생성이된다.
-
그리고 아래와 같이 segments를 구성해준다.(title을 변경하기)
-
Label을 segmented Control을 통하여 alignment를 변경해보자
-
아래와 같이 SegmentedControl을 outlet으로 추가하고, alignmentControl의 segement Index를 textAlignment의 rawvalue로 설정을 해준다.
@IBOutlet weak var label: UILabel!
@IBOutlet weak var alignmentControl: UISegmentedControl!
override func viewDidLoad() {
super.viewDidLoad()
// 초기 정렬을 초기 Label의 정렬에 맞추기
alignmentControl.selectedSegmentIndex = label.textAlignment.rawValue
}
}- 그리고 SegmentedControl을 누르면 segment에 맞게 align되게 하는 action을 추가해보자.
// value Changed -> sender의 index로 rawValue를 받는다. 아니면 그냥 .center로
@IBAction func alignmentChanged(_ sender: UISegmentedControl) {
label.textAlignment = NSTextAlignment(rawValue: sender.selectedSegmentIndex) ?? .center
}Switch를 통하여 momentary를 설정하기
- momentary가 설정이되면 영구적으로 값이 변하는 것이 아니라, 한시적으로만 값이 변하게 된다.
↓ ViewDidLoad에 아래의 코드를 추가한다.
momentarySwitch.isOn = alignmentControl.isMomentary- 그리고 switch를 누르면 moementary 성질이 변하게 설정해보자
@IBAction func toggleMomentary(_ sender: UISwitch) {
alignmentControl.isMomentary = sender.isOn
}코드로 segmentedControl을 설정해보기
alignmentControl.setTitle("왼쪽", forSegmentAt: 0)SegmentedControl을 추가하는 코드 생성하기
- 아래와 같이 Storyboard를 구성하고, Insert를 누르면 segment가 추가되고, remove를 누르면 segment가 삭제되게 설정해보자.
↓ 아래와 같이 insert action 코드를 추가하자.
@IBAction func insertSegment(_ sender: Any) {
// 먼저 title에 값이 들어갔는 지, guard를 통하여 확인하기
guard let title = titleField.text, title.count > 0 else {
return
}
segmentedControl.insertSegment(withTitle: title, at: segmentedControl.numberOfSegments, animated: true)
titleField.text = nil
}↓ 아래와 같이 delete action 코드를 추가하자.
@IBAction func removeSegment(_ sender: Any) {
// for 문을 통하여 segment 한 개 한 개씩 확인하기.
guard let title = titleField.text, title.count > 0 else {
return
}
for index in 0..<segmentedControl.numberOfSegments {
if let currentTitle = segmentedControl.titleForSegment(at: index), currentTitle == title {
segmentedControl.removeSegment(at: index, animated: true)
}
break
}
titleField.text = nil
}- segment 디자인하기
override func viewDidLoad() {
super.viewDidLoad()
let normalImage = UIImage(named: "segment_normal")
let selectedImage = UIImage(named: "segment_selected")
// segment의 background를 설정하기
segmentedControl.setBackgroundImage(normalImage, for: .normal, barMetrics: .default)
segmentedControl.setBackgroundImage(selectedImage, for: .selected, barMetrics: .default)
var img = UIImage(named: "segment_normal_normal")
print(img?.size)
segmentedControl.setDividerImage(img, forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)
let halfWidth = (img!.size.width - 20) / 3.0
var offset = UIOffset(horizontal: halfWidth, vertical: 0.0)
segmentedControl.setContentPositionAdjustment(offset, forSegmentType: .left, barMetrics: .default)
img = UIImage(named: "segment_normal_selected")
segmentedControl.setDividerImage(img, forLeftSegmentState: .normal, rightSegmentState: .selected, barMetrics: .default)
img = UIImage(named: "segment_selected_normal")
segmentedControl.setDividerImage(img, forLeftSegmentState: .selected, rightSegmentState: .normal, barMetrics: .default)
}Switch
-
Switch의 attribute을 아래와 같이 설정을 하면
-
아래와 같이 switch의 UI가 변하게 된다.
-
그리고 switch 위에 imageview는 아래와 같이 highlighted일 경우를 설정해주자.
-
아래와 같이 switch를 누를 때에 highlight의 boolean값을 변경하고 싶으면 아래와 같이 action을 추가해준다.
@IBOutlet weak var bulbImageView: UIImageView!
@IBOutlet weak var testSwitch: UISwitch!
// switch Action
@IBAction func stateChanged(_ sender: UISwitch) {
bulbImageView.isHighlighted = sender.isOn
}- 초기값을 설정해준다.( Highlighted가 true일 때, isOn도 true일 수 있게)
override func viewDidLoad() {
super.viewDidLoad()
testSwitch.isOn = bulbImageView.isHighlighted
}- 토글을 이용해서 switch 이용하기
@IBAction func toggle(_ sender: Any) {
testSwitch.setOn(!testSwitch.isOn, animated: true)
stateChanged(testSwitch)
}Stepper
-
아래와 같이 storyboard를 구성하자
-
아래와 같이 outlet을 설정해주자.
class StepperViewController: UIViewController {
@IBOutlet weak var valueLabel: UILabel!
@IBOutlet weak var valueStepper: UIStepper!
@IBOutlet weak var autorepeatSwitch: UISwitch!
@IBOutlet weak var continuousSwitch: UISwitch!
@IBOutlet weak var wrapSwitch: UISwitch!- stepper값으로 valuelable 설정하기
// stepper가 바뀌면 valuelabel의 text값이 해당값으로 바뀌게 설정하기
@IBAction func valueChanged(_ sender: UIStepper) {
valueLabel.text = "\(sender.value)"
}- 다른 action 함수 설정하기
// 사용자가 꾹 누르는 것을 허용을 할 것인가?
@IBAction func toggleAutorepeat(_ sender: UISwitch) {
valueStepper.autorepeat = sender.isOn
}
// 꾹 누르고 있으면 바로 올라가는게 아니라 touch event가 다 끝나고 결과값이 변하게 된다.
@IBAction func toggleContinuous(_ sender: UISwitch) {
valueStepper.isContinuous = sender.isOn
}
// true일 경우 최댓값을 도달 후 최솟값으로 바꿔준다.
@IBAction func toggleWrap(_ sender: UISwitch) {
valueStepper.wraps = sender.isOn
}
override func viewDidLoad() {
super.viewDidLoad()
autorepeatSwitch.isOn = valueStepper.autorepeat
continuousSwitch.isOn = valueStepper.isContinuous
wrapSwitch.isOn = valueStepper.wraps
}
}Activity Indicator View
- Animating은 indicator가 움직이고, hides when stopped이면 animation이 멈추면 사라지는 것이다.
↓ 아래와 같이 outlet과 action이 설정이되어있다.
class ActivityIndicatorViewViewController: UIViewController {
@IBOutlet weak var hiddenSwitch: UISwitch!
@IBAction func toggleHidden(_ sender: UISwitch) {
}
@IBAction func start(_ sender: Any) {
}
@IBAction func stop(_ sender: Any) {
}
override func viewDidLoad() {
super.viewDidLoad()
}
}- ActivityIndicatorView outlet을 추가해주자.
@IBOutlet weak var loader: UIActivityIndicatorView!- 미리 추가한 action 코드를 완성시켜주자.
class ActivityIndicatorViewViewController: UIViewController {
@IBOutlet weak var loader: UIActivityIndicatorView!
@IBOutlet weak var hiddenSwitch: UISwitch!
// 토글 스위치를 설정해주기
@IBAction func toggleHidden(_ sender: UISwitch) {
loader.hidesWhenStopped = sender.isOn
}
// activity indicator 시작하기
@IBAction func start(_ sender: Any) {
if !loader.isAnimating{
loader.startAnimating()
}
}
@IBAction func stop(_ sender: Any) {
if loader.isAnimating {
loader.stopAnimating()
}
}
override func viewDidLoad() {
super.viewDidLoad()
hiddenSwitch.isOn = loader.hidesWhenStopped
// loader.isAnimating = true
loader.startAnimating()
}
}Progress View
class ProgressViewViewController: UIViewController {
// progressView outlet 생성하기
@IBOutlet weak var progress: UIProgressView!
// setProgress를 사용하여 80프로까지 차는 애니메이션 구현하기
@IBAction func update(_ sender: Any) {
progress.setProgress(0.8, animated: true)
}
override func viewDidLoad() {
super.viewDidLoad()
// 초기 프로그레스 값은 0.0
progress.progress = 0.0
progress.trackTintColor = UIColor.systemGray
progress.progressTintColor = .systemRed
}
}
Miro.