appdevkit for ios development
TRANSCRIPT
AppDevKit for iOS Development
Anistar SungYahoo Engineering Manager
Introducing AppDevKit
Quick demonstrate for AppDevKit
Agenda
Smart Design + ArchitectureWanting everything easier
CHALLENGE
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