Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
AppDevKit for iOS Development
Anistar Sung
Yahoo Engineering Manager
Introducing AppDevKit
Quick demonstrate for AppDevKit
Agenda
Smart Design + Architecture
Wanting everything easier
CHALLENGE
AppDevKit
https://github.com/yahoo/AppDevKit
Over 100+ features
ListView
Color
AutoLayout
Image Filters
Image Analysis
What AppDevKit did
Cover regular development requirement
Animator
Cache
Formatter
Modal
View
What AppDevKit did
Cover regular development requirement
Quick demonstrate for AppDevKit
Introduce 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
D...
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 designe...
Using Category to improve UIColor
+ (UIColor *)ADKColorWithHexString:(NSString *)hexstring;

+ (UIColor *)ADKColorWithHexN...
Management your theme color
+ (UIColor *)themeBackground;
+ (UIColor *)themeForeground;
+ (UIColor *)themeDisabled;
+ (UIC...
+ (UIColor *)themeBackground

{

return [UIColor ADKColorWithHexString:@"1f2f3b"];

}
+ (UIColor *)themePanel

{

return [...
+ (UIColor *)themeBackground

{

return [UIColor ADKColorWithHexString:@"dedede"];

}
+ (UIColor *)themePanel

{

return [...
Change once apply anywhere
Theme color management
Demo
Using 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.presetImageV...
Control constraint

@import “UIView+AutoLayoutSupport.h”
- (void)setConstraintConstant:(CGFloat)constant forAttribute:
(NS...
Demo
Using UIView+ADKAutoLayoutSupport
UIViewController
- (void)presentViewController:(UIViewController *)viewControllerToPresent

animated:(BOOL)flag completion:...
@import “ADKModalMaskView.h”


[self.modalView showInView:self.view
withAnimation:YES
completion:^(BOOL finished) {
// Do ...
Demo
Using 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:(U...
Change ICON’s theme color

@import “UIImage+ADKColorReplacement.h”


self.presetImageView.image = [UIImage ADKImageNamed:@...
Fast materials replacement
ICON theme color management
Demo
Using UIImage+ADKImageFilter
Most content can be displayed by
list view
UICollectionView is a powerful
component
Easy to present content
List view for ...
Change once apply anywhere
Interface change
UICollectionView can set up cell size
- (CGSize)collectionView:(UICollectionView *)collectionView 

layout:(UICollectionVi...
UICollectionView can set up cell size
- (CGSize)collectionView:(UICollectionView *)collectionView 

layout:(UICollectionVi...
UICollectionView can set up cell size SMARTER!
- (CGSize)collectionView:(UICollectionView *)collectionView 

layout:(UICol...
UICollectionView can set up cell size SMARTER!
- (CGSize)collectionView:(UICollectionView *)collectionView 

layout:(UICol...
Demo
Using Dynamic Cells for List View
Anistar Sung

Yahoo Engineering Manager

cfsung@yahoo-inc.com
AppDevKit Yahoo Core Team

Yahoo Engineering Engineers

app-...
Q + A
AppDevKit for iOS Development
Prochain SlideShare
Chargement dans…5
×

AppDevKit for iOS Development

This deck will present AppDevKit that is a iOS development open source project to build your iOS app faster and easier. You will learn what AppDevKit did for iOS developers and leverage it today.

  • Soyez le premier à commenter

AppDevKit for iOS Development

  1. 1. AppDevKit for iOS Development Anistar Sung Yahoo Engineering Manager
  2. 2. Introducing AppDevKit Quick demonstrate for AppDevKit Agenda
  3. 3. Smart Design + Architecture Wanting everything easier
  4. 4. CHALLENGE
  5. 5. AppDevKit https://github.com/yahoo/AppDevKit
  6. 6. Over 100+ features
  7. 7. ListView Color AutoLayout Image Filters Image Analysis What AppDevKit did Cover regular development requirement
  8. 8. Animator Cache Formatter Modal View What AppDevKit did Cover regular development requirement
  9. 9. Quick demonstrate for AppDevKit Introduce few major features
  10. 10. Hard to sync with designer After requirement changing need to rewrite code Change once apply anywhere The pain for changing
  11. 11. Designer: I want red color background. Developer: Sure!
 
 self.backgroundColor = [UIColor redColor]; Challenge on Color Design easy sync tool for designer
  12. 12. Designer: I want #7b19a9 background. Developer: What!? Challenge on Color Design easy sync tool for designer !?
  13. 13. Designer: I want Yahoo background. Developer: Mom, I want go home. :( Challenge on Color Design easy sync tool for designer #@*$!
  14. 14. Using Category to improve UIColor + (UIColor *)ADKColorWithHexString:(NSString *)hexstring;
 + (UIColor *)ADKColorWithHexNumber:(NSUInteger)hexNumber; Challenge on Color Design easy sync tool for designer
  15. 15. 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
  16. 16. + (UIColor *)themeBackground
 {
 return [UIColor ADKColorWithHexString:@"1f2f3b"];
 } + (UIColor *)themePanel
 {
 return [UIColor ADKColorWithHexString:@"333e49"];
 } Change once apply anywhere Theme color management
  17. 17. + (UIColor *)themeBackground
 {
 return [UIColor ADKColorWithHexString:@"dedede"];
 } + (UIColor *)themePanel
 {
 return [UIColor ADKColorWithHexString:@"f4f4f4"];
 } Change once apply anywhere Theme color management
  18. 18. Change once apply anywhere Theme color management
  19. 19. Demo Using UIColor+ADKHexPresentation
  20. 20. Using AutoLayout Easier Solve UI elements alignment problem
  21. 21. Using AutoLayout Easier Solve UI elements alignment problem
  22. 22. Using AutoLayout Easier Solve UI elements alignment problem
  23. 23. Using AutoLayout Easier Solve UI elements alignment problem
  24. 24. Control constraint
 @import “UIView+ADKAutoLayoutSupport.h” 
 [self.presetImageView hideTopConstraint]; [self.presetImageView unhideTopConstraint]; Using AutoLayout Easier Solve UI elements alignment problem
  25. 25. Control constraint
 @import “UIView+AutoLayoutSupport.h” - (void)setConstraintConstant:(CGFloat)constant forAttribute: (NSLayoutAttribute)attribute; Using AutoLayout Easier Solve UI elements alignment problem
  26. 26. Demo Using UIView+ADKAutoLayoutSupport
  27. 27. UIViewController - (void)presentViewController:(UIViewController *)viewControllerToPresent
 animated:(BOOL)flag completion:(void (^)(void))completion Providing Fancy Modal View Customizing your modal effect
  28. 28. @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
  29. 29. Demo Using ADKModalMaskView
  30. 30. ICON should apply theme color Fast materials replacement ICON and assets color
  31. 31. 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
  32. 32. 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
  33. 33. Fast materials replacement ICON theme color management
  34. 34. Demo Using UIImage+ADKImageFilter
  35. 35. Most content can be displayed by list view UICollectionView is a powerful component Easy to present content List view for presentation
  36. 36. Change once apply anywhere Interface change
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. Demo Using Dynamic Cells for List View
  42. 42. Anistar Sung
 Yahoo Engineering Manager
 cfsung@yahoo-inc.com AppDevKit Yahoo Core Team
 Yahoo Engineering Engineers
 app-dev-kit@yahoo-inc.com More information
  43. 43. Q + A

×