当我使用圆角时，UIImageView 图像正在拉伸。

Posted 2023-03-11

【中文标题】当我使用圆角时，UIImageView 图像正在拉伸。

【英文标题】：UIImageView image is stretching when i am using rounded corners.

【发布时间】：2018-05-18 11:14:22

【问题描述】：

我使用 UITableViewCell 作为 UITableView 标题。我正在使用下面的代码为 UIImageView 制作圆角。

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section 
    if(section==0)

    static NSString *simpleTableIdentifier = @"ContactDetailsHeaderTableViewCell";

    ContactDetailsHeaderTableViewCell *cell = (ContactDetailsHeaderTableViewCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];


    if (cell == nil)
    
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"ContactDetailsHeaderTableViewCell" owner:self options:nil];
        cell = [nib objectAtIndex:0];

    

    ..................
    .................

UIImage *img = [UIImage imageWithContentsOfFile:getImagePath];

        //rounded corners
        cell.profilePicImgView.clipsToBounds = YES;

        UIGraphicsBeginImageContextWithOptions(cell.profilePicImgView.bounds.size, NO, 1.0);

        // Add a clip before drawing anything, in the shape of an rounded rect
        [[UIBezierPath bezierPathWithRoundedRect:cell.profilePicImgView.bounds
                                    cornerRadius:60.0] addClip];
        // Draw your image
        [img drawInRect:cell.profilePicImgView.bounds];

        // Get the image, here setting the UIImageView image
        cell.profilePicImgView.image = UIGraphicsGetImageFromCurrentImageContext();

        // end drawing
        UIGraphicsEndImageContext();


.............
.............

下面是输出

UIImageView 内的图像正在拉伸，如果我不使用圆角，则图像看起来正常。我已经尝试了 *** 中的很多代码示例，但它们都没有工作。

【问题讨论】：

你试过将contentMode 添加到 UIImageView 吗？而且这甚至不是一个完美的圆。

是的，我尝试了各种 contentModes，如 AspectFit、AspectFill、ScaleToFill，但没有任何效果。

您只想将 ImageView 显示为一个圆圈？那你为什么要使用 UIGraphicsBeginImageContextWithOptions，你可以让 ImageView 角半径 = imageview.width * 0.5 并确保 ImageView 的比例为 1:1 并使用内容模式来充分利用它。

你也可以用这个给圆形imageView.layer.cornerRadius = imageView.bounds.width/2

您正在根据图像视图重写图像图形上下文，这就是.contentMode 不起作用的原因。只需通过图像视图下载图像并设置.contentMode。

【参考方案1】：

当我使用小图像时，通过增加和减少值来圆角图像，当前边框颜色为白色

  -(UIImageView*)SetupLayoutsImg:(UIImageView*)img

UIColor* borderColor=[UIColor colorWithRed:244.0/255.0f green:244.0/255.0f blue:244.0/255.0f alpha:1.0/1.0f];
int borderwidth=1.0f;
int bottomViewRadius=10.0f;

img.layer.cornerRadius = bottomViewRadius; // this value vary as per your desire
img.contentMode = UIViewContentModeScaleAspectFill

img.layer.borderWidth=borderwidth;
img.layer.borderColor=borderColor.CGColor;
img.clipsToBounds = YES;

   return img;
 


 -(UIButton*)SetupLayoutsButtons:(UIButton*)Btn

 UIColor* borderColor=[UIColor colorWithRed:244.0/255.0f green:244.0/255.0f blue:244.0/255.0f alpha:1.0/1.0f];
int borderwidth=1.0f;
int buttonRadius=25.0f;

Btn.layer.cornerRadius = buttonRadius; // this value vary as per your desire

Btn.layer.borderWidth=borderwidth;
Btn.layer.borderColor=borderColor.CGColor;
Btn.clipsToBounds = YES;

   return Btn;
   

如何通过在 uitableView 委托 viewForHeaderInSection 中调用它来使用它，我正在像这样在 cellForRowAtIndexPath 中使用它

tableCellinside.cateImage=[self SetupLayoutsImg:tableCellinside.cateImage];

cateImage 是我的 UIImageView 你可以像这样使用它

cell.profilePicImgView=[self SetupLayoutsImg:cell.profilePicImgView];

【参考方案2】：

您的代码中的一个问题是您使用dequeueReusableCellWithIdentifier 将标头出列。您应该改用dequeueReusableHeaderFooterViewWithIdentifier，并将标题视图基于指定的类UITableViewHeaderFooterView。它们是单独的类，并且在您浏览表格视图时以不同的方式回收。

【参考方案3】：

问题是您的图像不是完美的圆形，这就是它看起来像拉伸图像的原因。

问题出在下面一行...

[[UIBezierPath bezierPathWithRoundedRect:cell.profilePicImgView.bounds
                                cornerRadius:60.0] addClip];

这里你设置cornerRadius:，如果你想要完整的圆形图像视图那么你需要设置cornerRadius:到cell.profilePicImgView.bounds.height/2或者可能是.width/2。

您可以通过以下其他方式制作圆角...

cell.profilePicImgView.image = //set image here

//Make image view round shape
cell.profilePicImgView.layer.cornerRadius = cell.profilePicImgView.bounds.height/2

//clip the bounds of image view
cell.profilePicImgView.clipsToBounds = YES;

【讨论】：

我已经尝试过上面的代码，但它不起作用。 UIImageView 在 UITableView 中的行为不同

设置数据前只需调用cell.layoutIdNeeded即可。

【参考方案4】：

你的 UIImageView 是固定大小的吗？ 请同样检查。如果没有给出固定大小，那么您需要将 ImageView 的cornerRadius 指定为cell.profilePicImgView.bounds.height/2。 也尝试给 contentMode = AspectFill。

【参考方案5】：

你为什么要把图像弄圆？你应该让 imageview 循环，你就完成了。你不需要对图像做任何事情！

要使图像视图变圆，您需要设置它的圆角半径，

 yourImageView.layer.cornerRadius = yourImageView.frame.size.height/2;
 yourImageView.clipsToBounds = YES;
 yourImageView.contentMode = UIViewContentModeScaleAspectFill
 yourImageView.image = [UIImage imageNamed:@"yourImageHere"];

确保您的图像视图的高度和宽度相等，我的意思是它必须是正方形才能得到精确的圆形。

第二件事你创建标题的方法是错误的！您正在对viewForHeaderInSection 中的表格视图单元进行出列。这是错误的！取而代之的是采取或创建一个视图（作为 xib，或者您可以在主视图下方的情节提要中添加视图）或以编程方式创建视图并在该视图中添加您的图像视图并从 viewForHeaderInSection 返回该视图。

【参考方案6】：

找出问题所在，发布答案，以便对其他人有所帮助。它与圆角代码无关。圆角代码工作正常。在 UIImagePickerController 中我设置了allowsEditing = YES，但在didFinishPickingMediaWithInfo 中我使用的是UIImagePickerControllerOriginalImage，所以后来我将其更改为UIImagePickerControllerEditedImage。现在它工作正常。我能够在没有任何拉伸的情况下获得圆角图像。

-(void)capturePhoto
UIImagePickerController *picker = [[UIImagePickerController alloc] init];
                                    picker.delegate = self;
                                    picker.allowsEditing = YES;
                                    picker.sourceType = UIImagePickerControllerSourceTypeCamera;

                                    [self presentViewController:picker animated:YES completion:NULL];



- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info 


/* earlier i have used UIImagePickerControllerOriginalImage in the place of UIImagePickerControllerEditedImage so it was not working properly*/
        UIImage *chosenImage = info[UIImagePickerControllerEditedImage];

        ............
        ............





     [picker dismissViewControllerAnimated:YES completion:NULL];