[英]Custom view for portrait and and orientation using storyboard using single view controller
I have an app that requires me to have image views and labels to laid out differently depending on portrait or landscape orientation. 我有一个应用程序,要求我根据人像或风景方向对图像视图和标签进行不同的布局。
For example , in portrait mode, I have 2 UIImageViews on top and bottom that share the screen evenly. 例如 ,在纵向模式下,我在顶部和底部有2个UIImageViews,它们均匀共享屏幕。 In landscape mode, the 2 UIImageViews are side by side.
在横向模式下,两个UIImageViews并排放置。 How can this be done using storyboard in Xcode 6 ?
如何使用Xcode 6中的情节提要完成此操作?
Things I have tried: 我尝试过的事情:
w:Any h:Any
, then moved to w:Compact h:Regular
and set constraints for portrait view.Then I moved to w:Any h:Compact
, moved the 2 imageviews side by side and set constraints for landscape view. w:Any h:Any
设置我的2个图像视图的基本值,然后移至w:Compact h:Regular
并设置纵向视图的约束。然后我移至w:Any h:Compact
,将2个图像视图并排移动并为景观设置约束。 Then I get conflicts in w:Compact h:Compact
because of the constraints I have applied for and landscape and portrait orientation. w:Compact h:Compact
发生冲突 。 I think it's because I moved the image views around for landscape orientation before settings the constraints that caused this problem. Is the a way to use only one view controller and a way to rearrange the imageviews/labels and apply new constraints on them when the orientation changes? 是仅使用一个视图控制器的一种方法,还是当方向改变时重新排列图像视图/标签并对其应用新约束的方法吗? Is
-(void)viewDidLayoutSubviews{}
where I put the code to rearrange the image views? 是我放置代码以重新排列图像视图的
-(void)viewDidLayoutSubviews{}
吗? Can someone point me in the right directions? 有人可以指出正确的方向吗? Thanks!
谢谢!
For this case I recommend to make layout programmatically via code. 对于这种情况,我建议通过代码以编程方式进行布局。 Here is example: https://dl.dropboxusercontent.com/u/48223929/Test.zip
例如: https : //dl.dropboxusercontent.com/u/48223929/Test.zip
- (void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
[self layoutImageViewsForViewSize:self.view.frame.size];
}
- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator
{
[self layoutImageViewsForViewSize:size];
}
- (void)layoutImageViewsForViewSize:(CGSize)size
{
// Portrait mode
if (size.height > size.width) {
self.imageView1.frame = CGRectMake(0, 0, size.width, size.height / 2);
self.imageView2.frame = CGRectMake(0, size.height / 2, size.width, size.height / 2);
// Landscape mode
} else {
self.imageView1.frame = CGRectMake(0, 0, size.width / 2, size.height);
self.imageView2.frame = CGRectMake(size.width / 2, 0, size.width / 2, size.height);
}
}
For autolayout: 对于自动版式:
- (void)layoutImageViewsForViewSize:(CGSize)size
{
// Portrait mode
[self.view removeConstraints:self.view.constraints];
if (size.height > size.width) {
NSString *heightLayoutFormatString = [NSString stringWithFormat:@"V:|[_imageView1(%.0f)][_imageView2(%.0f)]|", size.height / 2, size.height / 2];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:heightLayoutFormatString options:0 metrics:nil views:NSDictionaryOfVariableBindings(_imageView1, _imageView2)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"H:|[_imageView1(%.0f)]|", size.width] options:0 metrics:nil views:NSDictionaryOfVariableBindings(_imageView1)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"H:|[_imageView2(%.0f)]|", size.width] options:0 metrics:nil views:NSDictionaryOfVariableBindings(_imageView2)]];
// Landscape mode
} else {
NSString *widthLayoutFormatString = [NSString stringWithFormat:@"H:|[_imageView1(%.0f)][_imageView2(%.0f)]|", size.width / 2, size.width / 2];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:widthLayoutFormatString options:0 metrics:nil views:NSDictionaryOfVariableBindings(_imageView1, _imageView2)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"V:|[_imageView1(%.0f)]|", size.height] options:0 metrics:nil views:NSDictionaryOfVariableBindings(_imageView1)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"V:|[_imageView2(%.0f)]|", size.height] options:0 metrics:nil views:NSDictionaryOfVariableBindings(_imageView2)]];
}
[self.view setNeedsUpdateConstraints];
}
Another solution for autolayout - make your custom subclass of UIView, which contains 2 image views, and layout it programmly without constraints - just setFrame. 自动布局的另一种解决方案-制作您的UIView的自定义子类,其中包含2个图像视图,并以无限制的方式对其进行布局-仅setFrame。 And then add this custom UIView to your storyboard
然后将此自定义UIView添加到您的故事板上
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.