SlideShare a Scribd company logo
1 of 35
資策會行動開發學院
iPhone/iPad App 設計開發



沈志宗 stronger@mit.com.tw
2012/11/19 iOS 語法基礎



  使用者介面綜觀

• ViewController
• Navigation Controller
• TableView Controller
ViewController
UIViewController 順序
•   - (void)viewDidLoad;
    實例化建立起來,也就是載入記憶體
    只進入一次

•   - (void)viewWillAppear:(BOOL)animated;
    畫面出現前,會進入許多次

•   - (void)viewWillDisappear:(BOOL)animated
    {

•   - (void)viewDidAppear:(BOOL)animated;

•   - (void)viewDidDisappear:(BOOL)animated;

•   - (void)view{Will,Did}LayoutSubviews;
    元件邊框有變化時進入

•   - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)anOrientation
                          duration:(NSTimeInterval)seconds;

•   - (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOriention)orient
                         duration:(NSTimeInterval)seconds;

•   - (void)didRotateFromInterfaceOrientation: (UIInterfaceOrientation)anOrientation;

•   - (void)viewDidUnload
UIView 轉場
針對某個 UIView 進行轉場 (實作 view1Trans)

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration
options:(UIViewAnimationOptions)options animations:(void (^)
(void))animations completion:(void (^)(BOOL finished))completion



由一個 UIView 轉到另一個 UIView (實作 view2Trans)

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView
duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options
completion:(void (^)(BOOL finished))completion



使用 Quartz 2D
Quartz 2D
1.   Targets Build Phase 的 Link Binary 需加入 QuartzCore.framework

2.   需 #import <QuartzCore/QuartzCore.h>

     水波效果
     CATransition *anim = [CATransition animation];
     anim.delegate = self;
     anim.duration = 1.5f;
     anim.type = @"rippleEffect";
     [[ice layer] addAnimation:anim forKey:@"RippleEffect"];

     吸入效果
     CATransition *anim = [CATransition animation];
     anim.delegate = self;
     anim.duration = 1.5f;
     anim.type=@"suckEffect";
     [[ice layer] addAnimation:anim forKey:@"SuckAnim"];
實作練習 1, 2
• 三種 UIView 轉場




• 使用 + (void)transitionWithView 將上次的
  Project UIPickerView 改成滑上/滑下
UIView / UIViewController

UIView 畫面的產生

CGPoint、CGSize、CGRect

CGPointMake(x,y)
CGSizeMake(width,height)
CGRectMake(x,y, width,height)

UIView 方法

- (void)addSubview:(UIView *)view
- (void)removeFromSuperview
- (void)bringSubviewToFront:(UIView *)view

UIViewController 事件的處理

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
實作練習 3 - UIView touches
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event

點選畫面處,放置 Ken 動畫。



新增 Project TouchKen

新增 UIView Class file
實作練習 3 - UIView touches
     Ken.m 實作 initWithPoint:

- (Ken *)initWithPoint:(CGPoint)point
{
    self = [super init];
    if (self) {
        NSArray *imgArray = [[NSArray   alloc] initWithObjects:
                             [UIImage   imageNamed:@"ken1r.png"],
                             [UIImage   imageNamed:@"ken2r.png"],
                             [UIImage   imageNamed:@"ken3r.png"],
                             [UIImage   imageNamed:@"ken4r.png"],
                             [UIImage   imageNamed:@"ken5r.png"],
                             [UIImage   imageNamed:@"ken6r.png"],
                             nil];

       UIImageView *kenImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ken1r.png"]];
       CGSize imageSize = kenImageView.frame.size;

        kenImageView.animationImages = imgArray;
        kenImageView.animationDuration = 0.8;


       //將畫面大小設成與圖片大小相同
       [self setFrame:CGRectMake(point.x, point.y, imageSize.width, imageSize.height)];
       [self addSubview:kenImageView];

        [kenImageView startAnimating];




     接下頁
實作練習 3 - UIView touches
        Ken.m 實作 initWithPoint: (續)

         //設定UILabel
         labelX = [[UILabel alloc] initWithFrame:CGRectMake(imageSize.width+1, 0.0, 20.0, 15.0) ];
         labelY = [[UILabel alloc] initWithFrame:CGRectMake(imageSize.width+1, 16.0, 20.0, 15.0)];

         UIFont *font = [UIFont fontWithName:@"Arial" size:10.0];
         [labelX setFont:font];
         [labelY setFont:font];

         labelX.text = [NSString stringWithFormat:@"%.f", point.x];
         labelY.text = [NSString stringWithFormat:@"%.f", point.y];

          [labelX setBackgroundColor:[UIColor clearColor]];
          [labelY setBackgroundColor:[UIColor clearColor]];

          [self addSubview:labelX];
          [self addSubview:labelY];

          [self setClipsToBounds:NO];

    }

    return self;
}
實作練習 3 - UIView touches
     Ken.m 加上 touch event

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //將被觸碰到鍵移動到所有畫面的最上層
    [[self superview] bringSubviewToFront:self];

    CGPoint point = [[touches anyObject] locationInView:self];
    location = point;
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    CGPoint point = [[touches anyObject] locationInView:self];
    CGRect frame = self.frame;

    frame.origin.x += point.x - location.x;
    frame.origin.y += point.y - location.y;
    [self setFrame:frame];

    labelX.text = [NSString stringWithFormat:@"%.f", frame.origin.x];
    labelY.text = [NSString stringWithFormat:@"%.f", frame.origin.y];

}
實作練習 3 - UIView touches
     在 ViewController.m 加上 touch event,放置 Ken Class 進來

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    CGPoint point = [[touches anyObject] locationInView:self.view];
    Ken *ken = [[Ken alloc] initWithPoint:point];
    [self.view addSubview:ken];
}



                                                                       點選此處,
                                                                      就可以放置 Ken



   點選此處,
就可以放置 Ken
Navigation Controller
navigationItem
navigationItem:左邊按鈕、右邊按鈕、標題

按鈕 navigationItem.leftBarButtonItem = UIBarButtonItem

標題 navigationItem.titleView

加上右邊按鈕
UIBarButtonItem *btnAdd = [[UIBarButtonItem alloc] initWithTitle:@"Add"
style:UIBarButtonItemStyleBordered target:self action:nil];

self.navigationItem.rightBarButtonItem = btnAdd;


按鈕安排事件
UIBarButtonItem *btnAdd = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self
action:@selector(insertNewObject:)];
畫面堆疊
navigationController.viewControllers
navigationController.topViewController
navigationController pushViewController:(UIViewController *) animated:(BOOL)
只能載入一般 View

navigationController presentedViewController
可以再載入另一個 UINavigationController

navigationController popViewControllerAnimated
透過 pushViewController 返回上一層

navigationController popToRootViewControllerAnimated
透過 pushViewController 返回最頂層



連接下一層畫面

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
使用 StoryBoard 處理堆疊




實作練習 nav1 - 從範本 Master-Detail Application 開始
使用 StoryBoard 處理堆疊




實作練習 nav1 - 從範本 Master-Detail Application 開始
使用 StoryBoard 處理堆疊




實作練習 nav2 - 從 Single View 開始
使用 StoryBoard 處理堆疊




實作練習 nav2 - 從 Single View 開始
TableView Controller
UITableView

•   以表格式呈現資料的一個很重要類別
    條列式一維表格
    UIScrollView 的 subclass
    可設計 static(靜態固定) 或 dynamic(動態異動資料) 表格
    許多的 dataSource protocol 與 delegate protocol
    可以很有效率呈現大量資料



•   如果要呈現多維資料                             ?
    搭配 UINavigationController 一層層延伸



•   UITableViews 的種類
    Plain 或 Grouped
    Static 或 Dynamic
    有沒有 sections
UITableView
MobileHIG.pdf pp.119-128、Table View Programming Guide for iOS  Table
View Styles and Accessory Views

Style: Plain tables(UITableViewStylePlain) 與 Grouped tables(UITableViewStyleGrouped)
UITableView Plain Style
UITableView Grouped Style
UITableView Sections
table-view elements
Checkmark                                    Indicates that the row is selected

Disclosure indicator                         Displays another table associated with the
下一步指示器                                       row
Detail disclosure button                     Displays additional details about the row
下一步明細                                        in a new view
Row reorder                                  Indicates that the row can be dragged to
                                             another location in the table
Row insert                                   Adds a new row to the table

Delete button control                        In an editing context, reveals and hides the
                                             Delete button for a row
Delete button                                Deletes the row


    Detail disclosure button 取得:
    -(void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:
    (NSIndexPath *)indexPath
UITableViewCellStyle
Default、Subtitle、Value 1、Value 2
實作練習




•   static cell: table 1
    table.pdf pp.9-33

•   dynamic cell: table 2
    table.pdf pp.34-55
UITableViewDataSource
讓 UITableView 要顯示什麼


Configuring a Table View
 – tableView:cellForRowAtIndexPath:  required method
 – numberOfSectionsInTableView:
 – tableView:numberOfRowsInSection:  required method
 – sectionIndexTitlesForTableView:
 – tableView:sectionForSectionIndexTitle:atIndex:
 – tableView:titleForHeaderInSection:
 – tableView:titleForFooterInSection:
Inserting or Deleting Table Rows
 – tableView:commitEditingStyle:forRowAtIndexPath:
 – tableView:canEditRowAtIndexPath:
Reordering Table Rows
 – tableView:canMoveRowAtIndexPath:
 – tableView:moveRowAtIndexPath:toIndexPath:
UITableViewDelegate
讓 UITableView 要如何顯示

Managing Selections
  – tableView:willSelectRowAtIndexPath:
  – tableView:didSelectRowAtIndexPath:
  – tableView:willDeselectRowAtIndexPath:
  – tableView:didDeselectRowAtIndexPath:
Configuring Rows for the Table View
  – tableView:heightForRowAtIndexPath:
  – tableView:indentationLevelForRowAtIndexPath:
  – tableView:willDisplayCell:forRowAtIndexPath:
Modifying the Header and Footer of Sections
  – tableView:viewForHeaderInSection:
  – tableView:viewForFooterInSection:
  – tableView:heightForHeaderInSection:
  – tableView:heightForFooterInSection:
Editing Table Rows
  – tableView:willBeginEditingRowAtIndexPath:
  – tableView:didEndEditingRowAtIndexPath:
  – tableView:editingStyleForRowAtIndexPath:
  – tableView:titleForDeleteConfirmationButtonForRowAtIndexPath:
  – tableView:shouldIndentWhileEditingRowAtIndexPath:
Reordering Table Rows
  – tableView:targetIndexPathForMoveFromRowAtIndexPath:toProposedIndexPath:
Copying and Pasting Row Content
  – tableView:shouldShowMenuForRowAtIndexPath:
  – tableView:canPerformAction:forRowAtIndexPath:withSender:
  – tableView:performAction:forRowAtIndexPath:withSender:
Table View Segue
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
   NSIndexPath *indexPath = [self.tableView indexPathForCell:sender];
   // prepare segue.destinationController to display based on information
   // about my data structure corresponding to indexPath.row in indexPath.section
}




Model 資料如果異動,需要更新 UITableView
- (void)reloadData;

如果資料不多,可以更新特定幾筆
- (void)reloadRowsAtIndexPaths:(NSArray *)indexPaths
          withRowAnimation:(UITableViewRowAnimation)animationStyle;
實作練習
 table 2
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
沈志宗 Stronger Shen (Appletrees)

• http://mit.com.tw
  http://iphone.to

• stronger@mit.com.tw
  shen@iphone.to
  strongershen@gmail.com

More Related Content

What's hot

Modern Android Architecture
Modern Android ArchitectureModern Android Architecture
Modern Android ArchitectureEric Maxwell
 
Effective Android Data Binding
Effective Android Data BindingEffective Android Data Binding
Effective Android Data BindingEric Maxwell
 
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga EscalaArquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga EscalaEduardo Shiota Yasuda
 
Academy PRO: React native - publish
Academy PRO: React native - publishAcademy PRO: React native - publish
Academy PRO: React native - publishBinary Studio
 
Why SOLID matters - even for JavaScript
Why SOLID matters - even for JavaScriptWhy SOLID matters - even for JavaScript
Why SOLID matters - even for JavaScriptmartinlippert
 
Kivy Talk Python Meetup Innsbruck 2017.04.25
Kivy Talk Python Meetup Innsbruck 2017.04.25Kivy Talk Python Meetup Innsbruck 2017.04.25
Kivy Talk Python Meetup Innsbruck 2017.04.25Robert Niederreiter
 
Optimize CollectionView Scrolling
Optimize CollectionView ScrollingOptimize CollectionView Scrolling
Optimize CollectionView ScrollingAndrea Prearo
 
Intro to UIKit • Made by Many
Intro to UIKit • Made by ManyIntro to UIKit • Made by Many
Intro to UIKit • Made by Manykenatmxm
 
Swift Tableview iOS App Development
Swift Tableview iOS App DevelopmentSwift Tableview iOS App Development
Swift Tableview iOS App DevelopmentKetan Raval
 
Smooth scrolling in UITableView and UICollectionView
Smooth scrolling in UITableView and UICollectionViewSmooth scrolling in UITableView and UICollectionView
Smooth scrolling in UITableView and UICollectionViewAndrea Prearo
 

What's hot (13)

Modern Android Architecture
Modern Android ArchitectureModern Android Architecture
Modern Android Architecture
 
Effective Android Data Binding
Effective Android Data BindingEffective Android Data Binding
Effective Android Data Binding
 
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga EscalaArquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga Escala
 
Modular and Event-Driven JavaScript
Modular and Event-Driven JavaScriptModular and Event-Driven JavaScript
Modular and Event-Driven JavaScript
 
Academy PRO: React native - publish
Academy PRO: React native - publishAcademy PRO: React native - publish
Academy PRO: React native - publish
 
Why SOLID matters - even for JavaScript
Why SOLID matters - even for JavaScriptWhy SOLID matters - even for JavaScript
Why SOLID matters - even for JavaScript
 
Android 3
Android 3Android 3
Android 3
 
Kivy Talk Python Meetup Innsbruck 2017.04.25
Kivy Talk Python Meetup Innsbruck 2017.04.25Kivy Talk Python Meetup Innsbruck 2017.04.25
Kivy Talk Python Meetup Innsbruck 2017.04.25
 
Optimize CollectionView Scrolling
Optimize CollectionView ScrollingOptimize CollectionView Scrolling
Optimize CollectionView Scrolling
 
Intro to UIKit • Made by Many
Intro to UIKit • Made by ManyIntro to UIKit • Made by Many
Intro to UIKit • Made by Many
 
Swift Tableview iOS App Development
Swift Tableview iOS App DevelopmentSwift Tableview iOS App Development
Swift Tableview iOS App Development
 
Solid angular
Solid angularSolid angular
Solid angular
 
Smooth scrolling in UITableView and UICollectionView
Smooth scrolling in UITableView and UICollectionViewSmooth scrolling in UITableView and UICollectionView
Smooth scrolling in UITableView and UICollectionView
 

Similar to 004

Leaving Interface Builder Behind
Leaving Interface Builder BehindLeaving Interface Builder Behind
Leaving Interface Builder BehindJohn Wilker
 
CocoaHeads Toulouse - Guillaume Cerquant - UIView
CocoaHeads Toulouse - Guillaume Cerquant - UIViewCocoaHeads Toulouse - Guillaume Cerquant - UIView
CocoaHeads Toulouse - Guillaume Cerquant - UIViewCocoaHeads France
 
Opening iOS App 開發者交流會
Opening iOS App 開發者交流會Opening iOS App 開發者交流會
Opening iOS App 開發者交流會Michael Pan
 
Creating Container View Controllers
Creating Container View ControllersCreating Container View Controllers
Creating Container View ControllersBob McCune
 
Session 15 - Working with Image, Scroll, Collection, Picker, and Web View
Session 15  - Working with Image, Scroll, Collection, Picker, and Web ViewSession 15  - Working with Image, Scroll, Collection, Picker, and Web View
Session 15 - Working with Image, Scroll, Collection, Picker, and Web ViewVu Tran Lam
 
Макс Грибов — Использование SpriteKit в неигровых приложениях
Макс Грибов — Использование SpriteKit в неигровых приложенияхМакс Грибов — Использование SpriteKit в неигровых приложениях
Макс Грибов — Использование SpriteKit в неигровых приложенияхCocoaHeads
 
Standford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCs
Standford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCsStandford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCs
Standford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCs彼得潘 Pan
 
iPhoneOS3.1でのカメラAPIについて
iPhoneOS3.1でのカメラAPIについてiPhoneOS3.1でのカメラAPIについて
iPhoneOS3.1でのカメラAPIについてKyosuke Takayama
 
Model View Intent on Android
Model View Intent on AndroidModel View Intent on Android
Model View Intent on AndroidCody Engel
 
Our Choice:电子书的新交互方式探讨
Our Choice:电子书的新交互方式探讨Our Choice:电子书的新交互方式探讨
Our Choice:电子书的新交互方式探讨foxgem
 
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentMOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentanistar sung
 
QA Fest 2019. Алексей Альтер-Песоцкий. Snapshot testing with native mobile fr...
QA Fest 2019. Алексей Альтер-Песоцкий. Snapshot testing with native mobile fr...QA Fest 2019. Алексей Альтер-Песоцкий. Snapshot testing with native mobile fr...
QA Fest 2019. Алексей Альтер-Песоцкий. Snapshot testing with native mobile fr...QAFest
 
[TECHCON 2019: MOBILE - iOS]5.사용자 경험을 높이는 애니메이션 만들기
[TECHCON 2019: MOBILE - iOS]5.사용자 경험을 높이는 애니메이션 만들기[TECHCON 2019: MOBILE - iOS]5.사용자 경험을 높이는 애니메이션 만들기
[TECHCON 2019: MOBILE - iOS]5.사용자 경험을 높이는 애니메이션 만들기NAVER Engineering
 

Similar to 004 (20)

IOS APPs Revision
IOS APPs RevisionIOS APPs Revision
IOS APPs Revision
 
Leaving Interface Builder Behind
Leaving Interface Builder BehindLeaving Interface Builder Behind
Leaving Interface Builder Behind
 
I os 03
I os 03I os 03
I os 03
 
CocoaHeads Toulouse - Guillaume Cerquant - UIView
CocoaHeads Toulouse - Guillaume Cerquant - UIViewCocoaHeads Toulouse - Guillaume Cerquant - UIView
CocoaHeads Toulouse - Guillaume Cerquant - UIView
 
Opening iOS App 開發者交流會
Opening iOS App 開發者交流會Opening iOS App 開發者交流會
Opening iOS App 開發者交流會
 
Creating Container View Controllers
Creating Container View ControllersCreating Container View Controllers
Creating Container View Controllers
 
Session 15 - Working with Image, Scroll, Collection, Picker, and Web View
Session 15  - Working with Image, Scroll, Collection, Picker, and Web ViewSession 15  - Working with Image, Scroll, Collection, Picker, and Web View
Session 15 - Working with Image, Scroll, Collection, Picker, and Web View
 
Макс Грибов — Использование SpriteKit в неигровых приложениях
Макс Грибов — Использование SpriteKit в неигровых приложенияхМакс Грибов — Использование SpriteKit в неигровых приложениях
Макс Грибов — Использование SpriteKit в неигровых приложениях
 
Standford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCs
Standford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCsStandford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCs
Standford 2015 week4: 1.Protocols and Delegation, Gestures 2. Multiple MVCs
 
iOS Training Session-3
iOS Training Session-3iOS Training Session-3
iOS Training Session-3
 
iPhoneOS3.1でのカメラAPIについて
iPhoneOS3.1でのカメラAPIについてiPhoneOS3.1でのカメラAPIについて
iPhoneOS3.1でのカメラAPIについて
 
I os 04
I os 04I os 04
I os 04
 
iOS: View Controllers
iOS: View ControllersiOS: View Controllers
iOS: View Controllers
 
Model View Intent on Android
Model View Intent on AndroidModel View Intent on Android
Model View Intent on Android
 
Our Choice:电子书的新交互方式探讨
Our Choice:电子书的新交互方式探讨Our Choice:电子书的新交互方式探讨
Our Choice:电子书的新交互方式探讨
 
201104 iphone navigation-based apps
201104 iphone navigation-based apps201104 iphone navigation-based apps
201104 iphone navigation-based apps
 
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentMOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app development
 
IOS Storyboards
IOS StoryboardsIOS Storyboards
IOS Storyboards
 
QA Fest 2019. Алексей Альтер-Песоцкий. Snapshot testing with native mobile fr...
QA Fest 2019. Алексей Альтер-Песоцкий. Snapshot testing with native mobile fr...QA Fest 2019. Алексей Альтер-Песоцкий. Snapshot testing with native mobile fr...
QA Fest 2019. Алексей Альтер-Песоцкий. Snapshot testing with native mobile fr...
 
[TECHCON 2019: MOBILE - iOS]5.사용자 경험을 높이는 애니메이션 만들기
[TECHCON 2019: MOBILE - iOS]5.사용자 경험을 높이는 애니메이션 만들기[TECHCON 2019: MOBILE - iOS]5.사용자 경험을 높이는 애니메이션 만들기
[TECHCON 2019: MOBILE - iOS]5.사용자 경험을 높이는 애니메이션 만들기
 

Recently uploaded

Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfAyushMahapatra5
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...christianmathematics
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...Sapna Thakur
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room servicediscovermytutordmt
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAssociation for Project Management
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3JemimahLaneBuaron
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfsanyamsingh5019
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 

Recently uploaded (20)

Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room service
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 

004

  • 2. 2012/11/19 iOS 語法基礎 使用者介面綜觀 • ViewController • Navigation Controller • TableView Controller
  • 4. UIViewController 順序 • - (void)viewDidLoad; 實例化建立起來,也就是載入記憶體 只進入一次 • - (void)viewWillAppear:(BOOL)animated; 畫面出現前,會進入許多次 • - (void)viewWillDisappear:(BOOL)animated { • - (void)viewDidAppear:(BOOL)animated; • - (void)viewDidDisappear:(BOOL)animated; • - (void)view{Will,Did}LayoutSubviews; 元件邊框有變化時進入 • - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)anOrientation duration:(NSTimeInterval)seconds; • - (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOriention)orient duration:(NSTimeInterval)seconds; • - (void)didRotateFromInterfaceOrientation: (UIInterfaceOrientation)anOrientation; • - (void)viewDidUnload
  • 5. UIView 轉場 針對某個 UIView 進行轉場 (實作 view1Trans) + (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^) (void))animations completion:(void (^)(BOOL finished))completion 由一個 UIView 轉到另一個 UIView (實作 view2Trans) + (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion 使用 Quartz 2D
  • 6. Quartz 2D 1. Targets Build Phase 的 Link Binary 需加入 QuartzCore.framework 2. 需 #import <QuartzCore/QuartzCore.h> 水波效果 CATransition *anim = [CATransition animation]; anim.delegate = self; anim.duration = 1.5f; anim.type = @"rippleEffect"; [[ice layer] addAnimation:anim forKey:@"RippleEffect"]; 吸入效果 CATransition *anim = [CATransition animation]; anim.delegate = self; anim.duration = 1.5f; anim.type=@"suckEffect"; [[ice layer] addAnimation:anim forKey:@"SuckAnim"];
  • 7. 實作練習 1, 2 • 三種 UIView 轉場 • 使用 + (void)transitionWithView 將上次的 Project UIPickerView 改成滑上/滑下
  • 8. UIView / UIViewController UIView 畫面的產生 CGPoint、CGSize、CGRect CGPointMake(x,y) CGSizeMake(width,height) CGRectMake(x,y, width,height) UIView 方法 - (void)addSubview:(UIView *)view - (void)removeFromSuperview - (void)bringSubviewToFront:(UIView *)view UIViewController 事件的處理 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
  • 9. 實作練習 3 - UIView touches - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event 點選畫面處,放置 Ken 動畫。 新增 Project TouchKen 新增 UIView Class file
  • 10. 實作練習 3 - UIView touches Ken.m 實作 initWithPoint: - (Ken *)initWithPoint:(CGPoint)point { self = [super init]; if (self) { NSArray *imgArray = [[NSArray alloc] initWithObjects: [UIImage imageNamed:@"ken1r.png"], [UIImage imageNamed:@"ken2r.png"], [UIImage imageNamed:@"ken3r.png"], [UIImage imageNamed:@"ken4r.png"], [UIImage imageNamed:@"ken5r.png"], [UIImage imageNamed:@"ken6r.png"], nil]; UIImageView *kenImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ken1r.png"]]; CGSize imageSize = kenImageView.frame.size; kenImageView.animationImages = imgArray; kenImageView.animationDuration = 0.8; //將畫面大小設成與圖片大小相同 [self setFrame:CGRectMake(point.x, point.y, imageSize.width, imageSize.height)]; [self addSubview:kenImageView]; [kenImageView startAnimating]; 接下頁
  • 11. 實作練習 3 - UIView touches Ken.m 實作 initWithPoint: (續) //設定UILabel labelX = [[UILabel alloc] initWithFrame:CGRectMake(imageSize.width+1, 0.0, 20.0, 15.0) ]; labelY = [[UILabel alloc] initWithFrame:CGRectMake(imageSize.width+1, 16.0, 20.0, 15.0)]; UIFont *font = [UIFont fontWithName:@"Arial" size:10.0]; [labelX setFont:font]; [labelY setFont:font]; labelX.text = [NSString stringWithFormat:@"%.f", point.x]; labelY.text = [NSString stringWithFormat:@"%.f", point.y]; [labelX setBackgroundColor:[UIColor clearColor]]; [labelY setBackgroundColor:[UIColor clearColor]]; [self addSubview:labelX]; [self addSubview:labelY]; [self setClipsToBounds:NO]; } return self; }
  • 12. 實作練習 3 - UIView touches Ken.m 加上 touch event -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { //將被觸碰到鍵移動到所有畫面的最上層 [[self superview] bringSubviewToFront:self]; CGPoint point = [[touches anyObject] locationInView:self]; location = point; } -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { CGPoint point = [[touches anyObject] locationInView:self]; CGRect frame = self.frame; frame.origin.x += point.x - location.x; frame.origin.y += point.y - location.y; [self setFrame:frame]; labelX.text = [NSString stringWithFormat:@"%.f", frame.origin.x]; labelY.text = [NSString stringWithFormat:@"%.f", frame.origin.y]; }
  • 13. 實作練習 3 - UIView touches 在 ViewController.m 加上 touch event,放置 Ken Class 進來 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { CGPoint point = [[touches anyObject] locationInView:self.view]; Ken *ken = [[Ken alloc] initWithPoint:point]; [self.view addSubview:ken]; } 點選此處, 就可以放置 Ken 點選此處, 就可以放置 Ken
  • 15. navigationItem navigationItem:左邊按鈕、右邊按鈕、標題 按鈕 navigationItem.leftBarButtonItem = UIBarButtonItem 標題 navigationItem.titleView 加上右邊按鈕 UIBarButtonItem *btnAdd = [[UIBarButtonItem alloc] initWithTitle:@"Add" style:UIBarButtonItemStyleBordered target:self action:nil]; self.navigationItem.rightBarButtonItem = btnAdd; 按鈕安排事件 UIBarButtonItem *btnAdd = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(insertNewObject:)];
  • 16. 畫面堆疊 navigationController.viewControllers navigationController.topViewController navigationController pushViewController:(UIViewController *) animated:(BOOL) 只能載入一般 View navigationController presentedViewController 可以再載入另一個 UINavigationController navigationController popViewControllerAnimated 透過 pushViewController 返回上一層 navigationController popToRootViewControllerAnimated 透過 pushViewController 返回最頂層 連接下一層畫面 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
  • 17. 使用 StoryBoard 處理堆疊 實作練習 nav1 - 從範本 Master-Detail Application 開始
  • 18. 使用 StoryBoard 處理堆疊 實作練習 nav1 - 從範本 Master-Detail Application 開始
  • 19. 使用 StoryBoard 處理堆疊 實作練習 nav2 - 從 Single View 開始
  • 20. 使用 StoryBoard 處理堆疊 實作練習 nav2 - 從 Single View 開始
  • 22. UITableView • 以表格式呈現資料的一個很重要類別 條列式一維表格 UIScrollView 的 subclass 可設計 static(靜態固定) 或 dynamic(動態異動資料) 表格 許多的 dataSource protocol 與 delegate protocol 可以很有效率呈現大量資料 • 如果要呈現多維資料 ? 搭配 UINavigationController 一層層延伸 • UITableViews 的種類 Plain 或 Grouped Static 或 Dynamic 有沒有 sections
  • 23. UITableView MobileHIG.pdf pp.119-128、Table View Programming Guide for iOS Table View Styles and Accessory Views Style: Plain tables(UITableViewStylePlain) 與 Grouped tables(UITableViewStyleGrouped)
  • 27. table-view elements Checkmark Indicates that the row is selected Disclosure indicator Displays another table associated with the 下一步指示器 row Detail disclosure button Displays additional details about the row 下一步明細 in a new view Row reorder Indicates that the row can be dragged to another location in the table Row insert Adds a new row to the table Delete button control In an editing context, reveals and hides the Delete button for a row Delete button Deletes the row Detail disclosure button 取得: -(void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath: (NSIndexPath *)indexPath
  • 29. 實作練習 • static cell: table 1 table.pdf pp.9-33 • dynamic cell: table 2 table.pdf pp.34-55
  • 30. UITableViewDataSource 讓 UITableView 要顯示什麼 Configuring a Table View – tableView:cellForRowAtIndexPath:  required method – numberOfSectionsInTableView: – tableView:numberOfRowsInSection:  required method – sectionIndexTitlesForTableView: – tableView:sectionForSectionIndexTitle:atIndex: – tableView:titleForHeaderInSection: – tableView:titleForFooterInSection: Inserting or Deleting Table Rows – tableView:commitEditingStyle:forRowAtIndexPath: – tableView:canEditRowAtIndexPath: Reordering Table Rows – tableView:canMoveRowAtIndexPath: – tableView:moveRowAtIndexPath:toIndexPath:
  • 31. UITableViewDelegate 讓 UITableView 要如何顯示 Managing Selections – tableView:willSelectRowAtIndexPath: – tableView:didSelectRowAtIndexPath: – tableView:willDeselectRowAtIndexPath: – tableView:didDeselectRowAtIndexPath: Configuring Rows for the Table View – tableView:heightForRowAtIndexPath: – tableView:indentationLevelForRowAtIndexPath: – tableView:willDisplayCell:forRowAtIndexPath: Modifying the Header and Footer of Sections – tableView:viewForHeaderInSection: – tableView:viewForFooterInSection: – tableView:heightForHeaderInSection: – tableView:heightForFooterInSection: Editing Table Rows – tableView:willBeginEditingRowAtIndexPath: – tableView:didEndEditingRowAtIndexPath: – tableView:editingStyleForRowAtIndexPath: – tableView:titleForDeleteConfirmationButtonForRowAtIndexPath: – tableView:shouldIndentWhileEditingRowAtIndexPath: Reordering Table Rows – tableView:targetIndexPathForMoveFromRowAtIndexPath:toProposedIndexPath: Copying and Pasting Row Content – tableView:shouldShowMenuForRowAtIndexPath: – tableView:canPerformAction:forRowAtIndexPath:withSender: – tableView:performAction:forRowAtIndexPath:withSender:
  • 32. Table View Segue - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { NSIndexPath *indexPath = [self.tableView indexPathForCell:sender]; // prepare segue.destinationController to display based on information // about my data structure corresponding to indexPath.row in indexPath.section } Model 資料如果異動,需要更新 UITableView - (void)reloadData; 如果資料不多,可以更新特定幾筆 - (void)reloadRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animationStyle;
  • 35. 沈志宗 Stronger Shen (Appletrees) • http://mit.com.tw http://iphone.to • stronger@mit.com.tw shen@iphone.to strongershen@gmail.com

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n