Create effect top image is overlaid by content when sliding up - ios

I have to create an effect like in the images but I don't know how to do it (and also don't know how to call this effect to search). You can see in the pictures, at first we have an image at the top of page. After that, when we scroll up, the image moves up while the content moves with higher speed to cover the image. Can you give me a link or a suggestion?

First of all take imageview and scrollview in your apps with IBOutlet.
In your YourViewController.h file
#property(nonatomic,retain) IBOutlet UIImageView *imagev;
#property(nonatomic,retain) IBOutlet UIScrollView *scr;
In your YourViewController.m file
- (void)viewDidLoad
{
scr.contentSize = CGSizeMake(320,850);
scr.decelerationRate = UIScrollViewDecelerationRateNormal;
[super viewDidLoad];
}
Set imagev frame according to scrolling in scrollview delegate.
pragma mark - ScrollView Delegate
-(void)scrollViewDidScroll:(UIScrollView *)callerScrollView
{
NSLog(#"%f",callerScrollView.contentOffset.y);
[imagev setFrame:CGRectMake(imagev.frame.origin.x, - 0.5 *callerScrollView.contentOffset.y, imagev.frame.size.width, imagev.frame.size.height)];
}
Output :

Related

Xcode storyboard with dynamic views

I have a problem about Xcode storyboard and dynamically showed views.
I have 3 vertically aligned views in my storyboard and each one is linked with each other with top-bottom relationship with constraints
However during runtime I want to hide the 2nd view and replace its place with the 3'rd view (which is a tableview) and to fill the both 2nd and 3rd places I'm trying to extend the height of tableview.
However I cannot succeed. I have tried lots of things but closest thing I get is to transform the 3rd view to 2nd place but the height remains the same
My latest code is in below
if (status) {
self.filterView.hidden = NO;
self.contentTable.frame = contentTableFrame;
} else {
self.filterView.hidden = YES;
CGFloat predictedHeight = self.contentTable.frame.size.height+(self.contentTableFrame.origin.y-self.filterView.frame.origin.y);
self.contentTable.transform = CGAffineTransformMakeTranslation(0, self.filterView.frame.origin.y-self.contentTable.frame.origin.y);
for (NSLayoutConstraint *constraint in self.contentTable.constraints) {
if (constraint.firstAttribute == NSLayoutAttributeHeight) {
constraint.constant = predictedHeight;
}
}
}
You can also find the screenshot of the 3rd view's constraints. What should I do to fix that? Does anyone have any idea about it?
I also have another solution to this problem . But I've another problem on that too.
When I executed the below line of code my 3rd view move to 2nd view's place but its height remains the same so on the bottom of the page it happens to seems a blank space.
self.contentTable.transform = CGAffineTransformMakeTranslation(0, self.filterView.frame.origin.y-self.contentTable.frame.origin.y);
In order to fix that I've tried to change its height(with .frame = CGRectMake(.....) )
but it didn't work.Then I've tried to scale the 3rd view(which is a tableview) and it succeed but because I've scaled it all the cells inside the tableview scaled too and the visual appearance of the table has broken. So I couldn't able to find a solution to that problem.
It seemed like a challenge.
Thanks
Sorry it is in objective-c.
I get the top contraint from the TableView (Storyboard). When I hide the topView, I get the height of my topView and change the top constraint constant. You can see it in #IBAction. Finally, the tableView is stretched and takes the space left from the topView. Is that what you were looking ?
ViewController.h
#import <UIKit/UIKit.h>
#interface ViewController : UIViewController<UITableViewDataSource, UITableViewDelegate>
#property (weak, nonatomic) IBOutlet UIView *topView;
#property (weak, nonatomic) IBOutlet UITableView *tableView;
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *topTableViewConstraint;
- (IBAction)pushTest:(id)sender;
#end
ViewController.m
- (IBAction)pushTest:(id)sender {
if (self.topView.hidden) {
self.topTableViewConstraint.constant = 0;
}else{
self.topTableViewConstraint.constant = -self.topView.bounds.size.height;
}
self.topView.hidden = !self.topView.hidden;
}
you can hide filterview but you can't replace it by tableview.
if you want to replace it by table view.You need to use method BringSubviewToFront for That Tableview.it will bring that tablview to front and set filterview to back which is hidden for ui.

UIImageView not redrawing

I'm using code to resize a UIImageView by reducing its width to .5 its original value.
The code is
- (void)viewDidLoad
{
[super viewDidLoad];
self.allisonHall.newWidth = .5;
self.allisonHall.frame = CGRectMake(self.allisonHall.frame.origin.x,
self.allisonHall.frame.origin.y,
self.allisonHall.frame.size.width*self.allisonHall.newWidth,
self.allisonHall.frame.size.height);
self.allisonHall.contentMode = UIViewContentModeLeft;
self.allisonHall.clipsToBounds = YES;
NSLog(#"%f",self.allisonHall.frame.size.width);
}
and the result of the NSLog is 140, .5*280 as expected.
However, in the view the UIImageView remains at its original width.
The UIImageView is linked as
#property (weak, nonatomic) IBOutlet XYZdiningHall *allisonHall;
within the view controller's .h file, where XYZdiningHall is a subclass of UIImageView
Should the UIImageView's frame be changing given this code or do I need to call another method to fire the change?
Do you need to use UIViewContentModeLeft? You can use UIViewContentModeScaleAspectFit or UIViewContentModeScaleAspectFill and the image will be redrawn (the aspect modes are related to the image view bounds, Left isn't).

Xcode 5, how to use autolayout with orientation, in the shown scenario?

I'm struggling with AutoLayout, to arrange two buttons as shown below.
I've watched the initial 2012 WWDC video and the Xcode-5 WWDC update video.
Also various other videos and tutorials.
I'm having trouble describing the issue so I've produced an image to show the problem.
I can align simple layouts, like two buttons at the bottom of the screen and I've tried adding a container then adding the buttons to that.
I'm beginning to think this might not be possible.
Can someone advise?
The following seem like common behaviors that we might ask Auto Layout to perform:
move the top half of a layout in portrait to the left half in landscape
and, move the bottom half of a layout in portrait to the right half in landscape
Here's how I would do it. I would create two content views for the two halves of the layout. Although the content views would be created in IB, all of their constraints would merely be placeholders and removed at runtime (by checking a box in each constraint's Attributes inspector). In order to create placeholder constraints, however, you need to create constraints explicitly in IB. In code, the constraints for the content views are created dynamically in response to device rotation.
The advantage to this approach is that you can layout the subviews for the content views in IB and not have to worry about orientation. The configuration of the content views' constraints could be abstracted out into a UIViewController base class.
Here's a screenshot of the content views without any subviews. The root view is white and can be seen peaking behind the status bar.
Here's the code for configuring the content views' constraints:
#interface ViewController ()
#property (weak, nonatomic) IBOutlet UIView *topContentView; // moves to the left half in landscape
#property (weak, nonatomic) IBOutlet UIView *bottomContentView; // moves to the right half in landscape
#property (nonatomic, strong) NSArray *constraintsForContentViews;
#end
#implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.constraintsForContentViews = #[];
[self configureConstraintsForContentViewsForInterfaceOrientation:UIInterfaceOrientationPortrait];
}
// instead of creating this helper method, this code could be placed in the view controller's updateViewConstraints method
- (void)configureConstraintsForContentViewsForInterfaceOrientation:(UIInterfaceOrientation)orientation
{
UIView *topView = self.topContentView;
UIView *bottomView = self.bottomContentView;
UIView *leftView = self.topContentView; // unnecessary but improves readibility of visual format
UIView *rightView = self.bottomContentView; // unnecessary but improves readibility of visual format
id topGuide = self.topLayoutGuide;
id bottomGuide = self.bottomLayoutGuide;
NSArray *visualFormats = nil;
// remove prior constraints
[self.view removeConstraints:self.constraintsForContentViews];
self.constraintsForContentViews = #[];
// build visual formats for orientation
if (UIInterfaceOrientationIsPortrait(orientation)) {
// portrait
visualFormats = #[#"H:|[topView]|", #"H:|[bottomView]|", #"V:[topGuide][topView(bottomView)][bottomView(topView)][bottomGuide]"];
} else {
// landscape: topView becomes leftView by name only, bottomView becomes rightView by name only
visualFormats = #[#"H:|[leftView(rightView)][rightView(leftView)]|", #"V:[topGuide][leftView][bottomGuide]", #"V:[topGuide][rightView][bottomGuide]"];
}
// install new constraints
for (NSString *format in visualFormats) {
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:0 views:NSDictionaryOfVariableBindings(topView, bottomView, leftView, rightView, topGuide, bottomGuide)];
[self.view addConstraints:constraints];
self.constraintsForContentViews = [self.constraintsForContentViews arrayByAddingObjectsFromArray:constraints];
}
}
- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
[self configureConstraintsForContentViewsForInterfaceOrientation:toInterfaceOrientation];
}
#end
One thing I've been doing is, on your "left pane", add top and left constraints, then height and width. On the "right pane", add bottom and right constraints, height and width.
Then on - willRotateToInterfaceOrientation:duration: you can adjust each constraint's constant to make the sizes exactly what you want.

UIScrollView in Interface Builder not working

I originally had a normal view with a bunch of stuff in it, and I want that view to be an UIScrollView, so I created a new ScrollView and dragged everything over. The view is not scrolling.
After looking around - I unchecked use autolayout, but that didn't work. I also realize that this could be solved by setting contentSize, but I have access to this view through a variable that is of type UIView, and not UIScrollView. In other words I would be doing -
self.someController.view.contentSize = //something
where self.someController.view is only an UIView and contentSize is not a property of UIView(or at least that's what I'm seeing- I get compiler warnings).
Why is this scroll view not scrolling?
EDIT -
So I stupidly forgot I can cast - I did that, but it's still not working -
UIScrollView* basicCardView = ((UIScrollView *)self.detailController.view);
basicCardView.contentSize = CGSizeMake(basicCardView.frame.size.width * 12,
basicCardView.frame.size.height);
You need to connect your scrollview to Iboutlet var in .m .
Create var in your interface:
IBOutlet UIScrollView *scrollview;
And connect to your scrollview in storyboard, then you can set contentsize.
[scrollview setContentSize:CGSizeMake(2000,200)];
Elto has it correct. To elaborate: In your view controller .m say it's called MyViewController:
#interface MyViewController ()
#property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
#end
Go back to storyboard, select your view controller and select the connections tab (last one on the upper right). You should now see an outlet called scrollView. Drag a connection from that outlet to the scroll view that you added to the scene.
Now the content size code can be written. Just to get it working, use large constants in content size, like:
self.scrollView.contentSize = CGSizeMake(1000, 1000);
The size you're setting in the post (on the wrong view) looks like it's just the size of one of the subviews. You want the content size of the scroll view to be more like a multiple of the scrollView's size. You want the rectangle it can scroll within to at least encompass the frame (not the bounds) of every subview it contains.

Size of a ViewController Containers UIView

I have a ViewController Container that is 400 high on the iphone5. When I use it on a iphone4 it squashes the view like it does to everything. In this case I want the view to appear the same size on all phones.
vc.h
#property (strong, nonatomic) IBOutlet UIView *viewForContainer;
vc.m
#synthesize viewForContainer
- (void)viewDidLoad
{
[super viewDidLoad];
CGRect rect = [viewForContainer frame];
rect.size.height = 400;
[viewForContainer setFrame:rect];
}
Why can't I just force the height like this?
.. am I going to have to make a new storyboard for it?
Short answer:
Select the view and choose Editor > Pin > Height. Now get rid of the unnecessary bottom constraint.
Long answer:
You really should stop everything you're doing and understand what you're doing - in particular, about autolayout. It's everywhere, by default, whether we like it or not, so one may as well know about it.

Resources