I've built an app where a UISegmentedControl needs to be moved corresponding to its selected index. I'm using this code to achieve so:
- (IBAction)segmentControlAction:(id)sender {
// Change which container will be visible
int selectedIndex = self.overviewSegmentControl.selectedSegmentIndex;
if (selectedIndex == 0) {
// Show details and hide reviews & related
// SHOW THE DETAILS
[self showDetails];
} else if (selectedIndex == 1) {
// Show Reviews and hide details & related
// SHOW THE REVIEWS
[self showOther];
} else if (selectedIndex == 2) {
// Show related and hide details & reviews
}
}
-(void)showOther {
// Animate the reviews
[UIView animateWithDuration:.5 delay:0 usingSpringWithDamping:.9 initialSpringVelocity:1 options:UIViewAnimationOptionTransitionNone animations:^{
// Hide details controls
self.profileImageView.alpha = 0;
self.seperatorImageView.alpha = 0;
self.byLabel.alpha = 0;
self.authorLabel.alpha = 0;
// Move segmentControl
[self.overviewSegmentControl setFrame:CGRectMake(self.overviewSegmentControl.frame.origin.x, self.previewImageView.frame.size.height + 8, self.overviewSegmentControl.frame.size.width, self.overviewSegmentControl.frame.size.height)];
}completion:^(BOOL finished) {
// Completed
}];
}
-(void)showDetails{
// Animate the details
[UIView animateWithDuration:.5 delay:0 usingSpringWithDamping:.9 initialSpringVelocity:1 options:UIViewAnimationOptionTransitionNone animations:^{
// Move segmentControl
[self.overviewSegmentControl setFrame:CGRectMake(self.overviewSegmentControl.frame.origin.x, self.previewImageView.frame.size.height + 85, self.overviewSegmentControl.frame.size.width, self.overviewSegmentControl.frame.size.height)];
// Hide details controls
self.profileImageView.alpha = 1;
self.seperatorImageView.alpha = 1;
self.byLabel.alpha = 1;
self.authorLabel.alpha = 1;
}completion:^(BOOL finished) {
// Completed
}];
}
This code moves the UISegmentedControl, but it reverts it to it's original position before performing the actual move. This results in a weird jumping of the control.
My UIViewController:
Here you can see my constraints:
Can someone please explain me how this works and how to move controls with constraints rather than setting frames?
Thanks!
Erik
You can programmaticly modify the ".constant" properties of constraint objects at runtime to set positioning and/or size values. You do this in the updateConstraints method of your view controller.
You can bind the constraints in your storyboard to properties in your code the same way you bind other objects: control-click-drag from the object into your source code window. Then, you can access them at runtime.
Also, make sure you set translatesAutoresizingMaskIntoConstraints to FALSE or you might get conflict constraints.
For example you can "set" a constraint to top from your segment controller: "Top space" and modify this constraint accordingly.
Here you have an example testMovingControll
Related
I would like to emulate the swipe to left to show next picture seen in the photos app, among other places so that the new picture slides in from right to left using animation.
However, in my case, the view has more than one photo. It has a caption as well.
I am able to do this without animation by just updating the photo and text upon swipe. This just changes the photo and caption on screen, however, without the right to left animation technique.
Is there a way to show the old view moving to the left while the new updated view moves in from the right.
The following moves the view to the left but renders the screen black as nothing is put in its place.
//In handleSwipe called by gesture recognizer
CGRect topFrame = self.view.frame;
topFrame.origin.x = -320;
[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{
self.view.frame = topFrame; _myImage=newImage;
_mycaption=newcaption;} completion:^(BOOL finished){ }];
Thanks for any suggestions.
Edit:
The view in question is a detail view that you get to from a tableview through a segue. It currently already uses a scrollview for vertical scrolling as the content can exceed a single screen in the vertical dimension.
I have found a way to get the old photo and caption to move left and the new to come in from right using a completion block, however, it is less than satisfactory, because there is a gap between the two actions when the screen is black. This seems endemic to completion approach because new image does not start to move until old image has completed moving.
- (IBAction)swipedLeft:(id)sender
{
CGRect initialViewFrame = self.view.frame;
CGRect movedToLeftViewFrame = CGRectMake(initialViewFrame.origin.x - 375, initialViewFrame.origin.y, initialViewFrame.size.width, initialViewFrame.size.height);
CGRect movedToRightViewFrame = CGRectMake(initialViewFrame.origin.x + 375, initialViewFrame.origin.y, initialViewFrame.size.width, initialViewFrame.size.height);
[UIView animateWithDuration:0.1
animations:^{self.view.frame = movedToLeftViewFrame;
//above moves old image out of view.
}
completion:^(BOOL finished)
{
self.view.frame = movedToRightViewFrame;
[self loadNextItem];//changes pic and text.
[UIView animateWithDuration:0.1
animations:^{self.view.frame = initialViewFrame;
//moves new one in
}
completion:nil];
}];
}
I suggest using a UIPageViewController, and manage each image/set of images as a separate view controller.
A page view controller supports either a page curl style transition or a slide transition. You'd want the slide transition.
Three ways to build this using existing components:
UIPageViewController (see DuncanC's answer).
UICollectionView with pagingEnabled set to true. Use a full-screen-sized cell and a UICollectionViewFlowLayout with scrollDirection set to horizontal.
UICollectionView as above, but instead of setting pagingEnabled to true, implement scrollViewWillEndDragging:withVelocity:targetContentOffset: in your delegate. This allows you to have a gutter between each cell while still having each cell fill the screen. See this answer.
It's ScrollView+PageControl
I hope it can help you.
- (void)viewDidLoad {
[super viewDidLoad];
self.scrollView = [[UIScrollView alloc] init];
self.scrollView.delegate =self;
self.scrollView.translatesAutoresizingMaskIntoConstraints =NO;
self.scrollView.pagingEnabled =YES;
self.scrollView.contentSize =CGSizeMake(ViewWidth*VIewCount, ViewHeight);
[self.view addSubview:self.scrollView];
self.pageControl = [[UIPageControl alloc] init];
self. pageControl.translatesAutoresizingMaskIntoConstraints =NO;
[self.view addSubview:self.pageControl];
self. pageControl.numberOfPages = VIewCount;
self.pageControl.currentPage = 0;
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.scrollView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1.0f
constant:0.0f]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"[self.scrollView(width)]"
options:0
metrics:#{#"width":#(ViewWidth)}
views:NSDictionaryOfVariableBindings(self.scrollView)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-50-[self.scrollView(height)]"
options:0
metrics:#{#"height":#(HEIGHT_VIEW)}
views:NSDictionaryOfVariableBindings(self.scrollView)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:[_scrollView]-5-[pageControl(15)]"
options:NSLayoutFormatAlignAllCenterX
metrics:nil
views:NSDictionaryOfVariableBindings(self.scrollView, self.pageControl)]];
//[imgArr addObject:[UIImage imageNamed:...]];
for (NSInteger index = 0; index<ViewCount; index++) {
UIImageView *addSubview = [[UIImageView alloc] initWithFrame:CGRectMake(index*ViewWidth, 0, ViewWidth, ViewHeight)];
// addSubView.image = [imgArr objectAtIndex:index];
[self.scrollView addSubview:addSubview];
}
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
NSInteger currentOffset = scrollView.contentOffset.x;
NSInteger index = currentOffset / ViewWidth;
if (currentOffset % ViewWidth == 0) {
pageControl.currentPage = index;
}
}
so I have a very simple button that when clicked goes to fullscreen and when clicked again goes back to the same position it was initially in. For some reason it works perfectly without the animation. When I uncomment the animation part when I initially click the button it does nothing, the second time I click it slightly enlarges. The third time I click it animates slowly but back to it's smaller original size... Why is it animating the opposite way?
- (IBAction)viewImage1:(id)sender {
UIButton *btn = (UIButton*) sender;
if (btn.tag == 0)
{
CGRect r = [[UIScreen mainScreen] bounds];
/*[UIView animateWithDuration:0.5f delay:0.0f options:0 animations:^{*/
[sender setFrame: r];
/*}completion:nil];*/
btn.tag = 1;
}
else
{
btn.tag = 0;
[sender setFrame:CGRectMake(0,0,370,200)];
}
}
There are two solutions to your problem either of which will work:
Disable Autolayout. (discouraged)
You can do that in Interface Builder by opening the File Inspector
in the right pane and unchecking the respective check box.
However, if you want to use Autolayout for constraining other UI elements in your view (which is quite a good idea in most cases) this approach won't work which is why I would recommend the second solution:
Keep Autolayout enabled, create an outlet for your button in your view controller and set
self.myButton.translatesAutoresizingMaskIntoConstraints = YES;
in your view controller's viewDidLoad method.
You could also add layout constraints to your button and animate those. (This excellent Stackoverflow post explains how it's done.)
The reason for this tricky behavior is that once you enable Autolayout a view's frame is no longer relevant to the actual layout that appears on screen, only the view's layout constraints matter. Setting its translatesAutoresizingMaskIntoConstraints property to YES causes the system to automatically create layout constraints for your view that will "emulate" the frame you set, in a manner of speaking.
It is easier to do this with auto layout and constraints. Create an IBOutlet for the height constraint of your button call it something like btnHeight. Do the same for the width constraint call it something like btnWidth. Then create an IBAction like so:
- (IBAction)buttonPress:(UIButton *)sender {
UIButton *btn = (UIButton *) sender;
CGRect r = [[UIScreen mainScreen] bounds];
if (CGRectEqualToRect(btn.frame, CGRectMake(0.0, 0.0, 370, 200))) {
[UIView animateWithDuration:0.5 delay:0.0 options:0 animations:^{
self.btnHeight.constant = r.size.height;
self.btnWidth.constant = r.size.width;
[self.view layoutIfNeeded];
} completion:^(BOOL finished){
}];
}else{
[UIView animateWithDuration:0.5 delay:0.0 options:0 animations:^{
self.btnHeight.constant = 200.0;
self.btnWidth.constant = 370.0;
[self.view layoutIfNeeded];
} completion:^(BOOL finished){
}];
}
}
In my experience animating the frame of a UIButton does not work well, a, the only method, I'm aware of, is to use CGAffineTransformScale which will rasterize the title of the button and scale it as well.
If I change the text of a label, its container changes position. (Auto layout)
My simple code:
BOOL nextCard = [self loadCardInfo:card];
if (nextCard == TRUE) {
[UIView animateWithDuration:0.3 animations:^{
[card setFrame:CGRectMake(hideCardPosition.x, hideCardPosition.y, card.frame.size.width, card.frame.size.height)];
}completion:^(BOOL complete){
}];
}
the problem is at last line:
-(BOOL)loadCardInfo:(CardView*)card {
if (dataArray.count > 0) {
card.string = [dataArray objectAtIndex:0];
[dataArray removeObjectAtIndex:0];
card.label.text = card.string; //THIS LINE
return YES;
} else
return NO;
}
Thanks
I'm not sure what you are trying to achieve in the +UIView animateWithDuration:animations: call but you probably don't want to be mixing Auto Layout with manually setting the frame like you are in the animations block.
Best practice is (usually) to stick with one or the other.
Also, perhaps you want some sort of vertical Auto Layout constraints (pinning to superview or setting a height?)
I have a UITableView cell that has a custom label inside to handle the variable height. There is also an UIImage on the right and left.
When the table is toggled into edit mode, I want to inform and change each cell in the table, to format properly for being shifted to the right. And, when the user presses the small -, I want to further optimize to make room for the delete button.
Looking for a pattern that works for the above, assuming there is custom content in the cell that I have control over.
Thanks in advance!
Normaly all you need to do is set the springs and struts correctly and your content will slide correctly. If you create your sub-views in code then you need to make sure you call addSubview on the cell.contentView and not the cell.
To hide and / or resize the sub-views you need to override willTransitionToState:
- (void)willTransitionToState:(UITableViewCellStateMask)state
{
UIView *imageView = self.rightImageView;
UIView *labelView = self.centerTextLabel;
CGRect labelFrame = labelView.frame;
if (state & UITableViewCellStateShowingDeleteConfirmationMask) {
labelFrame.size.width += 52;
// Animating the fade while the image is sliding to the left
// is more jarring then just making it go away immediately
imageView.alpha = 0.0;
[UIView animateWithDuration:0.3 animations:^{
labelView.frame = labelFrame;
}];
} else if (!self.rightImageView.alpha) {
labelFrame.size.width -= 52;
[UIView animateWithDuration:0.3 animations:^{
imageView.alpha = 1.0;
labelView.frame = labelFrame;
}];
}
[super willTransitionToState:state];
}
I created a quick sample app up on GitHub that demos an iOS 4.3 app using a nib or code just uncomment //#define USE_NIB_TABLEVIEWCELL to use the nib
https://github.com/GayleDDS/TestTableCell.git
I personally prefer to create the table view cell in a nib file and only after profiling the App, replace the nib with code.
I want to create an effect where a button's image slides in / out of button rect, the final effect should look like this:
sliding buttons
So the first one just started it's "transition", the second is half way through and the last one is fully slided out.
To achieve this, I set the button's clipsToBounds property to YES and then animate button's imageView:
- (void)setupButtons
{
self.buttonsYOffset = -60.0;
self.buttonsOriginalY = self.twitterButton.imageView.center.y;
self.twitterButton.clipsToBounds = YES;
self.twitterButton.imageView.center = CGPointMake(self.twitterButton.imageView.center.x, self.buttonsOriginalY + self.buttonsYOffset);
}
and:
- (void)show
{
[UIView animateWithDuration:0.2 delay:0
options:UIViewAnimationOptionCurveEaseOut
animations:^ {
self.twitterButton.imageView.alpha = 1.0;
self.twitterButton.imageView.center = CGPointMake(self.twitterButton.imageView.center.x, self.buttonsOriginalY);
}
completion:^(BOOL success) {
}
];
}
- (void)hide
{
[UIView animateWithDuration:0.2 delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^ {
self.twitterButton.imageView.center = CGPointMake(self.twitterButton.imageView.center.x, self.buttonsOriginalY + self.buttonsYOffset);
}
completion:^(BOOL success) {
}
];
}
Everything works fine if I fire this code when button is in "inactive" state (not tapped) - it slides in and out just fine.
The problem starts when I fire hide() method immediately after button has been tapped - It does not slide out then - just highlights for a second, and it's image stays in "opened" position for a while, then skips to "closed" position immediately.
It seems that button's imageView is used only when button is in its default inactive state? Can it be easily fixed?