"Build nonstandard navigation interactions that move focus to the desired location."
포커스를 원하는 위치로 이동시키는 비표준 네비게이션 상호작용을 빌드합니다.
Overview
대부분의 앱에서 간단한 레이아웃은 사용자가 앱과 상호작용하기 위해 필요합니다. 그러나 간혹 포커스 엔진은 바람직한 위치로 포커스를 이동시키지 않거나 포커스 자체를 이동시키지 않습니다. 이와 같은 상황의 경우 UIfocusGuide 클래스를 사용해 포커스를 재연결하는 영역(보이지 않는)을 생성해야 합니다.
Place Your Focusable Items
앱에 초점이 맞춰질 수 있는 아이템을 위치시키고 바람직한 곳으로 정렬시켜야 합니다. 가능하다면 포커스 엔진 내부에 설계된 동작의 이점을 활용하는 것이 좋습니다. 포커스 가이드는 정말 필요할 때에만 사용하시기 바랍니다. Figure 1은 세 버튼의 행을 보여주고 있고, 세 버튼의 열을 보여주고 있습니다. 포커스는 자동으로 같은 행 혹은 열 사이의 버튼에서 이동합니다. 하지만 포커스 엔진은 사용자가 버튼 2 혹은 버튼 3으로 스와이프할 때 포커스를 이동시키지 않습니다. 그러나 이 레이아웃의 경우 목적은 사용자가 아래 방향으로 스와이프할 때 버튼 4가 초점이 맞춰지는 것입니다.
Figure 1 Creating a menu layout
Add a Focus Guide
사용자가 버튼 2 호은 버튼 3으로부터 아래로 스와이프할 때 포커스를 버튼 4로 이동시키려면 포커스 가이드가 요구됩니다. 포커스 가이드를 생성하고 현재 뷰에 포커스 가이드를 추가해야 합니다. 포커스 가이드는 포커스 엔진에 의해 감지가 가능한 것이며, 포커스를 나타낸 쪽으로 재연결합니다.
let myFocusGuide = UIFocusGuide()
self.view.addLayoutGuide(myFocusGuide)Add Constraints to the Focus Guide
사용자가 버튼 2 혹은 버튼 3으로부터 아래로 스와이프하면, 포커스는 버튼 4로 이동해야 합니다. 이렇게 하려면 포커스 가이드를 위한 코드 작성을 통한 제약 추가가 필요합니다. 포커스 가이드가 버튼 2와 버튼3이 결합된 형태로 넓어지도록 해야 합니다. 포커스 가이드의 왼쪽 제약을 버튼 2의 왼쪽 제약에 설정하고, 오른쪽 제약을 버튼 3의 오른쪽 제약으로 설정해야 합니다. 편의를 위해 이 예시는 포커스 가이드의 top과 bottom 제약을 버튼 4의 top과 bottom 제약에 설정합니다. 마지막으로 preferredFocusEnvironments 속성이 버튼 4로 설정되어야 합니다. Figure 2는 Listing 2에서 사용한 제약을 통해 생성된 포커스 가이드의 위치와 크기를 보여주고 있습니다.
Listing 2 Adding constraints to the focus guide
myFocusGuide.leftAnchor.constraint(equalTo: button_2.leftAnchor).isActive = true
myFocusGuide.rightAnchor.constraint(equalTo: button_3.rightAnchor).isActive = true
myFocusGuide.topAnchor.constraint(equalTo: button_4.topAnchor).isActive = true
myFocusGuide.bottomAnchor.constraint(equalTo: button_4.bottomAnchor).isActive = true
myFocusGuide.preferredFocusEnvironments = [button_4]Note
포커스 가이드는 제약이Active로 설정된 경우 제대로 작동하지 않을 것입니다.
Figure 2 Newly created focus guide
사용자가 버튼 2 혹은 버튼 3으로부터 아래로 스와이프할 때, 포커스는 정확히 버튼 4로 재연결됩니다.
Figure 3 Focus redirects to Button 4
See Also
Focus Guides
UIFocusGuide
뷰가 아닌 영역을 초점이 맞춰질 수 있도록 드러내는 객체입니다.
https://developer.apple.com/documentation/uikit/uifocusguide
https://velog.io/@panther222128/UIFocusGuide
