با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، در خدمت شما هستیم با جلسه دیگری از دوره آموزشی iOS ، با عنوان پوسته های خودکار در iOS.پوسته های خودکار در ورژن iOS 6.0 معرفی شد. وقتی ما از پوسته های خودکار در iOS استفاده می کنیم، هدف استقرار ما باید ۶٫۰ و بالاتر باشد. پوسته های خودکار در iOS به ما در ایجاد و هماهنگی رابط های کاربری در iOS کمک می کند.همچنین می توانیم برای جهت گیری های مختلف و برای چندین دستگاه از آن استفاده کنیم.
هدف مثال
ما دو دکمه اضافه می کنیم که در یک فاصله معین از مرکز صفحه قرار می گیرند.
ما همچنین سعی خواهیم کرد یک فیلد متن با اندازه قابل تغییر مجدد اضافه کنیم که از فاصله مشخصی از بالای دکمه ها قرار می گیرد.
ما یک فیلد متنی و دو دکمه در کد همراه با محدودیت های آن اضافه خواهیم کرد.
محدودیت های هر عنصر UI ایجاد خواهد شد و به نمایش فوق العاده اضافه می شود.
ما باید تغییر اندازه خودکار را برای هر یک از عناصر UI اضافه کنیم تا نتیجه مورد نظر را بدست آوریم.
در ابتدا مراحل زیرا طی نمایید :
مرحله ۱ : یک برنامه مبتنی بر View ساده ایجاد کنید.
مرحله ۲ : ما تنها فایل ViewController.m را ویرایش خواهیم کرد که کد مربوطه به صورت زیر است :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | #import "ViewController.h" @interface ViewController () @property (nonatomic, strong) UIButton *leftButton; @property (nonatomic, strong) UIButton *rightButton; @property (nonatomic, strong) UITextField *textfield; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; UIView *superview = self.view; /*1. Create leftButton and add to our view*/ self.leftButton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; self.leftButton.translatesAutoresizingMaskIntoConstraints = NO; [self.leftButton setTitle:@"LeftButton" forState:UIControlStateNormal]; [self.view addSubview:self.leftButton]; /* 2. Constraint to position LeftButton's X*/ NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute: NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f]; /* 3. Constraint to position LeftButton's Y*/ NSLayoutConstraint *leftButtonYConstraint = [NSLayoutConstraint constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:superview attribute: NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f]; /* 4. Add the constraints to button's superview*/ [superview addConstraints:@[ leftButtonXConstraint, leftButtonYConstraint]]; /*5. Create rightButton and add to our view*/ self.rightButton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; self.rightButton.translatesAutoresizingMaskIntoConstraints = NO; [self.rightButton setTitle:@"RightButton" forState:UIControlStateNormal]; [self.view addSubview:self.rightButton]; /*6. Constraint to position RightButton's X*/ NSLayoutConstraint *rightButtonXConstraint = [NSLayoutConstraint constraintWithItem:self.rightButton attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute: NSLayoutAttributeCenterX multiplier:1.0 constant:60.0f]; /*7. Constraint to position RightButton's Y*/ rightButtonXConstraint.priority = UILayoutPriorityDefaultHigh; NSLayoutConstraint *centerYMyConstraint = [NSLayoutConstraint constraintWithItem:self.rightButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute: NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f]; [superview addConstraints:@[centerYMyConstraint, rightButtonXConstraint]]; //8. Add Text field self.textfield = [[UITextField alloc]initWithFrame: CGRectMake(0, 100, 100, 30)]; self.textfield.borderStyle = UITextBorderStyleRoundedRect; self.textfield.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:self.textfield]; //9. Text field Constraints NSLayoutConstraint *textFieldTopConstraint = [NSLayoutConstraint constraintWithItem:self.textfield attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:NSLayoutAttributeTop multiplier:1.0 constant:60.0f]; NSLayoutConstraint *textFieldBottomConstraint = [NSLayoutConstraint constraintWithItem:self.textfield attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:self.rightButton attribute:NSLayoutAttributeTop multiplier:0.8 constant:-60.0f]; NSLayoutConstraint *textFieldLeftConstraint = [NSLayoutConstraint constraintWithItem:self.textfield attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:superview attribute: NSLayoutAttributeLeft multiplier:1.0 constant:30.0f]; NSLayoutConstraint *textFieldRightConstraint = [NSLayoutConstraint constraintWithItem:self.textfield attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:superview attribute: NSLayoutAttributeRight multiplier:1.0 constant:-30.0f]; [superview addConstraints:@[textFieldBottomConstraint , textFieldLeftConstraint, textFieldRightConstraint, textFieldTopConstraint]]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end |
در بقیه مراحل، ما محدودیت ها را ایجاد کردیم و آن محدودیت ها را به دیدگاه های مربوطه اضافه کردیم، که در واقع خود view هستند.
محدودیت های یکی از دکمه های سمت چپ همانطور که در زیر نشان داده شده است می باشد:
1 2 3 4 | NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute: NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f]; |
ما دارای محدودیت constraintWithItem و همچنین toItem هستیم که بین آن عناصر UI که محدودیت ایجاد می کنند تصمیم می گیریم.
این ویژگی بر اساس دو عنصر با هم مرتبط می شود. “relatedBy” تصمیم می گیرد تا چه میزان ویژگی ها بین عناصر را تحت تاثیر قرار دهد.
در مثال فوق، X از leftButton همیشه بزرگتر یا برابر با -۶۰ پیکسل نسبت به مرکز نمایش اصلی است.
به طور مشابه، محدودیت های دیگر تعریف می شوند.
هنگامی که ما برنامه را اجرا می کنیم، خروجی زیر را در شبیه ساز آیفون دریافت می کنیم :
هنگامی که جهت شبیه ساز را به landscape تغییر می دهیم، خروجی زیر را خواهیم گرفت :
هنگامی که ما برنامه را بطور مشابه در شبیه ساز آیفون ۵ اجرا می کنیم، خروجی زیر را دریافت می کنیم :
هنگامی که جهت شبیه ساز را به landscape تغییر می دهیم، خروجی زیر را خواهیم گرفت :
فرض کنید برنامه iOS را برای یک ورژن از آیفون مانند ۵S بسازید و ناگهان آن را در آیفون ۶S باز کنید، خواهید دید که طرح کلی در موقعیت ثابت نیست و کل طرح رابط کاربری مبهم می شود.اگر ما از طرح خودکار استفاده کنیم، برنامه ما در همه دستگاهها بدون در نظر گرفتن اندازه، یکسان خواهد بود و هماهنگی رابط های کاربری در iOS شکل می گیرد.