相应地移动视图uivew折叠/展开动画 [英] Move views accordingly uivew collapse/expand animation

问题描述

我有一个自定义View横幅，它有展开/折叠动画，类似于此处描述 iphone：以编程方式展开和折叠UIView 。

I have a custom View banner that has expand/collapse animation, something like described here iphone: expand and collapse a UIView programmatically .

当我将该视图集成到任何现有的视图控制器时，当它扩展为压低现有视图时，我想要的是什么。现在它只是重叠。

What I want that when I integrate that view to any my existing View Controllers, when it get expanding to push down existing views. Now it's just overlaps.

我如何在iOS中实现这一目标？在Android中，我使用Visibility.Gone完成了它，但在这里我无法找到类似的东西。横幅可以在任何视图层次结构中，直接是主视图的子视图，但是当它扩展时，我希望所有视图向下移动，以便在扩展时推送所有视图。

How can I accomplish that in iOS? In Android I have done it using Visibility.Gone , but here I wasn't able to find anything like that. Banner can be in any view hierarchy , directly child of main view, but when it's expands I want all views move down, to have effect that it pushes down everything when expands.

这里是使用Visibility.Gone的Android方法的链接 Android：展开/折叠动画

Here the link for Android approach using Visibility.Gone Android: Expand/collapse animation

推荐答案

您可以通过操纵横幅视图的框架属性来获取结果它是横幅视图层次结构中的兄弟姐妹。所有这些都可以包含在横幅视图对象中。 框架属性是可动画的。

You can get your result by manipulating the frame properties of the banner view and it's siblings in the banner's view hierarchy. All of this can be contained inside the banner view object. The frame property is animatable.

将BannerView作为UIView的子类。添加一些方法的公共 @interface ：

Make a BannerView as a subclass of UIView. Add some methods to it's public @interface:

    - (void) collapse;
    - (void) expand;
    - (void) toggle;

您需要为横幅的展开和折叠框架添加几个属性：

You will want a couple of properties for the banner's expanded and collapsed frames:

@property (nonatomic, assign) CGRect expandedFrame;
@property (nonatomic, assign) CGRect collapsedFrame;

这些可以进入（公共）@interface或（私有）类别扩展。在BannerView初始化期间设置它们：

These can go in the (public) @interface or in a (private) category extension. Set them during the BannerView's initialisation:

    //initialising in code
    - (id)initWithFrame:(CGRect)frame{
        if (self = [super initWithFrame:frame]) {
            [self initialiseFrames:frame];
        }
        return self;
    }

    //initialising from XIB/Storyboard
    - (void)awakeFromNib {
        [self initialiseFrames:self.frame];
    }

    - (void)initialiseFrames:(CGRect)frame {
        self.expandedFrame = frame;
        frame.size.height = 0;
        self.collapsedFrame = frame;
    }

无论何时展开或折叠bannerView，它都可以使用它的兄弟视图进行迭代迭代形式

Whenever you expand or collapse your bannerView, it can iterate through it's sibling views using the iteration form

for (UIView* view in self.superview.subviews) {}

通过设置各自的 frame 属性来相应地向上或向下移动它们。要提高和降低帧数，请添加或减去bannerView的高度...

moving them up or down accordingly by setting their respective frame properties. To raise and lower frames, add or subtract the height of the bannerView…

- (CGRect)lowerFrame:(CGRect)frame {
    frame.origin.y += CGRectGetHeight(self.expandedFrame);
    return frame;
}

- (CGRect)raiseFrame:(CGRect)frame {
    frame.origin.y -= CGRectGetHeight(self.expandedFrame);
    return frame;
}

将这些碎片放在一起，你可以制作崩溃和扩展移动兄弟姐妹的动画方法通过设置框架查看正确的位置，然后通过设置它的框架来折叠/展开横幅视图：

Putting those pieces together, you can make collapse and expand animation methods which move sibling views into the correct postion by setting their frames and then collapse/expand the banner view by setting it's frame:

- (void) collapse {
    if (CGRectEqualToRect(self.frame, self.collapsedFrame)) return;
    [UIView animateWithDuration:0.5 animations:^{
        for (UIView* view in self.superview.subviews) {
            if (CGRectGetMinY(view.frame) > CGRectGetMaxY(self.frame))
                view.frame = [self raiseFrame:view.frame];
        }
        self.frame = self.collapsedFrame;
    }];

}

- (void) expand {
    if (CGRectEqualToRect(self.frame, self.expandedFrame)) return;
    [UIView animateWithDuration:0.5 animations:^{
        for (UIView* view in self.superview.subviews) {
            if (CGRectGetMinY(view.frame) > CGRectGetMaxY(self.frame))
                view.frame = [self lowerFrame:view.frame];
        }
        self.frame = self.expandedFrame;
    }];

}

...以及在两个州之间移动的切换方法

…and a toggle method to move between the two states

- (void) toggle {
    if (CGRectEqualToRect(self.frame, self.collapsedFrame))
        [self expand];
    else [self collapseBanner];
}

这篇关于相应地移动视图uivew折叠/展开动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！