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

2019-01-23  本文已影响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

上一篇下一篇

猜你喜欢

热点阅读