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

On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsMebane Rash
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - Englishneillewis46
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfDr Vijay Vishwakarma
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfSherif Taha
 
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
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxheathfieldcps1
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxAreebaZafar22
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfPoh-Sun Goh
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17Celine George
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structuredhanjurrannsibayan2
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Association for Project Management
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibitjbellavia9
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxDr. Ravikiran H M Gowda
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the ClassroomPooky Knightsmith
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSCeline George
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...pradhanghanshyam7136
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxEsquimalt MFRC
 

Recently uploaded (20)

On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
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
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 

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