Colin's Blog
[swift] - Swift에서 Alamofire와 함께 사용되는 네트워크 활동 표시기의 위치를 기기 해상도에 맞게 설정하는 방법

앱에서 네트워크 활동을 표시하기 위해 Alamofire와 같은 라이브러리를 사용하면 많은 편리함을 누릴 수 있습니다. 그러나 iPhone과 iPad 같은 다양한 기기 해상도에 대응하여 표시기의 위치를 설정하는 것은 중요합니다.

1. Safe Area 고려하기

앱의 인터페이스 요소를 배치할 때, 기기의 안전 영역을 고려해야 합니다. 이를 통해 사용자가 앱을 보다 편안하게 사용할 수 있습니다. 따라서 네트워크 활동 표시기도 안전 영역을 고려하여 배치해야 합니다.

let indicatorView = UIActivityIndicatorView(style: .gray)
indicatorView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(indicatorView)

NSLayoutConstraint.activate([
    indicatorView.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
    indicatorView.centerYAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerYAnchor)
])

위의 코드는 UIActivityIndicatorView를 생성하고, 해당 뷰에 추가한 다음, Auto Layout을 사용하여 화면 중앙에 위치하도록 설정합니다. view.safeAreaLayoutGuide.centerXAnchor와 view.safeAreaLayoutGuide.centerYAnchor를 사용하여 인디케이터를 안전 영역에 맞게 배치할 수 있습니다.

2. 기기 해상도에 따른 위치 조정

앱이 여러 기기에서 동작할 때, 화면 크기에 따라 네트워크 활동 표시기의 위치를 조정해야 합니다. 아래 코드에서는 기기의 너비를 체크하고, iPhone 5s 또는 그보다 작은 해상도의 경우에만 상단에 위치하도록 설정합니다.

let indicatorView = UIActivityIndicatorView(style: .gray)
indicatorView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(indicatorView)

if UIScreen.main.bounds.width <= 320 {
    // iPhone 5s or smaller resolution
    NSLayoutConstraint.activate([
        indicatorView.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
        indicatorView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20)
    ])
} else {
    // Other resolutions
    NSLayoutConstraint.activate([
        indicatorView.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
        indicatorView.centerYAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerYAnchor)
    ])
}

위의 코드에서는 UIScreen.main.bounds.width를 사용하여 기기의 너비를 확인합니다. 너비가 320보다 작을 경우, 즉 iPhone 5s나 그 이전의 기기일 경우에는 인디케이터가 화면 상단에 위치하도록 설정합니다. 그 외의 경우에는 중앙에 위치하도록 설정합니다.

3. 참고 자료

© 2018 Colin. All rights reserved.