برنامه نویسی

آموزش 21: تکنیک های پیشرفته طرح بندی خودکار برای UI های پاسخگو

فهرست مطالب

  1. آشنایی با طرح بندی خودکار
  2. درک محدودیت ها و مناطق امن
  3. طرح تطبیقی ​​با کلاسهای اندازه
  4. نوع پویا و پشتیبانی از دسترسی
  5. با استفاده از نماهای پشته برای چیدمان های انعطاف پذیر
  6. انیمیشن های محدود برای انتقال UI صاف
  7. ساختن یک اسکنر عمق AR با طرح Lidar و Auto
  8. آزمایش و اشکال زدایی مسائل مربوط به طرح بندی خودکار
  9. نتیجه گیری و بهترین شیوه ها

1. مقدمه ای برای طرح بندی خودکار

طرح بندی خودکار با تعریف روابط بین عناصر UI با استفاده از محدودیت ها ، UI های پاسخگو را در اندازه های مختلف صفحه نمایش امکان پذیر می کند.

تخته داستان در مقابل طرح بندی خودکار برنامه ریزی

  • صفحه داستانی: رویکرد بصری ، نمونه سازی سریع.
  • برنامه ای: مؤلفه های انعطاف پذیر تر و قابل استفاده مجدد.
let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(button)
NSLayoutConstraint.activate([
    button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    button.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    button.widthAnchor.constraint(equalToConstant: 200),
    button.heightAnchor.constraint(equalToConstant: 50)
])
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

2. درک محدودیت ها و مناطق امن

  • اندازه محتوای ذاتی: اندازه عنصر UI را تعیین می کند.
  • مقاومت در اولویت و فشرده سازی: مدیریت تغییر اندازه عنصر.
label.setContentHuggingPriority(.defaultHigh, for: .horizontal)
label.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

3. طرح تطبیقی ​​با کلاس های اندازه

برای تمایز بین طرح های iPhone و iPad از کلاس های اندازه استفاده کنید.

if traitCollection.horizontalSizeClass == .regular {
    print("Running on iPad or larger iPhone")
}
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

4. نوع پویا و پشتیبانی از دسترسی

از نوع پویا برای مقیاس گذاری قلم استفاده کنید:

label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

5. با استفاده از نماهای پشته برای چیدمان های انعطاف پذیر

نمای پشته به طور خودکار طرح را بر اساس محدودیت های اندازه مدیریت می کند.

let stackView = UIStackView(arrangedSubviews: [label, button])
stackView.axis = .vertical
stackView.spacing = 10
stackView.distribution = .fillEqually
view.addSubview(stackView)
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

6. انیمیشن های محدود برای انتقال صاف UI

محدودیت های چیدمان خودکار می تواند متحرک شود تا انتقال صاف ایجاد شود.

UIView.animate(withDuration: 0.3) {
    self.buttonConstraint.constant += 50
    self.view.layoutIfNeeded()
}
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

7. ساختن یک اسکنر عمق AR با طرح Lidar و Auto

چرا از لیدر استفاده می کنیم؟

LIDAR (تشخیص نور و محدوده) در مدل های iPhone Pro در دسترس است و سنجش عمق دقیق را امکان پذیر می کند.

راه اندازی یک پروژه Arkit

  • یک برنامه Arkit را در Xcode ایجاد کنید.
  • اضافه کردن ARKit وت RealityKit چارچوب ها
import ARKit
import UIKit

class LiDARScannerViewController: UIViewController, ARSCNViewDelegate {
    let sceneView = ARSCNView()
    let depthLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupSceneView()
        setupDepthLabel()
    }

    func setupSceneView() {
        sceneView.frame = view.bounds
        sceneView.delegate = self
        sceneView.session.run(ARWorldTrackingConfiguration())
        view.addSubview(sceneView)
    }

    func setupDepthLabel() {
        depthLabel.translatesAutoresizingMaskIntoConstraints = false
        depthLabel.text = "Depth: 0m"
        depthLabel.textAlignment = .center
        view.addSubview(depthLabel)

        NSLayoutConstraint.activate([
            depthLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            depthLabel.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20)
        ])
    }

    func renderer(_ renderer: SCNSceneRenderer, updateAtTime time: TimeInterval) {
        guard let frame = sceneView.session.currentFrame else { return }
        if let depthData = frame.sceneDepth?.depthMap {
            let avgDepth = depthData.mean()
            DispatchQueue.main.async {
                self.depthLabel.text = String(format: "Depth: %.2fm", avgDepth)
            }
        }
    }
}

extension CVPixelBuffer {
    func mean() -> Float {
        let width = CVPixelBufferGetWidth(self)
        let height = CVPixelBufferGetHeight(self)
        CVPixelBufferLockBaseAddress(self, .readOnly)
        let buffer = CVPixelBufferGetBaseAddress(self)!
        let sum = (0..<height).reduce(0.0) { (sum, row) -> Float in
            let pixels = buffer.assumingMemoryBound(to: Float.self)
            return sum + pixels[row * width]
        }
        CVPixelBufferUnlockBaseAddress(self, .readOnly)
        return sum / Float(width * height)
    }
}
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

8. آزمایش و اشکال زدایی مسائل مربوط به طرح بندی خودکار

view.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.deactivate(view.constraints)
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

9. نتیجه گیری و بهترین شیوه ها

  • استفاده کردن نمای پشته وت کلاسهای اندازه برای طرح های انعطاف پذیر.
  • اهرم نوع پویا برای دسترسی
  • محدودیت های تحریک برای انتقال صاف UI.
  • آزمون با اشکال زدایی XCode برای مسائل چیدمان

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا