• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

ios - 如何实现执行 contentStretch 反转的 UIView?

[复制链接]
菜鸟教程小白 发表于 2022-12-13 11:55:54 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

UIView contentStretch属性定义了一个区域,在该区域内内容被拉伸(stretch)以填充 View 。这很好,但我发现自己需要完全相反的东西:我想要一个 View ,我可以定义一个不拉伸(stretch)但外边缘拉伸(stretch)直到填满 View 的矩形。

  +-------------------------------------------+
  |                                           |
  |         +----------+                      |
  |         |          |                      |
  |         |          |                      |
  |         |  Content |      Stretch to fill |
  |         |          |                      |
  |         |          |                      |
  |         +----------+                      |
  |                                           |
  +-------------------------------------------+

所以在上面的 View 中,外部矩形是我提出的 View 。内部矩形是不可拉伸(stretch)的内容。理想情况下,我希望能够将不可拉伸(stretch)内容的中心点定位在外部矩形内的任何位置,并且仍然让外部位填充到边缘。

示例使用场景:带有透明中心“孔”的黑色覆盖层,跟随鼠标/触摸,用于使用手电筒等探索场景。

我想这样做的一种方法是绘制内容 UIView,然后绘制其他四个 View ,大小适当,以覆盖外部区域,但我希望有一个单 View 解决方案来实现更流畅的动画效果。我猜我需要一个 UIView 并使用 Core Animation 来弄乱它的图层?



Best Answer-推荐答案


所以我的第一次尝试(在我对这个问题的另一个回答中),在 drawRect: 中做所有事情,在我的 iPad 2 上有点滞后。我决定通过创建一个单独的 CALayer 每个切片,让 Core Animation 担心缩放切片。

在这个版本中,工作是在我的自定义 UIView 子类的 layoutSubviews 方法中完成的。只要 View 的大小发生变化(包括 View 首次出现时),系统就会调用 layoutSubviews。我们还可以使用 setNeedsLayout 消息要求系统调用 layoutSubviews。系统会自动合并布局请求,就像合并绘图请求一样。

我需要三个私有(private)实例变量:

@implementation OutstretchView {
    CALayer *_slices[3][3];
    BOOL _imageDidChange : 1;
    BOOL _hasSlices : 1;
}

我的 layoutSubviews 方法从处理没有图像或没有 fixedRect 的简单情况开始:

- (void)layoutSubviews {
    [super layoutSubviews];

    if (!self.image) {
        [self hideSlices];
        self.layer.contents = nil;
        return;
    }

    if (CGRectIsNull(self.fixedRect)) {
        [self hideSlices];
        self.layer.contents = (__bridge id)self.image.CGImage;
        return;
    }

如果我还没有创建九个切片层,它会懒惰地创建它们:

    if (!_hasSlices)
        [self makeSlices];

如果图像发生变化,它会重新计算切片层的图像。 _imageDidChange 标志在 setImage: 中设置。

    if (_imageDidChange) {
        [self setSliceImages];
        _imageDidChange = NO;
    }

最后,它设置九个切片层中每一层的框架。

    [self setSliceFrames];
}

当然,所有实际工作都发生在辅助方法中,但它们非常简单。隐藏切片(当没有图像或没有 fixedRect 时)很简单:

- (void)hideSlices {
    if (!_hasSlices)
        return;
    for (int y = 0; y < 3; ++y) {
        for (int x = 0; x < 3; ++x) {
            _slices[y][x].hidden = YES;
        }
    }
}

创建切片层也很简单:

- (void)makeSlices {
    if (_hasSlices)
        return;
    CALayer *myLayer = self.layer;
    for (int y = 0; y < 3; ++y) {
        for (int x = 0; x < 3; ++x) {
            _slices[y][x] = [CALayer layer];
            [myLayer addSublayer:_slices[y][x]];
        }
    }
    _hasSlices = YES;
}

要制作切片图像并设置切片图层帧,我需要其他答案中的 rect 辅助函数:

static CGRect rect(CGFloat *xs, CGFloat *ys) {
    return CGRectMake(xs[0], ys[0], xs[1] - xs[0], ys[1] - ys[0]);
}

创建切片图像需要一些工作,因为我必须计算切片之间边界的坐标。我使用 CGImageCreateWithImageInRect 从用户提供的图像创建切片图像。

- (void)setSliceImages {
    UIImage *image = self.image;
    CGImageRef cgImage = image.CGImage;
    CGFloat scale = image.scale;
    CGRect fixedRect = self.fixedRect;
    fixedRect.origin.x *= scale;
    fixedRect.origin.y *= scale;
    fixedRect.size.width *= scale;
    fixedRect.size.height *= scale;
    CGFloat xs[4] = { 0, fixedRect.origin.x, CGRectGetMaxX(fixedRect), CGImageGetWidth(cgImage) };
    CGFloat ys[4] = { 0, fixedRect.origin.y, CGRectGetMaxY(fixedRect), CGImageGetHeight(cgImage) };

    for (int y = 0; y < 3; ++y) {
        for (int x = 0; x < 3; ++x) {
            CGImageRef imageSlice = CGImageCreateWithImageInRect(cgImage, rect(xs + x, ys + y));
            _slices[y][x].contents = (__bridge id)imageSlice;
            CGImageRelease(imageSlice);
        }
    }
}

设置切片层帧是类似的,虽然我不必在这里处理图像比例。 (也许我应该使用 UIScreen 比例尺?嗯。这令人困惑。我没有在 Retina 设备上尝试过。)

- (void)setSliceFrames {
    CGRect bounds = self.bounds;
    CGRect fixedRect = self.fixedRect;
    CGPoint fixedCenter = self.fixedCenter;
    fixedRect = CGRectOffset(fixedRect, fixedCenter.x - fixedRect.size.width / 2, fixedCenter.y - fixedRect.size.height / 2);
    CGFloat xs[4] = { bounds.origin.x, fixedRect.origin.x, CGRectGetMaxX(fixedRect), CGRectGetMaxX(bounds) };
    CGFloat ys[4] = { bounds.origin.y, fixedRect.origin.y, CGRectGetMaxY(fixedRect), CGRectGetMaxY(bounds) };

    for (int y = 0; y < 3; ++y) {
        for (int x = 0; x < 3; ++x) {
            _slices[y][x].frame = rect(xs + x, ys + y);
        }
    }
}

这个版本在我的 iPad 2 上似乎更流畅。它可能在旧设备上也能很好地工作。

我的测试项目的这个版本是on github too .

关于ios - 如何实现执行 contentStretch 反转的 UIView?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9493337/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap