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

فهرست مطالب
- آشنایی با طرح بندی خودکار
- درک محدودیت ها و مناطق امن
- طرح تطبیقی با کلاسهای اندازه
- نوع پویا و پشتیبانی از دسترسی
- با استفاده از نماهای پشته برای چیدمان های انعطاف پذیر
- انیمیشن های محدود برای انتقال UI صاف
- ساختن یک اسکنر عمق AR با طرح Lidar و Auto
- آزمایش و اشکال زدایی مسائل مربوط به طرح بندی خودکار
- نتیجه گیری و بهترین شیوه ها
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 برای مسائل چیدمان