iPhone 向右翻转按钮(如 iTunes)

发布于 2024-07-27 22:23:15 字数 1367 浏览 1 评论 0原文

我正在尝试在两种视图之间切换。 这很简单,代码如下,但我还想同时翻转用于执行翻转的按钮。

当您播放曲目时,您可以在 iPod 应用程序中看到此行为; 点击翻转按钮可在封面艺术和曲目列表之间翻转,但同时会翻转按钮。

这是导航控制器上的页面,我要翻转的按钮是 rightBarButtonItem

这是我到目前为止的代码。 这会翻转视图,但不会翻转 rightBarButton。

[UIView setAnimationBeginsFromCurrentState: YES];
[UIView setAnimationDuration: 0.5f];
[UIView setAnimationCurve: UIViewAnimationCurveEaseInOut];
showingBackside = !showingBackside;
if (showingBackside) {
    [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft
                           forView: self.view
                             cache: YES];
    [self.view addSubview: backside.view];
    [frontside.view removeFromSuperview];
} else {
    [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight
                           forView: self.view
                             cache: YES];
    [self.view addSubview: frontside.view];
    [backside.view removeFromSuperview];
}
// flip image, too
NSString *newImage = showingBackside ? @"backside.png" : @"frontside.png";
[(self.navigationItem.rightBarButtonItem) setImage: [UIImage imageNamed: newImage]];
[UIView commitAnimations];

(这里的图像翻转代码可能无法编译;我在尝试解释我想要做什么之后添加了它。)

我遇到麻烦的是我想更改导航控制器中最右边的按钮,以便它同时翻转。

我该怎么做呢? 我要对什么视图进行动画处理?我是将其作为同一动画块的一部分还是作为单独的动画块进行? 任何提示将不胜感激,我绝对还没有很好地处理动画。

I'm trying to flip between two views. That's easy, the code is below, but I also want to simultaneously flip the button used to perform the flip.

You can see this behavior in the iPod application when you're playing a track; tapping the flip button flips between the cover art and the track listing, but it flips the button at the same time.

This is a page on the navigation controller, and the button I want to flip is the rightBarButtonItem.

Here's the code I have so far. This flips the view, but not the rightBarButton.

[UIView setAnimationBeginsFromCurrentState: YES];
[UIView setAnimationDuration: 0.5f];
[UIView setAnimationCurve: UIViewAnimationCurveEaseInOut];
showingBackside = !showingBackside;
if (showingBackside) {
    [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft
                           forView: self.view
                             cache: YES];
    [self.view addSubview: backside.view];
    [frontside.view removeFromSuperview];
} else {
    [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight
                           forView: self.view
                             cache: YES];
    [self.view addSubview: frontside.view];
    [backside.view removeFromSuperview];
}
// flip image, too
NSString *newImage = showingBackside ? @"backside.png" : @"frontside.png";
[(self.navigationItem.rightBarButtonItem) setImage: [UIImage imageNamed: newImage]];
[UIView commitAnimations];

(The image flipping code here may not compile; I added it after to try to explain what I was trying to do.)

Where I'm running into trouble is I want to change the rightmost button in the navigation controller so it flips simultaneously.

How do I do this? What view do I animate, and do I do it as part of the same animation block or as a separate one? Any tips would be appreciated, I definitely don't have a good handle on animation yet.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

半城柳色半声笛 2024-08-03 22:23:15

此处有一些讨论,但解决方案并不是那么优雅。

首先,由于 UIBarButtonItem 不是 UIView 的后代,因此您可能无法直接在 UIBarButtonItem 上使用 UIKit 动画。 但是,您可以尝试设置 customView 并为其设置动画。 您可以使用相同的动画块。

There's some discussion here, but the solution is not so elegant.

First of all, since UIBarButtonItem is not a descendant of UIView, you probably cannot use UIKit animations directly on the UIBarButtonItem. However, you can try setting a customView and animating that. You can use the same animation block.

星光不落少年眉 2024-08-03 22:23:15

好吧,这就是我实际上解决这个问题的方法:

我已经在使用自定义标题视图。 我没有使用 rightBarButtonItem,而是使自定义视图更宽。

我创建了按钮两侧的图像以及导航框架,并将它们嵌入到应用程序中。 在我的标题视图中,我放置了:

  • 一个 UIView,它将替代右侧控件(称为 rightControl),并放置在适当的位置。
  • UIView 上的按钮,响应 UIControlEventTouchUpInside 并触发我的 flipSide:

在运行时,我为每个状态创建一个 UIImageView。 我将两个 UIImageView 放入 rightControl 中,但隐藏非默认的那个。 我在专用动画块中的 flipSide: 中切换隐藏标志。

太奇怪了。 但它有效。

Okay, here's what I actually did to fix this:

I was already using a custom title view. Instead of using rightBarButtonItem, I made my custom view wider.

I created an image of both sides of the button, complete with the navigation frame, and embedded them into the application. In my title view, I put:

  • A UIView that will be my replacement for the right control (call it rightControl), positioned appropriately.
  • A button over the UIView that responds to UIControlEventTouchUpInside and triggers my flipSide:.

At runtime I create a UIImageView for each state. I putboth UIImageViews in rightControl, but hide the one that isn't default. I switch the hidden flags around in flipSide: in a dedicated animation block.

Insanely weird. But it works.

愛上了 2024-08-03 22:23:15

只需使用自定义 UIView 作为右侧导航按钮,其中包含两个可在其之间切换的按钮。

您可以使用直接的方法创建显示为右侧导航按钮项的自定义 UIView。 此 UIView 应包含要在其之间翻转的两个 UIButton。 请记住,UIButton 也是 UIView,因此可以使用与普通 UI 视图相同的转换来翻转它们,当然也可以点击它们! 以下是一些有效的示例代码:

注意:我使用便利函数来创建按钮作为 UIViewController 的自定义类别(注意:您也可以添加相同的代码来为 UIView 创建自定义类别,只需复制相同的行并替换 UIViewController with UIView) - 如果您也想使用它,只需通过包含下面的代码创建一个自定义类别,或者您可以像平常一样创建 UIButtons。

// create custom category for UIViewController to allow common button creation routine, add to .m or .mm file or add to a .h file and #import that .h file
        @interface UIViewController (ButtonAndSelector)
        - (UIButton *)createUIButtonWithImage:(UIImage *)image forState:(UIControlState)state withSelector:(SEL)selector usingFrame:(CGRect)buttonImageFrame;
        @end

        @implementation UIViewController (ButtonAndSelector)
        - (UIButton *)createUIButtonWithImage:(UIImage *)buttonImage forState:(UIControlState)state withSelector:(SEL)selector usingFrame:(CGRect)buttonImageFrame
        {
            UIButton *button = [[UIButton alloc]  initWithFrame:buttonImageFrame];
            [button setBackgroundImage:buttonImage forState:state];
            [button addTarget:self action:selector forControlEvents:UIControlEventTouchUpInside];
            [button setShowsTouchWhenHighlighted:YES];
            return button;
        }
        @end

// add this to your .h file:
        @property (strong, nonatomic) UIView *coverListView;
        @property (strong, nonatomic) UIButton *listButton;
        @property (strong, nonatomic) UIButton *coverButton;

        - (void)animateCoverListButtonFlip;

// add this to your .m or .mm file to synthesize the variables:
        @synthesize coverListView;
        @synthesize listButton;
        @synthesize coverButton;

// add this to your .m or .mm file in the viewDidLoad:

        // setup right button bar (flips between list icon and coverart image)
        self.coverListView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 32, 30)];
        self.coverListView.backgroundColor = [UIColor clearColor];
        self.coverListView.opaque = NO;

        self.listButton = [self createUIButtonWithImage:[UIImage imageNamed:@"navbar_icon_tracklisting"] forState:UIControlStateNormal withSelector:@selector(showHideQueue) usingFrame:CGRectMake(0, 0, 32, 30)];
        self.listButton.backgroundColor = [UIColor clearColor];
        self.listButton.showsTouchWhenHighlighted = NO;

        self.coverButton = [self createUIButtonWithImage:[UIImage imageNamed:@"default_coverart_small"] forState:UIControlStateNormal withSelector:@selector(showHideQueue) usingFrame:CGRectMake(0, 0, 32, 30)];
        [self.coverListView addSubview:self.coverButton]; // show coverButton by default
            self.coverButton.showsTouchWhenHighlighted = NO;

        UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:self.coverListView];
        [self.navigationItem setRightBarButtonItem:barButtonItem];


// add this to viewDidAppear if you want to flip the button when the screen appears like the build in iPod app does
        [self animateCoverListButtonFlip];

// add this routine to flip the right navigation bar custom view / buttons
        - (void)animateCoverListButtonFlip
        {
            [UIView beginAnimations:nil context:NULL];
            [UIView setAnimationDuration:0.75];    
            [UIView setAnimationTransition:([self.listButton superview] ? UIViewAnimationTransitionFlipFromLeft : UIViewAnimationTransitionFlipFromRight) forView:self.coverListView cache:YES];

            if ([self.listButton superview]) {
                [self.listButton removeFromSuperview];
                [self.coverListView addSubview:self.coverButton];
            } else {
                [self.coverButton removeFromSuperview];
                [self.coverListView addSubview:self.listButton];
            }
            [UIView commitAnimations];
        }

// when the playing album cover changes, remember to update the coverButton:
        UIImage *artworkImage; // set this to the current playing album image
        [self.coverButton setImage:artworkImage forState:UIControlStateNormal]; 

// don't forget to call the animateCoverListButtonFlip in the button click handler (shown above as showHideQueue) that shows and hides the cover/queue(list of album tracks0 - something like this:

        - (void)showHideQueue
        {    
            [self animateCoverListButtonFlip];

            /* replace the code below that is commented out here with your own code that transitions between your cover view and your list view of album tracks, this code shows my transition and references views that are not part of this example/answer, but you don't need those - you'll have your own cover view (musicPlayerView) and list view (musicQueueView) to flip between.
            [UIView beginAnimations:nil context:NULL];
            [UIView setAnimationDuration:0.75];
            [UIView setAnimationTransition:([musicQueueView superview] ? UIViewAnimationTransitionFlipFromLeft : UIViewAnimationTransitionFlipFromRight) forView:self.contentView cache:YES];

            if ([musicQueueView superview]) { // if music queue is displayed
                [musicQueueView removeFromSuperview];
                [self.contentView addSubview:musicPlayerView];
            } else {
                [musicPlayerView removeFromSuperview];
                [self.contentView addSubview:musicQueueView];
                [[musicQueueView queueTableView] reloadData];
            }
            [UIView commitAnimations];*/
        }

Just use a custom UIView for the right navigation button that contains two buttons to flip between.

You can use a straight forward approach of creating a custom UIView that is displayed as the right navigation button item. This UIView should contain the two UIButtons you want to flip between. Remember that UIButtons are UIViews too so they can be flipped using the same transitions that a normal UI view can be flipped with and of course they can be tapped! Here is some sample code that works:

Note: I use a convenience function to create buttons as a custom category of UIViewController (note: you can add this same code to create a custom category for UIView too, just copy the same lines and replace UIViewController with UIView) - If you want to use it too just create a custom category by including this code below, alternately you can create the UIButtons as you normally would.

// create custom category for UIViewController to allow common button creation routine, add to .m or .mm file or add to a .h file and #import that .h file
        @interface UIViewController (ButtonAndSelector)
        - (UIButton *)createUIButtonWithImage:(UIImage *)image forState:(UIControlState)state withSelector:(SEL)selector usingFrame:(CGRect)buttonImageFrame;
        @end

        @implementation UIViewController (ButtonAndSelector)
        - (UIButton *)createUIButtonWithImage:(UIImage *)buttonImage forState:(UIControlState)state withSelector:(SEL)selector usingFrame:(CGRect)buttonImageFrame
        {
            UIButton *button = [[UIButton alloc]  initWithFrame:buttonImageFrame];
            [button setBackgroundImage:buttonImage forState:state];
            [button addTarget:self action:selector forControlEvents:UIControlEventTouchUpInside];
            [button setShowsTouchWhenHighlighted:YES];
            return button;
        }
        @end

// add this to your .h file:
        @property (strong, nonatomic) UIView *coverListView;
        @property (strong, nonatomic) UIButton *listButton;
        @property (strong, nonatomic) UIButton *coverButton;

        - (void)animateCoverListButtonFlip;

// add this to your .m or .mm file to synthesize the variables:
        @synthesize coverListView;
        @synthesize listButton;
        @synthesize coverButton;

// add this to your .m or .mm file in the viewDidLoad:

        // setup right button bar (flips between list icon and coverart image)
        self.coverListView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 32, 30)];
        self.coverListView.backgroundColor = [UIColor clearColor];
        self.coverListView.opaque = NO;

        self.listButton = [self createUIButtonWithImage:[UIImage imageNamed:@"navbar_icon_tracklisting"] forState:UIControlStateNormal withSelector:@selector(showHideQueue) usingFrame:CGRectMake(0, 0, 32, 30)];
        self.listButton.backgroundColor = [UIColor clearColor];
        self.listButton.showsTouchWhenHighlighted = NO;

        self.coverButton = [self createUIButtonWithImage:[UIImage imageNamed:@"default_coverart_small"] forState:UIControlStateNormal withSelector:@selector(showHideQueue) usingFrame:CGRectMake(0, 0, 32, 30)];
        [self.coverListView addSubview:self.coverButton]; // show coverButton by default
            self.coverButton.showsTouchWhenHighlighted = NO;

        UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:self.coverListView];
        [self.navigationItem setRightBarButtonItem:barButtonItem];


// add this to viewDidAppear if you want to flip the button when the screen appears like the build in iPod app does
        [self animateCoverListButtonFlip];

// add this routine to flip the right navigation bar custom view / buttons
        - (void)animateCoverListButtonFlip
        {
            [UIView beginAnimations:nil context:NULL];
            [UIView setAnimationDuration:0.75];    
            [UIView setAnimationTransition:([self.listButton superview] ? UIViewAnimationTransitionFlipFromLeft : UIViewAnimationTransitionFlipFromRight) forView:self.coverListView cache:YES];

            if ([self.listButton superview]) {
                [self.listButton removeFromSuperview];
                [self.coverListView addSubview:self.coverButton];
            } else {
                [self.coverButton removeFromSuperview];
                [self.coverListView addSubview:self.listButton];
            }
            [UIView commitAnimations];
        }

// when the playing album cover changes, remember to update the coverButton:
        UIImage *artworkImage; // set this to the current playing album image
        [self.coverButton setImage:artworkImage forState:UIControlStateNormal]; 

// don't forget to call the animateCoverListButtonFlip in the button click handler (shown above as showHideQueue) that shows and hides the cover/queue(list of album tracks0 - something like this:

        - (void)showHideQueue
        {    
            [self animateCoverListButtonFlip];

            /* replace the code below that is commented out here with your own code that transitions between your cover view and your list view of album tracks, this code shows my transition and references views that are not part of this example/answer, but you don't need those - you'll have your own cover view (musicPlayerView) and list view (musicQueueView) to flip between.
            [UIView beginAnimations:nil context:NULL];
            [UIView setAnimationDuration:0.75];
            [UIView setAnimationTransition:([musicQueueView superview] ? UIViewAnimationTransitionFlipFromLeft : UIViewAnimationTransitionFlipFromRight) forView:self.contentView cache:YES];

            if ([musicQueueView superview]) { // if music queue is displayed
                [musicQueueView removeFromSuperview];
                [self.contentView addSubview:musicPlayerView];
            } else {
                [musicPlayerView removeFromSuperview];
                [self.contentView addSubview:musicQueueView];
                [[musicQueueView queueTableView] reloadData];
            }
            [UIView commitAnimations];*/
        }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文