IOS componentization – Basics

The resources

1. Componentized Enlightenment Article:

IOS App Architecture talk

2. Componentize through Cocoapods:

Cocoapods builds private libraries – official

Cocoapods Apps Part 2 – Private Libraries

Create a private PodSpec using Cocoapods

Add a resource file to Pod

3. Componentization related information:

Detailed explanation of iOS CTMediator componentization practice

Cocoapods series tutorials

Related articles

IOS componentization – Project componentization

Why do we componentize projects?

In my own experience:

1. As business increases, requirements are iterated. The whole project is getting more and more files, the Build is getting slower and slower, press Command + R, then have a cappuccino and squat back, the project is not finished yet…

2. Do outsourcing, oh no, do projects for outsourcing companies. Common basic functionality code, such as: chrysanthemums, network access components, drop-down refresh, data persistence, classification of base classes. Instead of making them private, we have to:

Anyway, I componentized the project and I did two things:

1. Make basic functionality a private library that can be added to any project via POD;
2. Make the independent function module into a private library, and then add the module to the main project to achieve module separation, here I am dying to solve the solution.

Create a private Spec Repo

Private libraries use private Spec Repo of course, you can use the official Repo of course, but if you just want to add your own Pods, use the private Repo instead. Open: ~/.cocoapods/repos. You’ll see a master folder that is Cocoapods’ official Spec Repo.

1.1. Create a private Git repository as a private Repo

Create the DYDemoSpecs warehouse here.

1.2. Run the repo command to add a private REPO

# pod repo add [Private Repo Name] [GitHub HTTPS clone URL]
$ pod repo add DYDemoSpecs https://github.com/liyunxin/DYDemoSpecs.gitCopy the code

If successful, go to the: ~/.cocoapods/repos directory and see DYDemoSpecs.

2. Create a component library

Using Pod Lib Create to Create a component library

Create a DYDemoTools project Using Pod Lib Create. CD to the directory where you want to create the project and execute:

$ pod lib create DYDemoToolsCopy the code

Then on the command line you need to confirm some parameters:

Different projects are created based on the input from the command line

2.2. Create the DYDemoTools warehouse

Create the DYDemoTools repository and clone it locally.

Copy the project files generated in step 2.1 to the DYDemoTools repository directory

You can also set up remote repositories directly for projects built in 2.1

2.3 podSpec files

Podspec is a Ruby file that you can view by opening the Example project.

Here is the podSpec file I used in DYDemoTools:

Related fields can be consulted in the official documentation

Pod::Spec.new do |s|
  s.name             = 'DYDemoTools'
  s.version          = '0.0.1'
  s.summary          = 'DYDemoTools.'

  s.description      = <<-DESC
  TODO: Add long description of the pod here.
  DESC

  s.homepage         = 'https://github.com/liyunxin/DYDemoTools'
  s.license          = { :type= >'MIT', :file => 'LICENSE' }
  s.author           = { 'liyunxin'= >'[email protected]' }
  s.source           = { :git => 'https://github.com/liyunxin/DYDemoTools.git', :tag => s.version.to_s }

  s.platform   = :ios, "10.0"
  s.frameworks = 'UIKit'

  s.source_files = 'DYDemoTools/Classes/**/*'
  
endCopy the code

As you can see from podSpec, the source_files field is set to place the source files for this component in the DYDemoTools folder in the repository.

2.4. Add classes to components

Here I add a custom Button to Pod/Classes, then go to the Example folder and execute Pod Update. Open the Example project again and you can see:

You need to re-execute the POD update command every time you modify a POD or later update a podSpec version

Example:

Import KHBarButton directly into the ViewController of the Example project, adding the navigation controller to main. storyboard first

#import "ViewController.h"
#import "KHBarButton.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationItem.rightBarButtonItem = [[KHBarButton rightBtnWithTitle:@"Demacia" Color:[UIColor blackColor] ClickOption:^{
        NSLog(@"Demacia, forever and ever.");
    }] getBarItem];
}

@endCopy the code

2.5. Adding a resource file (e.g., adding a photo)

• Create DYDemoToolsAsset. Xcassets used to store DYDemoTools component images
• Create a Base folder in the Pod, the DYDemoToolsAsset. Xcassets into it
• Add the relevant code to your PodSpec

Pod::Spec.new do |s|
  s.name             = 'DYDemoTools'
  s.version          = '0.0.1'
  s.summary          = 'DYDemoTools.'

  s.description      = <<-DESC
  TODO: Add long description of the pod here.
  DESC

  s.homepage         = 'https://github.com/liyunxin/DYDemoTools'
  s.license          = { :type= >'MIT', :file => 'LICENSE' }
  s.author           = { 'liyunxin'= >'[email protected]' }
  s.source           = { :git => 'https://github.com/liyunxin/DYDemoTools.git', :tag => s.version.to_s }

  s.platform   = :ios, "10.0"
  s.frameworks = 'UIKit'

  s.source_files = 'DYDemoTools/**/*'

  s.resource_bundles = {
    'DYDemoTools'= > ['DYDemoTools/Base/*.xcassets']
  }
endCopy the code

• Add any image to DYDemoToolsAsset
• Create a Tools folder in Pod, and then create and add the DYDemoYools class
• Open the Example folder and execute pod Update
• Open the Example project and see the following directory:

There are many ways to get an image from DYDemoToolsAsset. Here’s the way:

Add a class method to DYDemoYools that specifically fetches

Images in DYDemoToolsAsset

#import <Foundation/Foundation.h>@interface DYDemoTools: NSObject // get the image of the KHealthTools Bundle + (UIImage *)getToolsBundleImage:(NSString *)imageName; @endCopy the code

#import "DYDemoTools.h"@implementation DYDemoTools // get the image of DYDemoTools + (UIImage *)getToolsBundleImage:(NSString *)imageName {static NSBundle *bundle;if (bundle == nil) {
        bundle = [NSBundle bundleWithPath:[[NSBundle bundleForClass:NSClassFromString(@"DYDemoTools")] pathForResource:@"DYDemoTools" ofType:@"bundle"]];
    }
    
    UIImage *image = [UIImage imageNamed:imageName inBundle:bundle compatibleWithTraitCollection:nil];
    if (image == nil) {
        image = [UIImage imageNamed:imageName];
    }
    
    return image;
}

@end
Copy the code

Example:

Import DYDemoTools directly into the ViewController of the Example project

#import "ViewController.h"
#import "KHBarButton.h"
#import "DYDemoTools.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    __weak typeof(self) weakSelf = self;
    self.navigationItem.rightBarButtonItem = [[KHBarButton rightBtnWithTitle:@"Demacia" Color:[UIColor blackColor] ClickOption:^{
        [weakSelf addImageDemo];
    }] getBarItem];
}

- (void)addImageDemo {
    UIImage *img = [DYDemoTools getToolsBundleImage:@"img1"];
    UIImageView *iV = [[UIImageView alloc] initWithFrame:CGRectMake(50, 100, img.size.width, img.size.height)];
    iV.image = img;
    [self.view addSubview:iV];
}

@endCopy the code

Effect:

2.6. Set subSpec

This will be of great use in the future

Add dydemoToolsheader.h to Base

Pod::Spec.new do |s|
  s.name             = 'DYDemoTools'
  s.version          = '0.0.1'
  s.summary          = 'A short description of DYDemoTools.'

  s.description      = <<-DESC
  TODO: Add long description of the pod here.
  DESC

  s.homepage         = 'https://github.com/liyunxin/DYDemoTools'
  s.license          = { :type= >'MIT', :file => 'LICENSE' }
  s.author           = { 'liyunxin'= >'[email protected]' }
  s.source           = { :git => 'https://github.com/liyunxin/DYDemoTools.git', :tag => s.version.to_s }

  s.platform   = :ios, "10.0"
  s.frameworks = 'UIKit'
  
  s.subspec '0_Base' do |sb|
    sb.source_files = "DYDemoTools/0_Base/**/*.{h,m}"
    sb.resource_bundles = {
      'DYDemoTools'= > ['DYDemoTools/0_Base/*.xcassets']
    }
  end
  
  s.subspec '1_Tools' do |st|
    st.source_files = "DYDemoTools/1_Tools/**/*.{h,m}"
  end
  
  s.subspec '2_View' do |sv|
    sv.source_files = "DYDemoTools/2_View/**/*.{h,m}"
  end
  
end
Copy the code

2.7. Submit the PodSpec to the Spec Repo

Here we are, checking your PodSpec before submitting. Otherwise I can’t submit it. You also need to tag Git with the same version as podSpec.

# CD Go to the DYDemoTools folder and execute the following command
pod lib lint --allow-warningsCopy the code

If: DYDemoTools passed validation. Congratulations to me, local verification passed:

# CD Go to the DYDemoTools folder and execute the following command
pod repo push DYDemoSpecs DYDemoTools.podspec --allow-warningsCopy the code

View: ~ /. Cocoapods/repos/DYDemoSpecs, you will see a new DYDemoSpecs

At this point, the first component library is created

3. Use components in projects

Create the DYDemo666 repository here.

Create a DYDemo666 project. Add the podfile file as follows:

use_frameworks!

platform :ios, '10.0'

source 'https://github.com/CocoaPods/Specs.git'  # the official library
source 'https://github.com/liyunxin/DYDemoSpecs.git' # private library

target 'DYDemo666' do
  pod 'DYDemoTools'
endCopy the code

Open the project after successful execution:

ViewController in DYDemo666 uses component stuff:

#import "ViewController.h"
#import "DYDemoToolsHeader.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    __weak typeof(self) weakSelf = self;
    self.navigationItem.rightBarButtonItem = [[KHBarButton rightBtnWithTitle:@"Ha ha ha." Color:[UIColor blackColor] ClickOption:^{
        [weakSelf addImageDemo];
    }] getBarItem];
}

- (void)addImageDemo {
    UIImage *img = [DYDemoTools getToolsBundleImage:@"img1"];
    UIImageView *iV = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, img.size.width, img.size.height)];
    iV.image = img;
    [self.view addSubview:iV];
}

@endCopy the code

Effect:

4. Componentize the project

Next note in the next article: iOS componentization – Project Componentization