AppDevKit for iOS Development

AppDevKit for iOS Development

Anistar SungYahoo Engineering Manager

Introducing AppDevKit

Quick demonstrate for AppDevKit

Agenda

Smart Design + ArchitectureWanting everything easier

CHALLENGE

AppDevKithttps://github.com/yahoo/AppDevKit

Over 100+ features

ListView

Color

AutoLayout

Image Filters

Image Analysis

What AppDevKit didCover regular development requirement

Animator

Cache

Formatter

Modal

View

What AppDevKit didCover regular development requirement

Quick demonstrate for AppDevKitIntroduce few major features

Hard to sync with designer

After requirement changing need to rewrite code

Change once apply anywhere The pain for changing

Designer: I want red color background.

Developer: Sure! self.backgroundColor = [UIColor redColor];

Challenge on Color Design easy sync tool for designer

Designer: I want #7b19a9 background.

Developer: What!?

Challenge on Color Design easy sync tool for designer

!?

Designer: I want Yahoo background.

Developer: Mom, I want go home. :(

Challenge on Color Design easy sync tool for designer

#@*$!

Using Category to improve UIColor

+ (UIColor *)ADKColorWithHexString:(NSString *)hexstring;+ (UIColor *)ADKColorWithHexNumber:(NSUInteger)hexNumber;

Challenge on Color Design easy sync tool for designer

Management your theme color

+ (UIColor *)themeBackground; + (UIColor *)themeForeground; + (UIColor *)themeDisabled; + (UIColor *)themeFocus; + (UIColor *)themeHighlight; + (UIColor *)themeTitle; + (UIColor *)themeSubtitle;

Challenge on Color Design easy sync tool for designer

+ (UIColor *)themeBackground{ return [UIColor ADKColorWithHexString:@"1f2f3b"];}

+ (UIColor *)themePanel{ return [UIColor ADKColorWithHexString:@"333e49"];}

Change once apply anywhere Theme color management

+ (UIColor *)themeBackground{ return [UIColor ADKColorWithHexString:@"dedede"];}

+ (UIColor *)themePanel{ return [UIColor ADKColorWithHexString:@"f4f4f4"];}

Change once apply anywhere Theme color management

Change once apply anywhere Theme color management

DemoUsing UIColor+ADKHexPresentation

Using AutoLayout Easier Solve UI elements alignment problem

Using AutoLayout Easier Solve UI elements alignment problem

Using AutoLayout Easier Solve UI elements alignment problem

Using AutoLayout Easier Solve UI elements alignment problem

Control constraint

@import “UIView+ADKAutoLayoutSupport.h” [self.presetImageView hideTopConstraint]; [self.presetImageView unhideTopConstraint];

Using AutoLayout Easier Solve UI elements alignment problem

Control constraint

@import “UIView+AutoLayoutSupport.h”

- (void)setConstraintConstant:(CGFloat)constant forAttribute:(NSLayoutAttribute)attribute;

Using AutoLayout Easier Solve UI elements alignment problem

DemoUsing UIView+ADKAutoLayoutSupport

UIViewController

- (void)presentViewController:(UIViewController *)viewControllerToPresentanimated:(BOOL)flag completion:(void (^)(void))completion

Providing Fancy Modal View Customizing your modal effect

@import “ADKModalMaskView.h” [self.modalView showInView:self.view withAnimation:YES completion:^(BOOL finished) { // Do something you want }];

Providing Fancy Modal View Customizing your modal effect

DemoUsing ADKModalMaskView

ICON should apply theme color

Fast materials replacement ICON and assets color

UIImage+ADKColorReplacement.h

+ (UIImage *)ADKImage:(UIImage *)image tintColor:(UIColor *)color; + (UIImage *)ADKImage:(UIImage *)image replaceColor:(UIColor *)color;

+ (UIImage *)ADKImageNamed:(NSString *)name tintColor:(UIColor *)color; + (UIImage *)ADKImageNamed:(NSString *)name replaceColor:(UIColor *)color;

Fast materials replacement Implement category for UIImage

Change ICON’s theme color

@import “UIImage+ADKColorReplacement.h” self.presetImageView.image = [UIImage ADKImageNamed:@“icon-folder.png" replaceColor:[UIColor themeLightWhite]]; UIImage *settingButtonImage = [UIImage ADKImageNamed:@"icon-setting.png" replaceColor:[UIColor themeForeground]];[settingButton setImage:settingButtonImage forState:UIControlStateNormal];

Fast materials replacement Implement category for UIImage

Fast materials replacement ICON theme color management

DemoUsing UIImage+ADKImageFilter

Most content can be displayed by list view

UICollectionView is a powerful component

Easy to present content List view for presentation

Change once apply anywhere Interface change

UICollectionView can set up cell size

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { return CGsizeMake(320.0.f, 200.0f); }

Change once apply anywhere Interface change

UICollectionView can set up cell size

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { return [[[[[NSBundle mainBundle] loadNibNamed:@“Cell” owner:self options:nil] lastObject] bounds] size]; }

Change once apply anywhere Interface change

UICollectionView can set up cell size SMARTER!

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { return [[ADKNibSizeCalculator sharedInstance] sizeForNibNamed:@"Cell"]; }

Change once apply anywhere Interface change

UICollectionView can set up cell size SMARTER!

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { CGSize cellSize = [[NibSizeCalculator sharedInstance] sizeForNibNamed:@“Cell”]; return [[ADKCellDynamicSizeCalculator sharedInstance] sizeForDynamicHeightCellInstance:sampleCell preferredSize:cellSize]; }

Change once apply anywhere Interface change

DemoUsing Dynamic Cells for List View

Anistar Sung Yahoo Engineering [email protected]

AppDevKit Yahoo Core TeamYahoo Engineering Engineers [email protected]

More information

Q + A