在一个UIVIewController中垂直放置两个全屏UIView?

时间:2017-03-15 14:28:48

标签: ios iphone uiviewcontroller

我正在寻找一种方法,在一个ViewController中有两个全屏UIViews,这样就会有一个按钮,当用户点击按钮时,它会将它带到第一个视图下方的视图中换句话说...换句话说,我想在一个UIViewcontroller中垂直放置两个全屏UIViews

我正在寻找类似的东西:

enter image description here

4 个答案:

答案 0 :(得分:1)

您可以使用该方案的滚动视图。将两个视图作为子视图添加到scrollview,并在用户点击按钮时更新scrollview的contentoffset(或者在我的示例中为分段控件):

var scrollView: UIScrollView!

override func viewDidLoad() {
    super.viewDidLoad()

    let scrollView = UIScrollView()
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    scrollView.scrollEnabled = false
    view.addSubview(scrollView)
    self.scrollView = scrollView

    let firstView = UIView()
    firstView.translatesAutoresizingMaskIntoConstraints = false
    firstView.backgroundColor = UIColor.lightGrayColor()
    scrollView.addSubview(firstView)

    let secondView = UIView()
    secondView.translatesAutoresizingMaskIntoConstraints = false
    secondView.backgroundColor = UIColor.darkGrayColor()
    scrollView.addSubview(secondView)

    NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|[sv]|", options: [], metrics: nil, views: ["sv": scrollView]))
    NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[sv]|", options: [], metrics: nil, views: ["sv": scrollView]))

    NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|[fv]|", options: [], metrics: nil, views: ["fv": firstView]))
    NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[fv][sv]|", options: [.AlignAllLeading, .AlignAllTrailing], metrics: nil, views: ["fv": firstView, "sv": secondView]))

    firstView.widthAnchor.constraintEqualToAnchor(scrollView.widthAnchor).active = true
    firstView.heightAnchor.constraintEqualToAnchor(scrollView.heightAnchor).active = true

    firstView.widthAnchor.constraintEqualToAnchor(secondView.widthAnchor).active = true
    firstView.heightAnchor.constraintEqualToAnchor(secondView.heightAnchor).active = true

    let segmentedControl = UISegmentedControl(items: ["firstView", "secondView"])
    segmentedControl.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(segmentedControl)
    segmentedControl.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor).active = true
    NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[sc]-20-|", options: [], metrics: nil, views: ["sc": segmentedControl]))

    segmentedControl.selectedSegmentIndex = 0
    segmentedControl.addTarget(self, action: #selector(segmentedControlValueChanged(_:)), forControlEvents: .ValueChanged)
}

func segmentedControlValueChanged(segmentedControl: UISegmentedControl) {
    scrollView.setContentOffset(CGPointMake(0, CGFloat(segmentedControl.selectedSegmentIndex) * scrollView.frame.height), animated: true)
}
希望我帮到你。随便问一下有什么不清楚的地方!

更新(OBJ-C)

@interface ViewController ()

@property (strong, nonatomic) UIScrollView *scrollView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    UIScrollView *scrollView = [UIScrollView new];
    scrollView.translatesAutoresizingMaskIntoConstraints = NO;
    scrollView.scrollEnabled = NO;
    [self.view addSubview:scrollView];
    self.scrollView = scrollView;

    UIView *firstView = [UIView new];
    firstView.translatesAutoresizingMaskIntoConstraints = NO;
    firstView.backgroundColor = [UIColor lightGrayColor];
    [scrollView addSubview:firstView];

    UIView *secondView = [UIView new];
    secondView.translatesAutoresizingMaskIntoConstraints = NO;
    secondView.backgroundColor = [UIColor darkGrayColor];
    [scrollView addSubview:secondView];

    [NSLayoutConstraint activateConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[sv]|" options:0 metrics:nil views:@{@"sv": scrollView}]];
    [NSLayoutConstraint activateConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[sv]|" options:0 metrics:nil views:@{@"sv": scrollView}]];

    [NSLayoutConstraint activateConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[fv]|" options:0 metrics:nil views:@{@"fv": firstView}]];
    [NSLayoutConstraint activateConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[fv][sv]|" options:NSLayoutFormatAlignAllLeading|NSLayoutFormatAlignAllTrailing metrics:nil views:@{@"fv": firstView, @"sv": secondView}]];

    [firstView.widthAnchor constraintEqualToAnchor:scrollView.widthAnchor].active = YES;
    [firstView.heightAnchor constraintEqualToAnchor:scrollView.heightAnchor].active = YES;

    [firstView.widthAnchor constraintEqualToAnchor:secondView.widthAnchor].active = YES;
    [firstView.heightAnchor constraintEqualToAnchor:secondView.heightAnchor].active = YES;

    UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:@[@"firstView", @"secondView"]];
    segmentedControl.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:segmentedControl];
    [segmentedControl.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = YES;
    [NSLayoutConstraint activateConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[sc]-20-|" options:0 metrics:nil views:@{@"sc": segmentedControl}]];

    segmentedControl.selectedSegmentIndex = 0;
    [segmentedControl addTarget:self action:@selector(segmentedControlValueChanged:) forControlEvents:UIControlEventValueChanged];
}

- (void)segmentedControlValueChanged:(UISegmentedControl *)segmentedControl {
    [self.scrollView setContentOffset:CGPointMake(0, segmentedControl.selectedSegmentIndex * CGRectGetHeight(self.scrollView.frame)) animated:YES];
}

@end

答案 1 :(得分:1)

您可以使用UITableView个2个单元格,每个单元格占据整个屏幕(查看如何动态设置高度)。

你可以拥有2个自定义单元格,每个视图对应一个自定义单元格。逻辑很明显。

这样可行,您可以使用各种滚动视图优势,例如捕捉视图顶部以避免仅显示部分视图,或手动控制滚动。

此外,如果您需要更改观看次数,您将成为未来的证明:您可以拥有任意数量的内容!

它们也可能比屏幕尺寸更大/更小,因为它们位于滚动视图中。

答案 2 :(得分:1)

如果您使用autoLayout,它非常简单。将UIView拖放到故事板上,并在superView中添加前导,尾随,底部和顶部。让我们称之为 view1 。现在将另一个UIView拖放到故事板上与 view1 处于相同的层次级别,然后调用此新视图 view2 。现在,在 view2 中为尺寸检查器设置y偏移量,即800。

现在在你的视图中,heirarchy, control +点击 view1 并拖放到 view2 并按 shift 并选择前导,尾随,垂直间距和相等高度约束。确保所有常量都设置为0(如果您希望根据内容推断高度并且不等于全屏高度,请将等高约束优先级设置为250。)

您的屏幕现在应如下所示:

enter image description here

现在选择 view1 并选择顶部约束。附在超级视图上的那个。在此UIViewController课程中为此约束创建一个插座,然后将其命名为viewOneTopSpaceConstraint

现在您所要做的就是在切换按钮的IBAction内:

if viewOneTopSpaceConstraint.constant == 0{

     viewOneTopSpaceConstraint.constant = -UIScreen.main.bounds.size.height
}else{

     viewOneTopSpaceConstraint.constant = 0
}

UIView.animate(withDuration: 0.2, animations: {

     self.view.layoutIfNeeded()

}

答案 3 :(得分:1)

最后一个选项虽然我读过的所有答案都很好但是让用户觉得一个视图在屏幕外而另一个视图开启时基本上将所有内容都固定在superview上。这是我的设置和使用CATransitions。 Setup

主容器固定在主视图上,但如果控件应该放在那里,你可以在顶部添加空间。它包含两个固定到masterContainer的视图。两者都有一个按钮来调用更改。我在应用程序启动时预设了storyboard view2。这是控制器。当您按下视图中的按钮时,视图2将从底部向上滑动。按view2按钮时,view1将向后滑动view2。这是控制器和所需的代码。

{
  date: 'some date',
  seatId: 'some seat id'
}

目标C中的OR

import UIKit

class CATransitionDemoViewController: UIViewController {

    @IBOutlet weak var masterContainer: UIView!
    @IBOutlet weak var view2: UIView!
    @IBOutlet weak var view1: UIView!
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        view2.isHidden = true
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


    @IBAction func viewButton1DidPress(_ sender: Any) {
            let transition = CATransition()
            transition.duration = 0.4
            transition.type = kCATransitionMoveIn
            transition.subtype = kCATransitionFromTop
            self.masterContainer.layer.add(transition, forKey: nil)
            view1.isHidden = !view1.isHidden
            view2.isHidden = !view2.isHidden
    }

    @IBAction func viewButton2DidPress(_ sender: Any) {
            let transition = CATransition()
            transition.duration = 0.4
            transition.type = kCATransitionPush
            transition.subtype = kCATransitionFromBottom
            self.masterContainer.layer.add(transition, forKey: nil)
            view1.isHidden = !view1.isHidden
            view2.isHidden = !view2.isHidden
    }

这样做的好处是,当您在故事板中工作时,无需设置滚动视图即可轻松访问所有内容。此外,CATransitions有更多选择。