AI 助理
备案控制台
开发者社区 云计算 文章 正文

如何是实现上面左右两边有圆角，下面没有圆角

2024-05-24 116
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 如何是实现上面左右两边有圆角，下面没有圆角

画圆角参考：《如何实现画圆角》。

方法一：自己画圆角。

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

typedef NS_ENUM(NSUInteger, ERectangleCornerType)
{
    ERectangleCornerTypeNoCorner = 0,     //无圆角
    ERectangleCornerTypeUpLeftRight = 1,     //上部左右两个圆角
    ERectangleCornerTypeDownLeftRight = 2,   //下部左右两个圆角
    ERectangleCornerTypeLeftUpDown = 3,   //左边上下两个个圆角
    ERectangleCornerTypeRighUpDown = 4,   //右边上下两个圆角
    ERectangleCornerTypeAllCorner = 5,   //上下部左右四个圆角
};

@interface PPRectangleCornerView : BGBaseView
@property (nonatomic, strong) UIColor *fillColor;
@property (nonatomic, assign) CGFloat radius;
@property (nonatomic, assign) ERectangleCornerType rectangleCornerType;

- (instancetype)initWithFrame:(CGRect)frame radius:(CGFloat)radius fillColor:(UIColor *)fillColor rectangleCornerType:(ERectangleCornerType)rectangleCornerType;
@end

NS_ASSUME_NONNULL_END

#import "PPRectangleCornerView.h"
#import "PPSectorView.h"

@interface PPRectangleCornerView ()
@property (nonatomic, strong) PPSectorView *leftUpSectorView;
@property (nonatomic, strong) PPSectorView *rightUpSectorView;
@property (nonatomic, strong) PPSectorView *leftDownSectorView;
@property (nonatomic, strong) PPSectorView *rightDownSectorView;
@property (nonatomic, strong) UIView *centerView;
@property (nonatomic, strong) UIView *leftMiddleView;
@property (nonatomic, strong) UIView *rightMiddleView;
@property (nonatomic, strong) UIView *upMiddleView;
@property (nonatomic, strong) UIView *downMiddleView;
@end

@implementation PPRectangleCornerView

- (instancetype)initWithFrame:(CGRect)frame radius:(CGFloat)radius fillColor:(UIColor *)fillColor rectangleCornerType:(ERectangleCornerType)rectangleCornerType
{
    if(radius <= 0 || !fillColor)
    {
        return nil;
    }

    if((ERectangleCornerTypeNoCorner == rectangleCornerType || ERectangleCornerTypeUpLeftRight == rectangleCornerType || ERectangleCornerTypeDownLeftRight == rectangleCornerType || ERectangleCornerTypeAllCorner == rectangleCornerType) &&(frame.size.width <= radius*2 || frame.size.height <= radius*2))
    {
        return nil;
    }
    else if(frame.size.width <= radius || frame.size.height <= radius*2)
    {
        return nil;
    }
    self = [super initWithFrame:frame];
    if (self) {
        [self setAttributesWithRadius:radius fillColor:fillColor rectangleCornerType:rectangleCornerType];
        [self addSubview:self.leftUpSectorView];
        [self addSubview:self.rightUpSectorView];
        [self addSubview:self.leftDownSectorView];
        [self addSubview:self.rightDownSectorView];
        [self addSubview:self.leftMiddleView];
        [self addSubview:self.rightMiddleView];
        [self addSubview:self.upMiddleView];
        [self addSubview:self.downMiddleView];
        [self addSubview:self.centerView];
    }
    return self;
}

-(PPSectorView *)leftUpSectorView{
    if (!_leftUpSectorView) {
        _leftUpSectorView = [[PPSectorView alloc] init];
        if(ERectangleCornerTypeUpLeftRight == self.rectangleCornerType || ERectangleCornerTypeLeftUpDown == self.rectangleCornerType || ERectangleCornerTypeAllCorner == self.rectangleCornerType )
        {
            [_leftUpSectorView setAttributesWithIsBackgroundClear:YES radius:self.radius fillColor:_fillColor sectorType:ESectorTypeLeftUp];
            _leftUpSectorView.frame = CGRectMake(0, 0, self.radius, self.radius);
        }
        else
        {
            [_leftUpSectorView setAttributesWithIsBackgroundClear:YES radius:self.radius fillColor:_fillColor sectorType:ESectorTypeRectangle];
            
            if(ERectangleCornerTypeRighUpDown == self.rectangleCornerType && self.frame.size.width < self.radius*2)
            {
                _leftUpSectorView.frame = CGRectMake(0, 0, (self.frame.size.width-self.radius)/2, self.radius);
            }
            else
            {
                _leftUpSectorView.frame = CGRectMake(0, 0, self.radius, self.radius);
            }
        }
    }
    return _leftUpSectorView;
}

-(PPSectorView *)rightUpSectorView{
    if (!_rightUpSectorView) {
        _rightUpSectorView = [[PPSectorView alloc] init];
        if(ERectangleCornerTypeUpLeftRight == self.rectangleCornerType || ERectangleCornerTypeRighUpDown == self.rectangleCornerType || ERectangleCornerTypeAllCorner == self.rectangleCornerType )
        {
            [_rightUpSectorView setAttributesWithIsBackgroundClear:YES radius:self.radius fillColor:_fillColor sectorType:ESectorTypeRightUp];
            _rightUpSectorView.frame = CGRectMake(self.frame.size.width-self.radius, 0, self.radius, self.radius);
        }
        else
        {
            [_rightUpSectorView setAttributesWithIsBackgroundClear:YES radius:self.radius fillColor:_fillColor sectorType:ESectorTypeRectangle];
            if(ERectangleCornerTypeLeftUpDown == self.rectangleCornerType && self.frame.size.width < self.radius*2)
            {
                _rightUpSectorView.frame = CGRectMake(self.radius + (self.frame.size.width-self.radius)/2, 0, (self.frame.size.width-self.radius)/2, self.radius);
            }
            else
            {
                _rightUpSectorView.frame = CGRectMake(self.frame.size.width-self.radius, 0, self.radius, self.radius);
            }
            
        }
    }
    return _rightUpSectorView;
}

-(PPSectorView *)leftDownSectorView{
    if (!_leftDownSectorView) {
        _leftDownSectorView = [[PPSectorView alloc] init];
        if(ERectangleCornerTypeDownLeftRight == self.rectangleCornerType || ERectangleCornerTypeLeftUpDown == self.rectangleCornerType || ERectangleCornerTypeAllCorner == self.rectangleCornerType )
        {
            [_leftDownSectorView setAttributesWithIsBackgroundClear:YES radius:self.radius fillColor:_fillColor sectorType:ESectorTypeLeftDown];
            _leftDownSectorView.frame = CGRectMake(0, self.frame.size.height- self.radius, self.radius, self.radius);
        }
        else
        {
            if((ERectangleCornerTypeRighUpDown == self.rectangleCornerType) && self.frame.size.width < self.radius*2)
            {
                _leftDownSectorView.frame = CGRectMake(0, self.frame.size.height- self.radius, (self.frame.size.width-self.radius)/2, self.radius);
            }
            else
            {
                _leftDownSectorView.frame = CGRectMake(0, self.frame.size.height- self.radius, self.radius, self.radius);
            }
            [_leftDownSectorView setAttributesWithIsBackgroundClear:YES radius:self.radius fillColor:_fillColor sectorType:ESectorTypeRectangle];
        }
    }
    return _leftDownSectorView;
}

-(PPSectorView *)rightDownSectorView{
    if (!_rightDownSectorView) {
        _rightDownSectorView = [[PPSectorView alloc] init];
        if(ERectangleCornerTypeDownLeftRight == self.rectangleCornerType || ERectangleCornerTypeRighUpDown == self.rectangleCornerType || ERectangleCornerTypeAllCorner == self.rectangleCornerType )
        {
            [_rightDownSectorView setAttributesWithIsBackgroundClear:YES radius:self.radius fillColor:_fillColor sectorType:ESectorTypeRightDown];
            _rightDownSectorView.frame = CGRectMake(self.frame.size.width-self.radius, self.frame.size.height- self.radius, self.radius, self.radius);
        }
        else
        {
            [_rightDownSectorView setAttributesWithIsBackgroundClear:YES radius:self.radius fillColor:_fillColor sectorType:ESectorTypeRectangle];
            if((ERectangleCornerTypeLeftUpDown == self.rectangleCornerType) && self.frame.size.width < self.radius*2)
            {
                _rightDownSectorView.frame = CGRectMake(self.frame.size.width-(self.frame.size.width-self.radius)/2, self.frame.size.height- self.radius, (self.frame.size.width-self.radius)/2, self.radius);
            }
//            else if((ERectangleCornerTypeRighUpDown == self.rectangleCornerType) && self.frame.size.width < self.radius*2)
//            {
//                _rightDownSectorView.frame = CGRectMake(self.frame.size.width-(self.frame.size.width-self.radius)/2, self.frame.size.height- self.radius, (self.frame.size.width-self.radius)/2, self.radius);
//            }
            else
            {
                _rightDownSectorView.frame = CGRectMake(self.frame.size.width-self.radius, self.frame.size.height- self.radius, self.radius, self.radius);
            }
        }
    }
    return _rightDownSectorView;
}

-(UIView *)leftMiddleView{
    if (!_leftMiddleView) {
//        if((ERectangleCornerTypeLeftUpDown == self.rectangleCornerType) && self.frame.size.width < self.radius*2)
//        {
//            _leftMiddleView= [[UIView alloc] initWithFrame:CGRectMake(0, self.radius, self.radius, self.frame.size.height- self.radius*2)];
//        }
//        else
        if((ERectangleCornerTypeRighUpDown == self.rectangleCornerType) && self.frame.size.width < self.radius*2)
        {
            _leftMiddleView= [[UIView alloc] initWithFrame:CGRectMake(0, self.radius, (self.frame.size.width-self.radius)/2, self.frame.size.height- self.radius*2)];
        }
        else
        {
            _leftMiddleView= [[UIView alloc] initWithFrame:CGRectMake(0, self.radius, self.radius, self.frame.size.height- self.radius*2)];
        }
        _leftMiddleView.backgroundColor = self.fillColor;
    }
    return _leftMiddleView;
}

-(UIView *)rightMiddleView{
    if (!_rightMiddleView) {
        if((ERectangleCornerTypeLeftUpDown == self.rectangleCornerType) && self.frame.size.width < self.radius*2)
        {
            _rightMiddleView= [[UIView alloc] initWithFrame:CGRectMake(self.frame.size.width - (self.frame.size.width-self.radius)/2, self.radius, (self.frame.size.width-self.radius)/2, self.frame.size.height- self.radius*2)];
        }
//        else if((ERectangleCornerTypeRighUpDown == self.rectangleCornerType) && self.frame.size.width < self.radius*2)
//        {
//            _rightMiddleView= [[UIView alloc] initWithFrame:CGRectMake(self.frame.size.width - self.radius, self.radius, self.radius, self.frame.size.height- self.radius*2)];
//        }
        else
        {
            _rightMiddleView= [[UIView alloc] initWithFrame:CGRectMake(self.frame.size.width - self.radius, self.radius, self.radius, self.frame.size.height- self.radius*2)];
        }

        _rightMiddleView.backgroundColor = self.fillColor;
    }
    return _rightMiddleView;
}

-(UIView *)upMiddleView{
    if (!_upMiddleView) {
        if((ERectangleCornerTypeLeftUpDown == self.rectangleCornerType) && self.frame.size.width < self.radius*2)
        {
            _upMiddleView = [[UIView alloc] initWithFrame:CGRectMake(self.radius, 0, (self.frame.size.width-self.radius)/2, self.radius)];
        }
        else if((ERectangleCornerTypeRighUpDown == self.rectangleCornerType) && self.frame.size.width < self.radius*2)
        {
            _upMiddleView = [[UIView alloc] initWithFrame:CGRectMake((self.frame.size.width-self.radius)/2, 0, (self.frame.size.width-self.radius)/2, self.radius)];
        }
        else
        {
            _upMiddleView = [[UIView alloc] initWithFrame:CGRectMake(self.radius, 0, self.frame.size.width - self.radius*2, self.radius)];
        }
        
        _upMiddleView.backgroundColor = self.fillColor;
    }
    return _upMiddleView;
}

-(UIView *)downMiddleView{
    if (!_downMiddleView) {
        if((ERectangleCornerTypeLeftUpDown == self.rectangleCornerType) && self.frame.size.width < self.radius*2)
        {
            _downMiddleView= [[UIView alloc] initWithFrame:CGRectMake(self.radius, self.frame.size.height- self.radius, (self.frame.size.width-self.radius)/2, self.radius)];
        }
        else if((ERectangleCornerTypeRighUpDown == self.rectangleCornerType) && self.frame.size.width < self.radius*2)
        {
            _downMiddleView= [[UIView alloc] initWithFrame:CGRectMake((self.frame.size.width-self.radius)/2, self.frame.size.height- self.radius, (self.frame.size.width-self.radius)/2, self.radius)];
        }
        else
        {
            _downMiddleView= [[UIView alloc] initWithFrame:CGRectMake(self.radius, self.frame.size.height- self.radius, self.frame.size.width - self.radius*2, self.radius)];
        }
        _downMiddleView.backgroundColor = self.fillColor;
    }
    return _downMiddleView;
}

-(UIView *)centerView{
    if (!_centerView) {
        if((ERectangleCornerTypeLeftUpDown == self.rectangleCornerType) && self.frame.size.width < self.radius*2)
        {
            _centerView = [[UIView alloc] initWithFrame:CGRectMake(self.radius, self.radius, (self.frame.size.width-self.radius)/2, self.frame.size.height - self.radius*2)];
        }
        else if((ERectangleCornerTypeRighUpDown == self.rectangleCornerType) && self.frame.size.width < self.radius*2)
        {
            _centerView = [[UIView alloc] initWithFrame:CGRectMake((self.frame.size.width-self.radius)/2, self.radius, (self.frame.size.width-self.radius)/2, self.frame.size.height - self.radius*2)];
        }
        else
        {
            _centerView = [[UIView alloc] initWithFrame:CGRectMake(self.radius, self.radius, self.frame.size.width-self.radius*2, self.frame.size.height - self.radius*2)];
        }
        _centerView.backgroundColor = self.fillColor;
    }
    return _centerView;
}

-(void)setAttributesWithRadius:(CGFloat)radius fillColor:(UIColor *)fillColor rectangleCornerType:(ERectangleCornerType)rectangleCornerType
{
    self.radius = radius;
    self.fillColor = fillColor;
    self.rectangleCornerType = rectangleCornerType;
    self.backgroundColor = [UIColor clearColor];
}
@end

方法二：用贝塞尔曲线实现。

typedef NS_OPTIONS(NSUInteger, UIRectCorner) {

UIRectCornerTopLeft = 1 << 0,

UIRectCornerTopRight = 1 << 1,

UIRectCornerBottomLeft = 1 << 2,

UIRectCornerBottomRight = 1 << 3,

UIRectCornerAllCorners = ~0UL

};

    CGSize radii = CGSizeMake(15, 15);
    // 随意改变4个圆角
    UIRectCorner corners = UIRectCornerTopLeft | UIRectCornerTopRight;
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:_photoImageView.bounds byRoundingCorners:corners cornerRadii:radii];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = self.bounds;
    maskLayer.path = path.CGPath;
    maskLayer.masksToBounds = NO;
    _photoImageView.layer.mask = maskLayer;
郏国上
目录
相关文章
明哥的IT随笔
|
SQL 分布式计算 数据安全/隐私保护
如何杜绝 spark history server ui 的未授权访问? 1
如何杜绝 spark history server ui 的未授权访问?
明哥的IT随笔
317 0
计蒙不吃鱼
|
6月前
|
Java Android开发
Android背景颜色滑动渐变效果（上下滑动，左右滑动）
本文分享了一种通过ScrollView实现滑动变色效果的简单方法。主要步骤包括：1) 在布局中添加ScrollView并确保内容可滑动；2) 获取屏幕高度；3) 获取控件高度；4) 使用GradientDrawable设置渐变颜色；5) 根据控件与屏幕高度比例动态调整颜色数量。示例代码展示了如何在滑动时根据比例改变背景颜色，实现流畅的视觉效果。
计蒙不吃鱼
191 0
枫叶丹4
|
6月前
|
编解码 Java 开发工具
【HarmonyOS Next之旅】DevEco Studio的安装与环境配置
本教程详细介绍了使用DevEco Studio进行OpenHarmony开发的全流程，包括下载与安装、环境配置、项目准备及实用技巧。首先，以Windows环境为例，说明了DevEco Studio的运行要求、下载和安装步骤；接着，通过设置环境变量和配置SDK完成开发环境搭建；然后，讲解了项目创建、预览器和虚拟机的使用方法；最后，分享了中文插件安装和简化工程目录栏等小技巧，帮助开发者高效上手OpenHarmony开发。
枫叶丹4
695 0
我是快乐的嘟嘟
|
缓存
CORS 报错的常见原因
【10月更文挑战第6天】
我是快乐的嘟嘟
2103 61
工程师阿龙
|
负载均衡 网络协议 关系型数据库
一口把LVS、Nginx及HAProxy工作原理讲清楚了。（附图）
一口把LVS、Nginx及HAProxy工作原理讲清楚了。（附图）
工程师阿龙
254 0
郏国上
|
iOS开发 MacOS
macOS10.13.6及以下版本不能自动升级到更高版本的解决方案
macOS10.13.6及以下版本不能自动升级到更高版本的解决方案
郏国上
2327 1
我是快乐的嘟嘟
Flutter 实现扫码
Flutter 实现扫码
我是快乐的嘟嘟
392 59
jcLee95
|
安全 Go 数据安全/隐私保护
Flutter开发笔记：Flutter路由技术
Flutter开发笔记：Flutter路由技术
jcLee95
1371 0
经典鸡翅
|
Java
Java 反射修改类的常量值、静态变量值、属性值
Java 反射修改类的常量值、静态变量值、属性值
经典鸡翅
1126 0
jcLee95
|
开发者
Flutter笔记：Widgets Easier组件库 - 使用标签（Tag）
Flutter笔记：Widgets Easier组件库 - 使用标签（Tag）
jcLee95
294 0

热门文章

最新文章

  • 1
    spanner 的前世今生
  • 2
    Canal是怎么伪装成 MySQL slave？
  • 3
    简述大疆无人机对接
  • 4
    【X-Pack解读】阿里云Elasticsearch X-Pack 监控组件功能详解
  • 5
    云大使推广可奖励返佣产品明细（战略产品）
  • 6
    Windows 7纯净版重装教程｜附微软原版镜像下载+驱动安装避坑技巧
  • 7
    MySQL中varchar最大长度是多少？
  • 8
    如何使用最流行框架Tensorflow进行时间序列分析——第二篇
  • 9
    什么是oracle的临时表？？
  • 10
    （十七）关于声明
  • 1
    Docker启动失败问题排查(一)
    46
  • 2
    智能体来了！企业降本增效新引擎，黎跃春谈AI智能体赋能管理创新
    46
  • 3
    Spring 核心注解 @Autowired 详解：告别 new，拥抱依赖注入！
    27
  • 4
    一文搞懂 AES 加密：现代对称加密的黄金标准
    44
  • 5
    智能体来了！智能体教育新纪元：从黎跃春的智能体开发实训，看AI人才培养的未来路径
    53
  • 6
    智能体来了！从大学课堂到产业实践，AI人才培养的全新路径
    48
  • 7
    一文读懂 RSA 加密：非对称加密的基石
    78
  • 8
    当AI开始写故事：AIGC重塑内容产业，创作的“边界”还剩什么？
    51
  • 9
    别等系统挂了才想起数据：智能运维里“数据可用性”才是根本功
    26
  • 10
    别光努力发内容了，先把“数据眼”睁开：用数据放大你的社交媒体影响力
    38

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    开通oss服务