Question

我正在研究一个顶级的streach标题。我的设置：

UIScrollView
    -UIView(a container)
       -UIImageView
       -UIView(subContent view)

我想要的是什么：

将UIImageView粘贴到顶部布局指南。

UIImageView身高为100 - 250.即UIImageView身高初始化为250，但不能低于100。

0 UIImageView和subContentView之间的顶部空格。

因此，当用户向下滚动时，UIImageView将逐渐最小化，并且一旦其高度达到100（最小高度），就不会再将其最小化。

但是subContentView不能与我的UIImageView重叠，并且能够滚动到结尾（准确的内容大小/偏移量）

我能做的是：

我可以根据UIImageView top将layout贴到guide。

我也可以在height上方或下方（增加和减少高度）实现range UIImageView scroll。

但是我无法阻止UIImageView被我的subContentView重叠。 那是当我滚动到底部时，我的UIImageView仍然坚持到顶部并逐渐减小它的大小，当它达到高度100时（我仍然是scrolling底部）我的subContentView开始重叠我的UIImageVIew。

如果我从constraints top指南到layout subcontent没有设置view，那么它是否有意义。

有点像：

format = @"V:|[topGuide]-**some dynamic value based on UIImageViewHeight**-[subContentView]";

我如何实现这一目标。请帮助我，我正在努力工作一天，最后我决定问。

我的代码：

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

self.navigationItem.title = @"Programmatically";

NSMutableDictionary* views = [NSMutableDictionary new];
views[@"super"] = self.view;
views[@"topGuide"] = self.topLayoutGuide; // The bottom of the navigation bar, if a navigation bar is visible. The bottom of the status bar, if only a status bar is visible .. etc...


//Create the ScrollView
UIScrollView* scrollView = [UIScrollView new];
scrollView.delegate = self;
scrollView.translatesAutoresizingMaskIntoConstraints = NO; //we are using auto layout
self.automaticallyAdjustsScrollViewInsets = NO;
[self.view addSubview:scrollView];
views[@"scrollView"] = scrollView;

//Create the scrollview contentview
UIView* contentView = [UIView new];
[contentView setBackgroundColor:[UIColor yellowColor]];
contentView.translatesAutoresizingMaskIntoConstraints = NO; //we are using auto layout
[scrollView addSubview:contentView];
views[@"contentView"] = contentView;

//Add the image view and other addtional views to the content view
topImageView = [[WAPlayerDetailHeader alloc] initWithFrame:CGRectZero andImage:nil];
topImageView.translatesAutoresizingMaskIntoConstraints = NO; //we are using auto layout
topImageView.contentMode = UIViewContentModeScaleAspectFill;
topImageView.clipsToBounds = YES;
[contentView addSubview:topImageView];
views[@"topImageView"] = topImageView;




//Add other content to the scrollable view
UIView* subContentView = [UIView new];
[subContentView setBackgroundColor:[UIColor redColor]];
subContentView.translatesAutoresizingMaskIntoConstraints = NO; //we are using auto layout
[contentView addSubview:subContentView];
views[@"subContentView"] = subContentView;


//Now Let's do the layout
NSArray* constraints;
NSString* format;
NSDictionary* metrics = @{@"imageHeight" : @250.0};

//======== ScrollView should take all available space ========

format = @"|-0-[scrollView]-0-|";
constraints = [NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:nil views:views];
[self.view addConstraints:constraints];

format = @"V:[topGuide]-0-[scrollView]-0-|";
constraints = [NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:nil views:views];
[self.view addConstraints:constraints];



//======== ScrollView Content should tie to all four edges of the scrollview ========

format = @"|-0-[contentView]-0-|";
constraints = [NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:nil views:views];
[scrollView addConstraints:constraints];

format = @"V:|-0-[contentView]-0-|";
constraints = [NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:nil views:views];
[scrollView addConstraints:constraints];



// ========== Layout the image horizontally

format = @"|-0-[topImageView(==super)]-0-|"; // with trick to force content width
constraints = [NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:nil views:views];
[self.view addConstraints:constraints];



// ========== Put the sub view height, and leave room for image

format = @"|-0-[subContentView]-0-|";
constraints = [NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:nil views:views];
[scrollView addConstraints:constraints];


// we leave some space between the top for the image view
format = @"V:|-imageHeight-[subContentView(1000)]-0-|"; /*the view height is set to 700 for the example in order to have enough content */
constraints = [NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:metrics views:views];
[scrollView addConstraints:constraints];



// Start of the magic

format = @"V:[topImageView]-0-[subContentView]"; // image view bottom is subcontent top
constraints = [NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:nil views:views];
[contentView addConstraints:constraints];

// image view top is the top layout

format = @"V:|[topGuide]-0-[topImageView(>=100)]";
constraints = [NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:nil views:views];
[self.view addConstraints:constraints];


//Optional stuff, Add The A view
aView = [[WAPlayerDetailHeader alloc] initWithFrame:CGRectZero andImage:nil];
[aView setAlpha:1.0];
aView.translatesAutoresizingMaskIntoConstraints = NO; //we are using auto layout
aView.backgroundColor = [UIColor colorWithRed:0.79 green:0.9 blue:0.69 alpha:1];
[subContentView addSubview:aView];
views[@"aView"] = aView;

format = @"|[aView]|";
constraints = [NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:nil views:views];
[subContentView addConstraints:constraints];

format = @"V:|-[aView(127)]-5-|";
constraints = [NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:nil views:views];
[subContentView addConstraints:constraints];
}

这就是video demo发生的事情我正在关注this location中的代码我上传了git download and you can see

在autolayout顶部布局指南，UIscrollView，UIImageView中需要帮助

0 个答案: