iOS开发-CAShapeLayer与UIBezierPath实现微信首页的下拉菜单效果
之前开发中遇到需要使用实现微信首页的下拉菜单效果。用到了CAShapeLayer与UIBezierPath绘制菜单外框。
一、效果图
二、CAShapeLayer与UIBezierPath
2.1、CAShapeLayer是什么？
CAShapeLayer继承自CALayer，可使用CALayer的所有属性
CAShapeLayer需要和UIBezierPath绘制图形。
创建shapeLayer
// 创建 shapeLayer
CAShapeLayer *shapeLayer = [[CAShapeLayer alloc]init];
[self.view.layer addSublayer:shapeLayer];
shapeLayer.path = path.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor blackColor].CGColor;
shapeLayer.lineWidth = 5;
2.2、UIBezierPath是什么？
UIBezierPath即贝塞尔曲线
UIBezierPath 类允许你在自定义的 View 中绘制和渲染由直线和曲线组成的路径
+ (instancetype)bezierPath;
+ (instancetype)bezierPathWithRect:(CGRect)rect;
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // rounds all corners with the same horizontal and vertical radius
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
三、绘制箭头
在弹出的菜单弹出时候会显示箭头，这里使用UIBezierPath和CAShapeLayer绘制箭头。
#pragma mark - DrawShapeLayer
- (void)drawShapeLayer {
CGFloat startPointX = self.contentStartPoint.x;
CGFloat startPointY = self.contentStartPoint.y;
CGFloat width = CGRectGetWidth(self.contentBGImageView.frame);
CGFloat height = CGRectGetHeight(self.contentBGImageView.frame);
self.path = [UIBezierPath bezierPath]; // 创建路径
[self.path moveToPoint:CGPointMake(startPointX, startPointY)]; // 设置起始点
[self.path addLineToPoint:CGPointMake(startPointX + 5.0, kAnchorHeight)];
[self.path addLineToPoint:CGPointMake(width - 5.0, kAnchorHeight)];
[self.path addArcWithCenter:CGPointMake(width - 5.0, kAnchorHeight + 5.0) radius:5 startAngle:KCP*3/2 endAngle:2*KCP clockwise:YES]; // 绘制一个圆弧
[self.path addLineToPoint:CGPointMake(width, height - 5.0)];
[self.path addArcWithCenter:CGPointMake(width - 5.0, height - 5.0) radius:5 startAngle:0 endAngle:KCP/2 clockwise:YES]; // 绘制一个圆弧
[self.path addLineToPoint:CGPointMake(5, height)];
[self.path addArcWithCenter:CGPointMake(5.0, height-5.0) radius:5 startAngle:KCP/2 endAngle:KCP clockwise:YES]; // 绘制一个圆弧
[self.path addLineToPoint:CGPointMake(0.0, kAnchorHeight + 5.0)];
[self.path addArcWithCenter:CGPointMake(5, kAnchorHeight + 5) radius:5 startAngle:KCP endAngle:KCP*3/2 clockwise:YES]; // 绘制一个圆弧
[self.path addLineToPoint:CGPointMake(startPointX - 5.0, kAnchorHeight)];
[self.path addLineToPoint:CGPointMake(startPointX, startPointY)];
self.path.lineWidth = 2.f;
self.path.lineCapStyle = kCGLineCapRound;
self.path.lineJoinStyle = kCGLineCapRound;
[self.path closePath]; // 封闭未形成闭环的路径
UIGraphicsBeginImageContext(self.contentBGImageView.bounds.size);
[self.path stroke];
UIGraphicsEndImageContext();
self.shapeLayer.path = self.path.CGPath;
}
四、点击触摸的mask处理
当下拉菜单显示后，MaskView上实现touchesBegan可以点击触摸可以隐藏菜单，
INNoteZoneOptionMaskView.h
#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>
@protocol INNoteZoneOptionMaskViewDelegate;
@interface INNoteZoneOptionMaskView : UIView
@property (nonatomic, weak) id<INNoteZoneOptionMaskViewDelegate>maskDelegate;
@end
@protocol INNoteZoneOptionMaskViewDelegate <NSObject>
- (void)optionMaskTouched;
@end
INNoteZoneOptionMaskView.m
#import "INNoteZoneOptionMaskView.h"
@implementation INNoteZoneOptionMaskView
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {
// 1.自己先处理事件...
if (self.maskDelegate && [self.maskDelegate respondsToSelector:@selector(optionMaskTouched)]) {
[self.maskDelegate optionMaskTouched];
}
// 2.再调用系统的默认做法，再把事件交给上一个响应者处理
[super touchesBegan:touches withEvent:event];
}
@end
五、菜单显示
控件显示在keyWindow上
[[UIApplication sharedApplication].keyWindow addSubview:self];
显示动画
- (void)showOption {
self.hidden = NO;
CGPoint anchorPoint = CGPointMake(self.contentStartPoint.x/self.contentBGImageView.frame.size.width, 0.0);
[self resetAnChorPoint:self.contentBGImageView anchorPoint:anchorPoint];
self.contentBGImageView.transform = CGAffineTransformMakeScale(0.1, 0.1);
[UIView animateWithDuration:0.25 animations:^{
self.contentBGImageView.transform = CGAffineTransformMakeScale(1.0, 1.0);
self.contentBGImageView.alpha = 1.0;
} completion:^(BOOL finished) {
}];
}
隐藏菜单
- (void)dismissOption {
[UIView animateWithDuration:0.25 animations:^{
self.contentBGImageView.transform = CGAffineTransformMakeScale(0.1, 0.1);
self.contentBGImageView.alpha = 0.0;
} completion:^(BOOL finished) {
self.hidden = YES;
[self removeFromSuperview];
}];
}
五、菜单完整代码
菜单完整代码如下
INNoteZoneOptionView.h
#import <UIKit/UIKit.h>
/**
元素的item
*/
typedef void(^OptionTouchBlock)(void);
@interface INNoteZoneOptionItem : NSObject
@property (nonatomic, strong) UIImage *iconImage;
@property (nonatomic, strong) NSString *title;
@property (nonatomic, copy) OptionTouchBlock block;
@end
/**
按钮控件
*/
@interface INNoteZoneOptionButton : UIControl
@property (nonatomic, strong) UIImage *iconImage;
@property (nonatomic, strong) NSString *title;
@property (nonatomic, assign) BOOL showLine;
@property (nonatomic, strong) INNoteZoneOptionItem *item;
@end
/**
点击➕号的选项操作
*/
@interface INNoteZoneOptionView : UIView
- (instancetype)initWithFrame:(CGRect)frame anchorPoint:(CGPoint)anchorPoint items:(NSArray *)items;
- (void)showOption;
- (void)dismissOption;
@end
INNoteZoneOptionView.m
#import "INNoteZoneOptionView.h"
#import "UIColor+Addition.h"
#import "UIImageView+WebCache.h"
#import "UIImage+YYAdd.h"
#import "INNoteZoneOptionMaskView.h"
#define KCP 3.1415926
static CGFloat kOpContentWidth = 130.0;
static CGFloat kOpItemHeight = 50.0;
static CGFloat kOpIconSize = 16.0;
static CGFloat kOpMidPadding = 10.0;
static CGFloat kAnchorHeight = 5.0;
static CGFloat kBtnMidPadding = 15.0;
static CGFloat kBtnPadding = 2.0;
static CGFloat kLineHeight = 1.0;
/**
元素的item
*/
@interface INNoteZoneOptionItem ()
@end
@implementation INNoteZoneOptionItem
@end
/**
按钮控件
*/
@interface INNoteZoneOptionButton ()
@property (nonatomic, strong) UIImageView *bgImageView;
@property (nonatomic, strong) UIImageView *iconImageView;
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UIImageView *lineImageView;
@end
@implementation INNoteZoneOptionButton
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self addSubview:self.bgImageView];
[self.bgImageView addSubview:self.iconImageView];
[self.bgImageView addSubview:self.titleLabel];
[self.bgImageView addSubview:self.lineImageView];
self.showLine = NO;
}
return self;
}
- (void)layoutSubviews {
[super layoutSubviews];
self.bgImageView.frame = self.bounds;
self.iconImageView.frame = CGRectMake(kBtnMidPadding, (CGRectGetHeight(self.bounds) - kOpIconSize)/2, kOpIconSize, kOpIconSize);
self.titleLabel.frame = CGRectMake(CGRectGetMaxX(self.iconImageView.frame) + kBtnMidPadding, 0.0, CGRectGetWidth(self.bgImageView.frame) - (CGRectGetMaxX(self.iconImageView.frame) + kBtnMidPadding*2), CGRectGetHeight(self.bounds));
self.lineImageView.frame = CGRectMake(0.0, CGRectGetHeight(self.bgImageView.frame) - kLineHeight, CGRectGetWidth(self.bgImageView.frame), kLineHeight);
}
- (void)setIconImage:(UIImage *)iconImage {
_iconImage = iconImage;
self.iconImageView.image = iconImage;
[self setNeedsLayout];
}
- (void)setTitle:(NSString *)title {
_title = (title?title:@"");
self.titleLabel.text = _title;
[self setNeedsLayout];
}
- (void)setShowLine:(BOOL)showLine {
_showLine = showLine;
self.lineImageView.hidden = !showLine;
[self setNeedsLayout];
}
- (void)setHighlighted:(BOOL)highlighted {
[super setHighlighted:highlighted];
if (highlighted) {
self.bgImageView.backgroundColor = [UIColor colorWithHexString:@"f4f4f4"];
} else {
self.bgImageView.backgroundColor = [UIColor whiteColor];
}
}
#pragma mark - SETTER/GETTER
- (UIImageView *)iconImageView {
if (!_iconImageView) {
_iconImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
_iconImageView.contentMode = UIViewContentModeScaleAspectFit;
}
return _iconImageView;
}
- (UILabel *)titleLabel {
if (!_titleLabel) {
_titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
_titleLabel.font = [UIFont boldSystemFontOfSize:14];
_titleLabel.textColor = [UIColor colorWithHexString:@"131619"];
_titleLabel.backgroundColor = [UIColor clearColor];
}
return _titleLabel;
}
- (UIImageView *)bgImageView {
if (!_bgImageView) {
_bgImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
_bgImageView.backgroundColor = [UIColor whiteColor];
_bgImageView.layer.cornerRadius = 2.0;
_bgImageView.layer.masksToBounds = YES;
}
return _bgImageView;
}
- (UIImageView *)lineImageView {
if (!_lineImageView) {
_lineImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
_lineImageView.backgroundColor = [UIColor colorWithHexString:@"f1f1f1"];
}
return _lineImageView;
}
@end
/**
点击➕号的选项操作
*/
@interface INNoteZoneOptionView ()<INNoteZoneOptionMaskViewDelegate>
@property (nonatomic, strong) INNoteZoneOptionMaskView *maskBGView;
@property (nonatomic, strong) UIImageView *contentBGImageView;
@property (nonatomic, strong) CAShapeLayer *shapeLayer;
@property (nonatomic, strong) UIBezierPath *path;
@property (nonatomic) CGPoint anchorPoint;
@property (nonatomic) CGPoint contentStartPoint;
@property (nonatomic, strong) NSArray *items;
@end
@implementation INNoteZoneOptionView
- (instancetype)initWithFrame:(CGRect)frame anchorPoint:(CGPoint)anchorPoint items:(NSArray *)items {
self = [super initWithFrame:frame];
if (self) {
self.anchorPoint = anchorPoint;
self.items = items;
[self addSubview:self.maskBGView];
[self addSubview:self.contentBGImageView];
[self.contentBGImageView.layer addSublayer:self.shapeLayer];
[[UIApplication sharedApplication].keyWindow addSubview:self];
self.frame = [UIScreen mainScreen].bounds;
self.hidden = YES;
[self layoutOptionSubviews];
[self configContentPoint];
[self drawShapeLayer];
[self setupOptionButtons];
}
return self;
}
- (void)configContentPoint {
CGFloat scale = self.anchorPoint.x/self.frame.size.width;
CGFloat contentWidth = CGRectGetWidth(self.contentBGImageView.frame);
self.contentStartPoint = CGPointMake(scale*contentWidth - kOpMidPadding, 0.0);
}
- (void)layoutOptionSubviews {
self.maskBGView.frame = self.bounds;
self.contentBGImageView.frame = CGRectMake(CGRectGetWidth(self.bounds) - kOpContentWidth - kOpMidPadding, self.anchorPoint.y, kOpContentWidth, self.items.count*kOpItemHeight + kAnchorHeight + 2*kBtnPadding);
self.shapeLayer.frame = self.contentBGImageView.bounds;
}
#pragma mark - Setup Buttons
- (void)setupOptionButtons {
NSInteger index = 0;
for (INNoteZoneOptionItem *item in self.items) {
INNoteZoneOptionButton *button = [[INNoteZoneOptionButton alloc] initWithFrame:CGRectZero];
button.frame = CGRectMake(kBtnPadding, kBtnPadding + kAnchorHeight + index*kOpItemHeight, CGRectGetWidth(self.contentBGImageView.frame) - 2*kBtnPadding, kOpItemHeight);
button.iconImage = item.iconImage;
button.title = item.title;
button.item = item;
[self.contentBGImageView addSubview:button];
[button addTarget:self action:@selector(optionButtonAction:) forControlEvents:UIControlEventTouchUpInside];
button.showLine = YES;
if (index == self.items.count - 1) {
button.showLine = NO;
}
index++;
}
}
- (void)optionButtonAction:(INNoteZoneOptionButton *)button {
NSLog(@"点击栏目");
if (button.item && button.item.block) {
button.item.block();
}
}
#pragma mark - Show AND Dismiss
- (void)showOption {
self.hidden = NO;
CGPoint anchorPoint = CGPointMake(self.contentStartPoint.x/self.contentBGImageView.frame.size.width, 0.0);
[self resetAnChorPoint:self.contentBGImageView anchorPoint:anchorPoint];
self.contentBGImageView.transform = CGAffineTransformMakeScale(0.1, 0.1);
[UIView animateWithDuration:0.25 animations:^{
self.contentBGImageView.transform = CGAffineTransformMakeScale(1.0, 1.0);
self.contentBGImageView.alpha = 1.0;
} completion:^(BOOL finished) {
}];
}
- (void)dismissOption {
[UIView animateWithDuration:0.25 animations:^{
self.contentBGImageView.transform = CGAffineTransformMakeScale(0.1, 0.1);
self.contentBGImageView.alpha = 0.0;
} completion:^(BOOL finished) {
self.hidden = YES;
[self removeFromSuperview];
}];
}
#pragma mark - ResetAnChorPoint
/**
设置动画图钉位置
@param view subView
*/
- (void)resetAnChorPoint:(UIView *)view anchorPoint:(CGPoint)anchorPoint {
CGPoint oldAnchorPoint = view.layer.anchorPoint;
view.layer.anchorPoint = anchorPoint;
[view.layer setPosition:CGPointMake(view.layer.position.x + view.layer.bounds.size.width * (view.layer.anchorPoint.x - oldAnchorPoint.x), view.layer.position.y + view.layer.bounds.size.height * (view.layer.anchorPoint.y - oldAnchorPoint.y))];
}
#pragma mark - INNoteZoneOptionMaskViewDelegate
- (void)optionMaskTouched {
[self dismissOption];
}
#pragma mark - SETTER/GETTER
- (INNoteZoneOptionMaskView *)maskBGView {
if (!_maskBGView) {
_maskBGView = [[INNoteZoneOptionMaskView alloc] initWithFrame:CGRectZero];
_maskBGView.backgroundColor = [UIColor clearColor];
_maskBGView.userInteractionEnabled = YES;
_maskBGView.maskDelegate = self;
}
return _maskBGView;
}
- (UIImageView *)contentBGImageView {
if (!_contentBGImageView) {
_contentBGImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
_contentBGImageView.userInteractionEnabled = YES;
_contentBGImageView.backgroundColor = [UIColor clearColor];
}
return _contentBGImageView;
}
- (CAShapeLayer *)shapeLayer {
if (!_shapeLayer) {
_shapeLayer = [CAShapeLayer layer];
_shapeLayer.fillColor = [UIColor whiteColor].CGColor;
//设置线条的宽度和颜色
_shapeLayer.lineWidth = 1.0f;
_shapeLayer.strokeColor = [UIColor colorWithHexString:@"9bb9ef" alpha:0.55].CGColor;
_shapeLayer.shadowColor = [UIColor colorWithHexString:@"9bb9ef"].CGColor;
_shapeLayer.shadowOffset = CGSizeMake(-3, 3);
_shapeLayer.shadowOpacity = 0.3;
_shapeLayer.shadowRadius = 3.0;
}
return _shapeLayer;
}
#pragma mark - DrawShapeLayer
- (void)drawShapeLayer {
CGFloat startPointX = self.contentStartPoint.x;
CGFloat startPointY = self.contentStartPoint.y;
CGFloat width = CGRectGetWidth(self.contentBGImageView.frame);
CGFloat height = CGRectGetHeight(self.contentBGImageView.frame);
self.path = [UIBezierPath bezierPath]; // 创建路径
[self.path moveToPoint:CGPointMake(startPointX, startPointY)]; // 设置起始点
[self.path addLineToPoint:CGPointMake(startPointX + 5.0, kAnchorHeight)];
[self.path addLineToPoint:CGPointMake(width - 5.0, kAnchorHeight)];
[self.path addArcWithCenter:CGPointMake(width - 5.0, kAnchorHeight + 5.0) radius:5 startAngle:KCP*3/2 endAngle:2*KCP clockwise:YES]; // 绘制一个圆弧
[self.path addLineToPoint:CGPointMake(width, height - 5.0)];
[self.path addArcWithCenter:CGPointMake(width - 5.0, height - 5.0) radius:5 startAngle:0 endAngle:KCP/2 clockwise:YES]; // 绘制一个圆弧
[self.path addLineToPoint:CGPointMake(5, height)];
[self.path addArcWithCenter:CGPointMake(5.0, height-5.0) radius:5 startAngle:KCP/2 endAngle:KCP clockwise:YES]; // 绘制一个圆弧
[self.path addLineToPoint:CGPointMake(0.0, kAnchorHeight + 5.0)];
[self.path addArcWithCenter:CGPointMake(5, kAnchorHeight + 5) radius:5 startAngle:KCP endAngle:KCP*3/2 clockwise:YES]; // 绘制一个圆弧
[self.path addLineToPoint:CGPointMake(startPointX - 5.0, kAnchorHeight)];
[self.path addLineToPoint:CGPointMake(startPointX, startPointY)];
self.path.lineWidth = 2.f;
self.path.lineCapStyle = kCGLineCapRound;
self.path.lineJoinStyle = kCGLineCapRound;
[self.path closePath]; // 封闭未形成闭环的路径
UIGraphicsBeginImageContext(self.contentBGImageView.bounds.size);
[self.path stroke];
UIGraphicsEndImageContext();
self.shapeLayer.path = self.path.CGPath;
}
@end
六、使用显示下拉菜单
使用显示下拉菜单代码，根据anchorPoint确定显示的箭头位置
#pragma mark - INNoteZoneNavbarViewDelegate
- (void)addButtonDidAction:(UIButton *)button {
CGRect btnRect = [button convertRect:button.bounds toView:[UIApplication sharedApplication].keyWindow];
__weak typeof(self) weakSelf = self;
INNoteZoneOptionItem *postItem = [[INNoteZoneOptionItem alloc] init];
postItem.iconImage = [UIImage imageNamed:@"ic_op_editpost"];
postItem.title = @"发布帖子";
postItem.block = ^{
NSLog(@"发布帖子");
};
INNoteZoneOptionItem *scanItem = [[INNoteZoneOptionItem alloc] init];
scanItem.iconImage = [UIImage imageNamed:@"ic_op_scan"];
scanItem.title = @"扫一扫";
scanItem.block = ^{
NSLog(@"扫一扫");
};
INNoteZoneOptionItem *calItem = [[INNoteZoneOptionItem alloc] init];
calItem.iconImage = [UIImage imageNamed:@"ic_op_cal"];
calItem.title = @"日历";
calItem.block = ^{
NSLog(@"日历");
};
INNoteZoneOptionItem *pubWordItem = [[INNoteZoneOptionItem alloc] init];
pubWordItem.iconImage = [UIImage imageNamed:@"ic_op_edit"];
pubWordItem.title = @"发布美句";
pubWordItem.block = ^{
NSLog(@"发布美句");
};
INNoteZoneOptionView *optionView = [[INNoteZoneOptionView alloc] initWithFrame:CGRectZero anchorPoint:CGPointMake(CGRectGetMidX(btnRect), CGRectGetMaxY(btnRect)) items:@[postItem,scanItem,calItem,pubWordItem]];
[optionView showOption];
}
七、小结
iOS开发-CAShapeLayer与UIBezierPath实现微信首页的下拉菜单效果。用到了CAShapeLayer与UIBezierPath绘制菜单外框。
学习记录，每天不停进步。