美文网首页
组件化之路2.封装一个简单的组件

组件化之路2.封装一个简单的组件

作者: 书包里的码农 | 来源:发表于2019-01-23 17:44 被阅读46次
    引言:

    在开发过程中, 我们经常会遇到一些需求是之前写过的, 或者类似的, 这时候我们可能会封装一个通用的工具, 调用封装好的方法, 获得想要的结果, 协同开发时, 其他人导入一下这个工具, 也可以使用, 提高开发效率, 这就构成了组件化的一部分--公共组件, 接下来我们试着提供一个简单的组件.

    1.上传代码到git仓库, 本文使用的是GitHub, 其他平台如国内的码云码市也是支持的, 本文以GitHub为例.
    1. 我们之前的文章已经有讲过, 不了解的同学请查看这篇文章

    2.其实本文中用到的功能还不需要上传到远端去管理代码, 这里我们是为了模拟我们在开发中, 先创建仓库, 在开始编码的习惯.

    1. 当我们有了一个基础的仓库, 并且仓库中有了一个项目, 那么我们就可以把我们封装的组件/工具放到工程中, 而工程其实就是我们为之提供的使用demo, 先来看看我们的仓库和工程目录吧.


      仓库目录和Xcode中打开的效果
    2.封装组件

    1.现在我们开始封装一个简单的组件, 这里组件提供的主要功能是给UIView的实例增加一个阴影, 使用#import "UIView+ZZExtension.h"导入头文件之后可以使用UIView以及其子类对象直接调用实例方法, 以下是方法的实现.

    2.这里是如何创建一个类别(工具可以是你写的任意代码, 我这里以类别作为演示)


    类别的创建方法1 类别的创建方法2

    3.附上类别中的代码

    //UIView+ZZExtension.h
    #import <UIKit/UIKit.h>
    
    NS_ASSUME_NONNULL_BEGIN
    
    @interface UIView (ZZExtension)
    
    - (void)zz_setShadowWithColor:(UIColor *)color cornerRadius:(CGFloat)cornerRadius;
    
    @end
    
    NS_ASSUME_NONNULL_END
    
    
    //UIView+ZZExtension.m
    #import "UIView+ZZExtension.h"
    
    @implementation UIView (ZZExtension)
    
    - (void)zz_setShadowWithColor:(UIColor *)color cornerRadius:(CGFloat)cornerRadius {
        
        self.layer.shadowColor = color.CGColor;
        self.layer.shadowOffset = CGSizeMake(0,2);
        self.layer.shadowOpacity = 1;
        self.layer.shadowRadius = 4;
        self.layer.cornerRadius = cornerRadius;
        self.clipsToBounds = NO;
        
    }
    
    @end
    
    3.组件的使用和效果
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        UIView *testView = [[UIView alloc] init];
        [self.view addSubview:testView];
        testView.bounds = CGRectMake(0, 0, 160, 80);
        testView.center = self.view.center;
        testView.backgroundColor = [UIColor yellowColor];
        
        //这里是类别提供的方法, 我们要把自己写的类别(工具)以组件的方式提供给第三方使用, 这时候上传到cocoapods就是一个非常重要的方式.
        [testView zz_setShadowWithColor:[UIColor redColor] cornerRadius:10];
        
    }
    
    给黄色view添加添加了一个红色阴影

    最终效果demo GitHub地址, 这里是分支, 请确保下载的分支名称为:CompleteThePackaging

    相关文章

      网友评论

          本文标题:组件化之路2.封装一个简单的组件

          本文链接:https://www.haomeiwen.com/subject/fppljqtx.html