【问题标题】:iOS: Image view aspect fit with corner radiusiOS:图像视图方面适合角半径
【发布时间】:2015-06-10 04:50:53
【问题描述】:

我想使用以下代码将内容模式的角半径设置为适合方面:

  cell.imgvAlbum.contentMode = UIViewContentModeScaleAspectFit;
  cell.imgvAlbum.clipsToBounds = YES;
  cell.imgvAlbum.layer.cornerRadius  = 5.0f;

但我只获得内容模式的输出作为方面适合。 我也尝试过:

  cell.imgvAlbum.layer.masksToBounds  = YES;

圆角半径怎么办? 请建议我一些解决方案。提前致谢。

【问题讨论】:

  • 无论如何,您的图像视图都会变得圆角。只是使用AspectFit,图像不会填满图像视图。要获得您想要的效果,您需要根据图像的纵横比调整图像视图的大小。

标签: ios uiimageview uicollectionviewcell


【解决方案1】:

使用以下方法获取具有指定圆角半径的圆角图像,将上述所有属性应用为UIViewContentModeScaleAspectFit,剪辑到边界等。在图像视图上并通过在图像视图上调用以下函数来设置接收到的图像。

-(UIImage *)makeRoundedImage:(UIImage *) image
                      radius: (float) radius;
{
    CALayer *imageLayer = [CALayer layer];
    imageLayer.frame = CGRectMake(0, 0, image.size.width, image.size.height);
    imageLayer.contents = (id) image.CGImage;

    imageLayer.masksToBounds = YES;
    imageLayer.cornerRadius = radius;

    UIGraphicsBeginImageContext(image.size);
    [imageLayer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return roundedImage;
}

调用为

  UIImage *image = [self makeRoundedImage:[UIImage imageNamed:@"accept~iphone"]
                    radius: 5.0f];

  cell.imgvAlbum.contentMode = UIViewContentModeScaleAspectFit;
  cell.imgvAlbum.clipsToBounds = YES;
  cell.imgvAlbum.layer.cornerRadius  = 5.0f;

  cell.imgvAlbum.layer.masksToBounds  = YES;

  [cell.imgvAlbum setImage: image];

【讨论】:

    【解决方案2】:

    使用 UIViewContentModeScaleAspectFit 时,图像并不总是填满 ImageView 的框架,这就是您看不到角半径的原因。

    尝试将背景颜色添加到 imageView,您会看到圆角半径正在起作用。

    如果您想在任何情况下看到圆角,您应该使用其他内容模式,例如 aspectFill 或 scaleToFill。 示例:

    cell.imgvAlbum.contentMode = UIViewContentModeScaleAspectFill;

    另一种选择是增加您放入 imageView 的图像的大小或减小 imageView 的大小。

    【讨论】:

      【解决方案3】:
      UIImageView Corner Radius only Top left and Right in iOS
      
      UIBezierPath *maskPath;
              maskPath = [UIBezierPath bezierPathWithRoundedRect:imageLayer.bounds
                                               byRoundingCorners:(UIRectCornerTopLeft|UIRectCornerTopRight)
                                                     cornerRadii:CGSizeMake(10.0, 10.0)];
      
              CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
              maskLayer.frame = self.bounds;
              maskLayer.path = maskPath.CGPath;
              imageLayer.mask = maskLayer;
      

      【讨论】:

        【解决方案4】:

        Swift 版本作为扩展实用程序:

        extension UIImage {
        
        /**
         - Parameter cornerRadius: The radius to round the image to.
         - Returns: A new image with the specified `cornerRadius`.
         **/
        func roundedImage(cornerRadius: CGFloat) -> UIImage? {
            let size = self.size
        
            // create image layer
            let imageLayer = CALayer()
            imageLayer.frame = CGRect(x: 0, y: 0, width: size.width, height: size.height)
            imageLayer.contents = self.cgImage
        
            // set radius
            imageLayer.masksToBounds = true
            imageLayer.cornerRadius = cornerRadius
        
            // get rounded image
            UIGraphicsBeginImageContext(size)
            if let context = UIGraphicsGetCurrentContext() {
                imageLayer.render(in: context)
            }
            let roundImage = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
        
            return roundImage
        }
        

        用法 - 不要忘记在imageView 上重新设置新图像:

        switch self.imageContentMode {
        case .scaleAspectFit:
            // round actual image if aspect fit
            self.image = self.image?.roundedImage(cornerRadius: radius)
            self.imageView?.image = self.image
        
        default:
            // round image view corners
            self.imageView?.roundCorners(radius: radius)
        }
        

        【讨论】:

          猜你喜欢
          • 2018-12-28
          • 1970-01-01
          • 1970-01-01
          • 2014-06-30
          • 2017-01-18
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2014-06-02
          相关资源
          最近更新 更多