iOS QQ粘性布局
iOS 仿照QQ未读消息提醒数字的粘性布局，实现了和QQ未读消息一样的功能，拖拽的时候会有粘性效果，在一定范围内拖拽松手还会回到原来的位置，超过一定距离之后就会播放一个动画。
效果图：
核心代码：
//
// BageValueBtn.m
// QQ粘性布局
//
// Created by llkj on 2017/9/5.
// Copyright © 2017年 LayneCheung. All rights reserved.
//
#import “BageValueBtn.h”
@interface BageValueBtn()
@property (nonatomic, weak) UIView *smallCircle;
@property (nonatomic, weak) CAShapeLayer *shap;
@end
@implementation BageValueBtn
-(void)awakeFromNib{
[super awakeFromNib];
[self setUP];
}
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
[self setUP];
}
return self;
}
-(CAShapeLayer *)shap{
if (_shap == nil) {
//形状图层
//它可以根据一个路径生成一个形状.
CAShapeLayer *shap = [CAShapeLayer layer];
//设置形状的填充颜色
shap.fillColor = [UIColor redColor].CGColor;
_shap = shap;
[self.superview.layer insertSublayer:shap atIndex:0];
}
return _shap;
}
//初始化
– (void)setUP{
//设置圆角
self.layer.cornerRadius = self.bounds.size.width * 0.5;
//设置背景颜色
[self setBackgroundColor:[UIColor redColor]];
[self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
self.titleLabel.font = [UIFont systemFontOfSize:12];
//添加手势
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[self addGestureRecognizer:pan];
//添加小圆
UIView *smallCircle = [[UIView alloc] init];
smallCircle.frame = self.frame;
smallCircle.backgroundColor = self.backgroundColor;
smallCircle.layer.cornerRadius = self.layer.cornerRadius;
self.smallCircle = smallCircle;
[self.superview insertSubview:smallCircle belowSubview:self];
}
//计算两个圆之间的距离
– (CGFloat)distanceWithSmallCircle:(UIView *)smallCircle bigCircle:(UIView *)bigCircle{
//X轴偏移量
CGFloat offsetX = bigCircle.center.x – smallCircle.center.x;
//Y轴偏移量
CGFloat offsetY = bigCircle.center.y – smallCircle.center.y;
return sqrtf(offsetX * offsetX + offsetY * offsetY);
}
//根据两个圆设置一个不规则的路径
– (UIBezierPath *)pathWithSmallCircle:(UIView *)smallCircle bigCircle:(UIView *)bigCircle{
CGFloat x1 = smallCircle.center.x;
CGFloat y1 = smallCircle.center.y;
CGFloat x2 = bigCircle.center.x;
CGFloat y2 = bigCircle.center.y;
CGFloat d = [self distanceWithSmallCircle:smallCircle bigCircle:self];
if (d <= 0) {
return nil;
}
CGFloat cosθ = (y2 – y1) / d;
CGFloat sinθ = (x2 – x1) / d;
CGFloat r1 = smallCircle.bounds.size.width * 0.5;
CGFloat r2 = bigCircle.bounds.size.width * 0.5;
CGPoint pointA = CGPointMake(x1 – r1 * cosθ, y1 + r1 * sinθ);
CGPoint pointB = CGPointMake(x1 + r1 * cosθ, y1 – r1 * sinθ);
CGPoint pointC = CGPointMake(x2 + r2 * cosθ, y2 – r2 * sinθ);
CGPoint pointD = CGPointMake(x2 – r2 * cosθ, y2 + r2 * sinθ);
CGPoint pointO = CGPointMake(pointA.x + d * 0.5 * sinθ, pointA.y + d * 0.5 * cosθ);
CGPoint pointP = CGPointMake(pointB.x + d * 0.5 * sinθ, pointB.y + d * 0.5 * cosθ);
UIBezierPath *path = [UIBezierPath bezierPath];
//AB
[path moveToPoint:pointA];
[path addLineToPoint:pointB];
//BC(曲线)
[path addQuadCurveToPoint:pointC controlPoint:pointP];
//CD
[path addLineToPoint:pointD];
//DA(曲线)
[path addQuadCurveToPoint:pointA controlPoint:pointO];
return path;
}
– (void)pan:(UIPanGestureRecognizer *)pan{
//frame,center,transform.
//移动.
CGPoint transP = [pan translationInView:self];
//修改transform值,并没有去修改center,它修改的frame
// self.transform = CGAffineTransformTranslate(self.transform, transP.x, transP.y);
CGPoint center = self.center;
center.x += transP.x;
center.y += transP.y;
self.center = center;
//复位
[pan setTranslation:CGPointZero inView:self];
//两个圆之间的距离
CGFloat distance = [self distanceWithSmallCircle:self.smallCircle bigCircle:self];
//让小圆的半径减去距离的比例
//获取小圆的半径
CGFloat smallR = self.bounds.size.width * 0.5;
smallR = smallR – distance / 10.0;
//要重设置小圆的尺寸
self.smallCircle.bounds = CGRectMake(0, 0, smallR * 2, smallR * 2);
//重新设置小圆的圆角
self.smallCircle.layer.cornerRadius = smallR;
//不规则的路径.
//如果小圆显示的时候再创建
if(self.smallCircle.hidden == NO){
UIBezierPath *path = [self pathWithSmallCircle:self.smallCircle bigCircle:self];
self.shap.path = path.CGPath;
}
//如果两个圆之间的距离超过某个范围.让小圆隐藏,shap移除
if(distance > 60){
self.smallCircle.hidden = YES;
[self.shap removeFromSuperlayer];
}
//当手指松开时,如果发现两个圆之间距离小于某个值时,大圆复位.
if(pan.state == UIGestureRecognizerStateEnded){
//如果发现两个圆之间距离小于某个值时,大圆复位.
if (distance < 60) {
//移除形状
[self.shap removeFromSuperlayer];
//添加一个弹性动画
[UIView animateWithDuration:0.25 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
//大圆复位.
self.center = self.smallCircle.center;
} completion:^(BOOL finished) {
//让小圆显示
self.smallCircle.hidden = NO;
}];
}else{
//如果发现两个圆之间距离大于某个值时,播放动画,按钮从父控件当中移.
//添加一个UIImageView
UIImageView *imageV = [[UIImageView alloc] initWithFrame:self.bounds];
NSMutableArray *imageArray = [NSMutableArray array];
for (int i = 0; i < 8; ++i) {
NSString *imageName = [NSString stringWithFormat:@”%d”,i + 1];
UIImage *image = [UIImage imageNamed:imageName];
[imageArray addObject:image];
}
imageV.animationImages = imageArray;
//设置动画的执行时长
[imageV setAnimationDuration:1];
//开始动画
[imageV startAnimating];
[self addSubview:imageV];
//一秒钟后.把当前的按钮从父控件当中移.
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
//把当前的按钮从父控件当中移.
[self removeFromSuperview];
});
}
}
}
//取消高亮状态
-(void)setHighlighted:(BOOL)highlighted{
}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
– (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
@end
