iOS 오리지널 종이 반 장 보세요.

올해 내가 WWDC에서 가장 두드러진 것은 현지 침대 시트 반 장을 만들 수 있다는 것이다.이것은 내가 해 본 모든 일의 디자이너들의 요구이다. 지금까지 우리는 줄곧 반드시 스스로 손을 써야 한다.그래서 나는 this video의 코드를 사용해서 그들이 실천에서 어떻게 일을 하는지 볼 것이라고 생각한다.이들 코드는 모두 맥OS 11.3(Big Sur)에서 Xcode 13 베타 1로 작성돼 iOS 15 시뮬레이터에서 실행되고 있다.
선물의 질을 양해해 주십시오.유한한 팔레트를 사용하면 점차적인 효과가 좋지 않지만, 이것은 내가 찾을 수 있는 가장 간단한 방법이며, 간단한 예로 이 침대 시트들의 운동 상황을 설명할 수 있다.

워크시트 데모 컨트롤러 찾기

내가 주의한 첫 번째 일은 예시 코드가 실제로 컴파일되지 않았다는 것이다. (적어도 내가 실행하는 Xcode 버전에는 없다.)UIViewController에는 sheetPresentationController라는 속성이 없다.presentationController 속성을 통해 접근할 수 있습니다. modalPresentationStyle을 pageSheet 또는 formSheet로 설정하지만 UISheetPresentationController로 전환해야 새로운 속성에 접근할 수 있습니다.예시 코드를 실행하기 위해 이 패드를 추가하고 있지만, 새로운 sheetPresentationController 속성은 최종적으로 사용할 수 있을 것이라고 생각합니다.

extension UIViewController {
 var sheetPresentationController: UISheetPresentationController? {
   presentationController as? UISheetPresentationController
 }
}

이렇게 해서 나는 몇 가지 표를 추가하기 시작하는 방법이 생겼다.

override func viewDidLoad() {
    super.viewDidLoad()

    view.backgroundColor = .systemTeal
    presentSheet()
}

override func viewDidAppear(_ animated: Bool) {
    presentSheet()
}

private func presentSheet() {
    let viewController = UIViewController()
    viewController.view.backgroundColor = .systemOrange

    let sheet = viewController.sheetPresentationController
    sheet?.detents = [.medium(), .large()]

    present(viewController, animated: true)
}

이것은 우리에게 이런 필름을 주었다.

예쁘게 보이게.

이것은 매우 멋진 상자를 열면 바로 사용할 수 있다.그것은 보기에 매우 좋아 보인다. 너는 그것을 전체 높이로 확장해서 네가 원하는 대로 버릴 수 있다.그러나 나는 그것의 맞춤형성을 보고 싶다. 그것의 장점과 단점을 보고 싶다. 나는 그것이 이 과정에서 보기에 매우 좋아 보이고 싶다. 그래서 우리는 그 안에 점차적인 변화를 넣고 싶다.
우선, 나는 이 간단한 GradientView 을 사용한다. 이것은 UIView 하위 클래스이고, 하나는 CAGradientLayer 층 클래스로 되어 있으며, 그것에 대한 직접적인 접근을 제공한다.

class GradientView: UIView {
    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }

    var gradientLayer: CAGradientLayer {
        return layer as! CAGradientLayer
    }
}

그리고 view의 ViewController를 GradientView로 설정합니다.

private lazy var contentView: GradientView = .init()

override func loadView() {
    view = contentView
}

그런 다음 반랜덤 색상 조합을 만듭니다.

let colorSets: [[UIColor]] = [
    [.systemTeal, .systemGreen, .systemOrange],
    [.systemRed, .systemPurple, .systemBlue],
    [.systemPink, .systemIndigo, .systemTeal],
    [.systemPink, .systemYellow, .systemGreen],
    [.systemGreen, .systemTeal, .systemPurple],
    [.systemYellow, .systemPink, .systemIndigo],
    [.systemRed, .systemYellow, .systemTeal]
]

// in viewDidLoad()
contentView.gradientLayer.colors = colorSets.randomElement()!
                                            .map(\.cgColor)

더 많은 종류를 늘리기 위해 나는 두 가지 다른 출발점을 추가했다.

let startPoints: [CGPoint] = [
    CGPoint(x: 0.5, y: 0),
    CGPoint(x: 0, y: 0.3),
    CGPoint(x: 0.5, y: 1),
    CGPoint(x: 0, y: 0.8),
    CGPoint(x: 1, y: 0.3),
    CGPoint(x: 1, y: 0.8),
]

extension CGPoint {
    func opposite() -> CGPoint {
        let x = 1 - self.x
        let y = 1 - self.y
        return CGPoint(x: x, y: y)
    }
}

// in viewDidLoad()
let start = startPoints.randomElement()!
contentView.gradientLayer.startPoint = start
contentView.gradientLayer.endPoint = start.opposite()

마지막으로, 새 작업표를 추가하기 위해서, 나는 viewDidAppear 에 자동으로 추가하는 것이 아니라 단추를 추가했다.이것은 귀속을 허용하기 때문에, 창고에 새로운 교체를 계속 추가할 수 있습니다.이것은 새로운UIButtonConfiguration을 사용한 것입니다. 저는 여기서 상세하게 소개하지 않겠지만 나중에 글에서 소개할 수 있습니다.말할 것도 없이 그것도 괜찮다.

private let addButton = UIButton(configuration: .plain())

// in viewDidLoad()
let arrowConfig = UIImage.SymbolConfiguration(pointSize: 36,
                                              weight: .black)
let arrow = UIImage(systemName: "arrow.clockwise",
                    withConfiguration: arrowConfig)
addButton.configuration?.image = arrow
addButton.tintColor = .white
let addAction = UIAction { _ in self.presentSheet() }
addButton.addAction(addAction, for: .primaryActionTriggered)

view.addSubview(addButton)
addButton.centerAnchors == view.centerAnchors

// in presentSheet()
sheetPresentationController?.animateChanges {
    sheetPresentationController?.selectedDetentIdentifier = .large
}

let viewController = ViewController()

이것은 이와 유사한 일을 야기시켰다.

맞춤형 제품

이제 훨씬 재밌어 보여요!WWDC 회의에서 논의된 인터페이스 중 일부를 처리하는 데 매우 견고한 토대를 제공합니다.나는 처음으로 혼란을 시도했다. preferredCornerRadius. 나는 그것이 아직 UISheetPresentationController 의 부동산이 아니라는 것을 발견했다.그러나 __preferredCornerRadius라는 개인 버전이 있는데, 다시 한 번 제너럴 모터스가 발표되기 전에 복구될 것이라고 가정합니다. 이 문제를 해결하기 위해 프로그램에 슬라이더를 설치할 수 있도록 슬라이더를 추가했습니다.

static var preferredCornerRadius: CGFloat = 24
private let cornerRadiusSlider = UISlider()

// in viewDidLoad()
cornerRadiusSlider.maximumValue = 60
cornerRadiusSlider.minimumValue = 0
cornerRadiusSlider.maximumTrackTintColor = .white.withAlphaComponent(0.3)
cornerRadiusSlider.minimumTrackTintColor = .white
cornerRadiusSlider.value = Float(Self.preferredCornerRadius)

let updateRadiusAction = UIAction { _ in self.updateRadius() }
cornerRadiusSlider.addAction(updateRadiusAction, for: .primaryActionTriggered)

view.addSubview(cornerRadiusSlider)
cornerRadiusSlider.horizontalAnchors == view.readableContentGuide.horizontalAnchors + 20
cornerRadiusSlider.topAnchor == addButton.bottomAnchor + 20

// in presentSheet()
sheet?.__preferredCornerRadius = Self.preferredCornerRadius

private func updateRadius() {
    let radius = CGFloat(cornerRadiusSlider.value)
    sheetPresentationController?.__preferredCornerRadius = radius
    Self.preferredCornerRadius = radius
}

이것은 네가 상상한 것과 많이 다르지 않다.슬라이더를 이동하면 각도 반지름이 업데이트됩니다.

흥미로운 것은 시트 시뮬레이터가 절반 높이에 있는 경우 시트 시뮬레이터에서 기본 설정 각도 반지름을 설정하면 뒤쪽 뷰에는 영향을 주지 않지만 전체 높이에서는 영향을 줍니다.


더 흥미로운 것은 전체 높이에서도 뒷모습에만 영향을 미친다는 것이다.

실천에서 이러한 일들의 대다수는 큰 영향을 미치지 않을 것이다. 왜냐하면 당신은 어느 정도에 도면을 한 장 한 장 보여 줄 것인가, 아니면 사용자가 보기의 각반경을 마음대로 변경할 수 있도록 허락할 것인가?어디로 떨어질지 아는 건 좋은 일이야.prefersGrabberVisible, prefersEdgeAttachedInCompactHeight 및 smallestUndimmedDetentIdentifier 모두 액세스가 가능하며 작업이 필요합니다.프로그램에 공개하고 단추에 연결하는 방법을 추가했습니다.

private func updateGrabber() {
    showsGrabberButton.isSelected.toggle()
    sheetPresentationController?.animateChanges {
        sheetPresentationController?.prefersGrabberVisible = showsGrabberButton.isSelected
    }
}

private func updateEdgeAttached() {
    edgeAttachedButton.isSelected.toggle()
    sheetPresentationController?.animateChanges {
        sheetPresentationController?.prefersEdgeAttachedInCompactHeight = edgeAttachedButton.isSelected
    }
}

private func updateDimming(_ detent: Detent) {
    sheetPresentationController?.animateChanges {
        sheetPresentationController?.smallestUndimmedDetentIdentifier = detent.identifier
    }
}

아이패드에서도 잘 작동하지만, 보기가popover에 나타나면 popoverPresentationController?.adaptiveSheetPresentationController sheet controller에 접근해야 합니다.

한 가지 멋진 것은 도면을 뒤에 있는 보기를 어둡게 하지 않도록 설정하면 뒤에 있는 보기 컨트롤러와 상호작용을 할 수 있다는 것이다.이 장난감 프로그램에서 이것은 아무것도 의미하지 않지만, WWDC 영상은 밑에 (전면 컨트롤러에) 이미지 선택기를 표시하고, 맨 위에 (후면 컨트롤러에) 이미지 선택기를 표시하는 좋은 예가 있다.

마무리

요컨대, 나는 그것이 매우 매끄러워 보이고, (대부분) 네가 원하는 대로 일할 수 있다고 생각한다.만약 그들이 유니버설 발표를 하기 전에 인터페이스의 마지막 몇 부분을 정리했다면, 나는 틀림없이 디자인이 필요할 때 그것을 나의 응용 프로그램에 사용할 것이다.내 장난감 앱을 다운받아서 this repo.에서 이걸 혼자 놀아요.
도움이 된다면 buy me a coffee!