微信号:cocoachinabbs

介绍:CocoaChina苹果开发中文社区官方微信,提供教程资源、app推广营销、招聘、外包及培训信息、各类沙龙交流活动以及更多开发者服务.

即刻APP收藏按钮的实现

2018-02-10 22:00 Bawn

前不久即刻更新到了2.0,整体 UI 虽然朴实了不少,但也不乏一些精致的效果,比如收藏按钮,效果如下,代码已上传Github



实现这个效果需要三个元素


  1. 最下层利用 maskLayer 创造一个爱心形状的 View

  2. 中间层添加一个镂空的 ImageView 用于显示爱心边框

  3. 最上层需要一个用于显示填充动画的View



maskLayer 这里就不过多介绍了,如果用代码创建一个爱心形状的 maskLayer 也未免太麻烦, 虽然有paintcode这样的工具存在,所以直接用图片创建 maskLayer 是最佳方案:


- (void)setMaskImage:(UIImage *)maskImage{

    _maskImage = maskImage;

    if (!_maskLayer) {

        self.maskLayer = [CALayer layer];

        self.maskLayer.frame = CGRectMake(0,0, _maskImage.size.width, _maskImage.size.height);

        self.layer.mask = _maskLayer;// 必须设置frame

    }

    self.maskLayer.contents = (id)[_maskImage CGImage];

}


这里也验证下即刻是用图片创建 maskLayer 的事实,从 IPA 包中提取 Assets.car 文件,实际上这个文件就是Images.xcassets, 但是 Mac 上不能直接打开,所以就需要用到ThemeEngine工具,浏览里面的内容就可以找到:



很显然第一张图片就是用于创建 maskLayer,另一张就是用于第二个元素的创建,只需要简单的添加一个 Imageview


- (void)setBorderImage:(UIImage *)borderImage{

    _borderImage = borderImage;

    if (!_borderImageView) {

        self.borderImageView = [[UIImageView alloc] init];

        self.borderImageView.frame = CGRectMake(0,0, _borderImage.size.width, _borderImage.size.height);

        [self addSubview:_borderImageView];

    }

    self.borderImageView.image = _borderImage;

    [self sendSubviewToBack:_borderImageView];

}


最后,利用 setFillColor 方法创建 fillView,设置 transform 来配合之后的动画


- (void)setFillColor:(UIColor *)fillColor{

    _fillColor = fillColor;

    if (!_fillView) {

        self.fillView = [[UIView alloc] initWithFrame:self.bounds];

        self.fillView.layer.cornerRadius = self.bounds.size.width * 0.5f;

        self.fillView.transform = CGAffineTransformMakeScale(0, 0);

        [self addSubview:_fillView];

    }

    self.fillView.backgroundColor = _fillColor;


 
Cocoa开发者社区 更多文章 Weak-Strong-Dance真的安全吗? 写给前端看的 iOS 梳理 (上) iOS笔记 | Pointer is missing a nulla [译]用 LLDB 调试 Swift 代码 程序员以上帝视角解读“旅行青蛙”,你的呱真的在旅行嘛?
猜您喜欢 Nginx的一些基本功能 [往期回顾]团队的组建与小团队运维 从诺贝尔奖想到的 Android开发之Fragment最佳实践 软件开发的难点在于沟通,10年编程经历的总结