【iOS】UITabBar

 

• 屬於 Bar  的有
  - Navigation bars
  - Toolbars
  - Tabbars
• Style/Image 可透過
  

  - (id)initWithTitle:(NSString *)title image:(UIImage *)image tag:(NSInteger)tag; - (id)initWithTabBarSystemItem:(UITabBarSystemItem)systemItem tag:(NSInteger)tag;

• Style
  

  typedef enum {     UITabBarSystemItemMore,     UITabBarSystemItemFavorites,     UITabBarSystemItemFeatured,     UITabBarSystemItemTopRated,     UITabBarSystemItemRecents,     UITabBarSystemItemContacts,     UITabBarSystemItemHistory,     UITabBarSystemItemBookmarks,     UITabBarSystemItemSearch,     UITabBarSystemItemDownloads,     UITabBarSystemItemMostRecent,     UITabBarSystemItemMostViewed, } UITabBarSystemItem;

• TabBar icon 大小
  32 x 32 png 背景為透明。
• TabBar icon 作圖，參考
  How to Draw Pixel-Perfect iPhone Toolbar Icons
  Generating icons for iPhone UITabBar
  tabbaritem的png無法顯示
• 顯示圖片設定，實際顯示的圖片會便
  

  UIImage* aImage = [UIImage imageNamed:@"favorites.png"]; [self.tabBarItem setImage:aImage];

• 內建直接設定 badge，後面帶入 NSString
  

  [self.tabBarItem setBadgeValue:@"100"];

• 承上面兩項，實際顯示的圖形會被系統再處理一次
  

  原本	被選取時	沒被選取時
  32 x 32

【iOS】UIGestureRecognizer

有兩種方式 (TBD)

• UIResponder的四種方法，可以讓使用者自行設計手勢
  - (void)touch esBegan:(NSSet *)touches withEvent:(UIEvent *)event
  - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
  - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
  - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
   
• UIGestureRecognizer的方式，不用再自己一個一個去設計/解析，目前有6種
  - UILongPressGestureRecognizer
  - UIPanGestureRecognizer
  - UIPinchGestureRecognizer
  - UIRotationGestureRecognizer
  - UISwipeGestureRecognizer
  - UITapGestureRecognizer
  
• 第一種方式的用法
  參考 iOS: how do you get the touchesBegan coordinates when a UIButton is triggered? 
  

  UIButton *mouse = [UIButton buttonWithType:UIButtonTypeCustom]; [mouse setFrame:CGRectMake(90.0f, 55.0f, 118.0f, 118.0f)]; [mouse setBackgroundImage:[UIImage imageNamed:@"mouse.png"] forState:UIControlStateNormal]; [mouse setTitle:@"Mouse" forState:UIControlStateNormal]; [mouse.titleLabel setFont:[UIFont fontWithName:@"Arial-BoldMT" size:20]]; [mouse setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; [mouse addTarget: self action: @selector(mouseClick:) forControlEvents: UIControlEventTouchDown]; [parent addSubview:mouse]; [mouse addTarget:self action:@selector(touchesBegan:withEvent:)  forControlEvents: UIControlEventTouchDown]; [mouse addTarget:self action:@selector(touchesMoved:withEvent:) forControlEvents: UIControlEventTouchDragInside]; [mouse addTarget:self action:@selector(touchesEnded:withEvent:)  forControlEvents: UIControlEventTouchUpInside | UIControlEventTouchUpOutside]; -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {     NSLog(@"touchesBegan");     UITouch *touch = [[event allTouches] anyObject];     CGPoint touchPoint = [touch locationInView:parent];     NSLog(@"Touch x : %f y : %f", touchPoint.x, touchPoint.y); } -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {     NSLog(@"touchesMoved");     UITouch *touch = [[event allTouches] anyObject];     CGPoint touchPoint = [touch locationInView:parent];     NSLog(@"Touch x : %f y : %f", touchPoint.x, touchPoint.y);     mouse.center = CGPointMake(touchPoint.x,touchPoint.y); } -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {     NSLog(@"touchesEnded");     UITouch *touch = [[event allTouches] anyObject];     CGPoint touchPoint = [touch locationInView:parent];     NSLog(@"Touch x : %f y : %f", touchPoint.x, touchPoint.y); }

【iOS】UIScrollView

（tbd)

• 組成要素
  - ContentSize
• 搭配 UIPageControl 使用
  -  換頁

【iOS】NSTimer

在使用時可以先包一層比較方便

【iOS】NSArray/NSMutableArray

 

• NSMutableArray新增
  addObject
• NSMutableArray 移除
  removeObject/removeObjectAtIndex
• 排序
  （tbd)
• 二維陣列用兩個 NSArray/NSMutableArray 來組成，參考
  http://stackoverflow.com/questions/3261329/how-to-create-a-2d-nsarray-or-nsmutablearray-in-objective-c
  http://stackoverflow.com/questions/2583710/how-to-simplify-my-code-2d-nsarray-in-objective-c
• 承上，也可以用 NSArray/NSMutableArray 搭配 NSDictionary/NSMutableDictionary 來組成。

【iOS】UILabel

UILabel

• 初始化
  UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 200, 100)];
• 指定顯示內容
  [label setText:@"Default Gamepad"];
• 字體指定與大小指定
  [label setFont:[UIFont fontWithName:@"Arial-BoldMT" size:17]];
  
• 字體顏色
  [label setTextColor:[UIColor lightTextColor]];
• 字體背景顏色
  [label setBackgroundColor:[UIColor clearColor]];
• 排版設定
  [label setTextAlignment:UITextAlignmentCenter];
• Alpha值
  [label setAlpha:0.9f];

【iOS】AQGridView

雖然有 UITableView，但也只能將資料一一橫向顯示，如果要顯示Grid狀的資料，就需要透過第三方元件。

參考 https://github.com/AlanQuatermain/AQGridView

【iOS】UIButton

幾個重點 （tbd)

• Button類型
  

  typedef enum {    UIButtonTypeCustom = 0,    UIButtonTypeRoundedRect,    UIButtonTypeDetailDisclosure,    UIButtonTypeInfoLight,    UIButtonTypeInfoDark,    UIButtonTypeContactAdd, } UIButtonType;

• 注意採用 buttonWithType 的情況，
  － 宣告時有 alloc 的話，需要手動relase，例如
  

  button = [[UIButton alloc] init];

  － 若採用buttonWithType沒有使用alloc 的話，就不需要手動 release，否則在release時會crash。
  

  UIButton *button = [[UIButton buttonWithType:UIButtonTypeCustom]retain];

• Selected 需要自行更改
  - 設定圖片
  

  [button setBackgroundImage:someImage forState:UIControlStateSelected];

  - 自行更改 status，就可以江圖片顯示出來。
  

  self.checkInButton.selected = YES;

• 基本用法
  

  UIButton *mouse = [UIButton buttonWithType:UIButtonTypeCustom]; [mouse setFrame:CGRectMake(90.0f, 55.0f, 118.0f, 118.0f)]; [mouse setBackgroundImage:[UIImage imageNamed:@"image.png"] forState:UIControlStateNormal]; [mouse setTitle:@"Mouse" forState:UIControlStateNormal]; [mouse.titleLabel setFont:[UIFont fontWithName:@"Arial-BoldMT" size:20]]; [mouse setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; [mouse addTarget: self action: @selector(mouseClick:) forControlEvents: UIControlEventTouchDown]; [parent addSubview:mouse];

• 漸層UIButton需要以UIButton 擴展的第三方元件，或由美工直接做出底圖。
  參考 Custom UIButton without using any images
• Radio Buttons，
  - 參考 iPhone UIButton tutorial: Radio Buttons
  - 直接改圖
  Radio ON http://findicons.com/icon/118309/ui_radio_button?id=122817
  Radio OFF http://findicons.com/icon/118712/ui_radio_button_uncheck?id=118712
  - 使用 UISegmentedControl
• CustomBadge
  參考 CustomBadge 或 Three320/TTButton 也有範例。
  
  問題
  可以用 UISegmentedControl 做出漸層的按鈕，但不知如何 binding 事件
  http://charles.lescampeurs.org/2011/02/10/tint-color-uibutton-and-uibarbuttonitem

【iOS】UIPopoverController

UIPopoverController

• 不要箭頭，將 permittedArrowDirections 設成 0

  [self.popoverController presentPopoverFromBarButtonItem:anItem                                   permittedArrowDirections:0                                                 animated:YES];

【iOS】UIView

UIView 兩三事。

• 使用 hex 設成特殊色背景，可先用 Digital Color 測量器，取色後將值填入 UIColorFromRGB  

  #define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0] [profileListPanel setBackgroundColor:UIColorFromRGB(0xDDDFE4)];

• 製作圓角 UIView

  [aView setAlpha:0.9f]; [[aView layer] setBorderWidth:4.0f]; [[aView layer] setBorderColor:[UIColor clearColor].CGColor]; [[aView layer] setMasksToBounds:YES]; [[aView layer] setBackgroundColor:[UIColor clearColor].CGColor]; [[aView layer] setCornerRadius:10.0f];

• 對齊方式共有
  - UIViewAutoresizingNone
  - UIViewAutoresizingFlexibleWidth
  - UIViewAutoresizingFlexibleHeight
  - UIViewAutoresizingFlexibleTopMargin
  - UIViewAutoresizingFlexibleBottomMargin
  - UIViewAutoresizingFlexibleLeftMargin
  - UIViewAutoresizingFlexibleRightMargin
• 有將視窗顯示出類似 UIPopoverController/UIToolBar 的需求(Framed Table)，但一些邊框顏色有些許不同時， 中間也需自己調整高度的話，可以切成三張圖，分別利用三個UIImageView 來貼出背景圖。
  - dialogbox_bg_top (類似UIPopoverController 上半部，大小為 484x78)
  - dialogbox_bg_center ( 類似UIPopoverController 中間部 484x1 ，高度為 1 讓它可自行延展)
  - dialogbox_bg_end (類似UIPopoverController 下半部 484x78)

  UIImageView *imageViewTop = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"dialogbox_bg_top.png"]]; imageViewTop.frame = CGRectMake(0.0f, 0.0f, 484.0f, 78.0f); [aView addSubview: imageViewTop]; [aView bringSubviewToFront:imageViewTop]; [imageViewTop release]; imageViewTop = nil; UIImageView *imageViewCenter = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"dialogbox_bg_center.png"]]; if (profilePurchased) { imageViewCenter.frame = CGRectMake(0.0f, 78.0f, 484.0f, WITHOUT_SOME_LAYOUT - (78.0f*2)); }else { imageViewCenter.frame = CGRectMake(0.0f, 78.0f, 484.0f, 648.0f-78.0f*2); } [aView addSubview: imageViewCenter]; [aView bringSubviewToFront:imageViewCenter]; [imageViewCenter release]; imageViewCenter = nil; UIImageView *imageViewEnd = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"dialogbox_bg_end.png"]]; if (profilePurchased) { imageViewEnd.frame = CGRectMake(0.0f, WITHOUT_SOME_LAYOUT - 78.0f, 484.0f, 78.0f); }else { imageViewEnd.frame = CGRectMake(0.0f, 648.0f - 78.0f, 484.0f, 78.0f); }    [aView addSubview: imageViewEnd]; [aView bringSubviewToFront:imageViewEnd]; [imageViewEnd release]; imageViewEnd = nil;

• 承上，這樣的話原本是在UIToolBar/UIBarButtonItem的就要自行貼入所需要的UIButton。範例如下

  UIImage *btnCancelImg = [UIImage imageNamed:@"dialog_btn_bg_black.png"]; UIButton *btnCancel = [UIButton buttonWithType:UIButtonTypeCustom]; [btnCancel setAlpha:0.9f]; [btnCancel setFrame:CGRectMake(12.0, 6.0, 50.0, 29.0)]; [btnCancel setBackgroundImage:btnCancelImg forState:UIControlStateNormal]; [btnCancel setTitle:@"Cancel" forState:UIControlStateNormal]; [btnCancel.titleLabel setFont:[UIFont fontWithName:@"Arial-BoldMT" size:12]]; [btnCancel setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; [btnCancel addTarget: self action: @selector(doCancel:) forControlEvents: UIControlEventTouchDown]; [aView addSubview:btnCancel];

• 原本的顯示文字也要自行貼入，範例如下

  UILabel *aLabel = [[UILabel alloc]initWithFrame:CGRectMake(160.0f, 10.0f, 200.0f, 20.0f)]; aLabel.text = @"Game Pad Rack"; aLabel.textColor = [UIColor whiteColor]; [aLabel setFont:[UIFont fontWithName:@"Arial-BoldMT" size:20.0f]]; aLabel.backgroundColor = [UIColor clearColor]; aLabel.font = [UIFont boldSystemFontOfSize:20.0f]; [aLabel setBackgroundColor:[UIColor clearColor]]; [aView addSubview:labGamePadRack]; [aLabel release];

• removeFromSuperview/
• viewWithTag
• 遞迴處理所有子視圖的方式

  for (UIView *subview in [aView subviews]) { }

【iOS】UITableView

UITableView 兩三事 （未完）

• 指定 Data Source
  (tbd)
• Handle
  - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView.
  - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section.
  - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
  - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
• TableView 風格
  - UITableViewStyleGrouped
• UITableViewCell 風格
  - UITableViewCellStyleDefault
  - UITableViewCellStyleValue1
  - UITableViewCellStyleValue2
  - UITableViewCellStyleSubtitle
• 建議 在 cellForRowAtIndexPath 中指定 cell reuse ，附帶一提 雖然指定為UITableViewCellStyleDefault 但也可以將附帶元件放到指定的座標，下面提供範例
  

  static NSString *reuseCellName= @"reuseCellName"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseCellName]; if (cell == nil) { cell = [[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseCellName] autorelease]; }

• 依序取出 NSMutableDictionary 裡面內容
  通常會把資料存在 NSMutableArray/NSArray 透過 indexPath.row 順序抓出，不過有可能會把資料存在 NSMutableDictionary/NSDictionary 這樣抓資料的話要透過

  NSUInteger row = [indexPath row]; NSArray *keys = [fileFromDictionary allKeys]; id key = [keys objectAtIndex:row]; NSString *filename = [fileFromDictionary objectForKey:key];

• 在 xcode4 指定圖示的方式要透過 UIImageView，不建議再用 cell.image

  UIImageView *imageView = [[UIImageView alloc]  initWithImage:[UIImage imageNamed:@"dialog_btn_bg_blue.png"]]; imageView.contentMode = UIViewContentModeScaleAspectFit; [cell.imageView setImage:imageView.image];

• 系統已內建將顯示圖示改為圓角的功能

  cell.imageView.layer.masksToBounds = YES; cell.imageView.layer.cornerRadius = 8.0;

• cell.textLabel.text 中指定文字和圖形距離，如果不事差太遠的話，前面加空白是個簡單的作法
  

  // keep distance from image  cell.textLabel.text = @"   Gamepad profile name";

  
  較為正式的作法請參考 法一 法二
• 在 UITableViewCellStyleDefault 但也可以將附帶元件放到指定的位置，只要將做出來的元件加到 cell.contentView ，附帶一提 以下的 UIBButton 使用使用者自定底色

  // Button UIImage *buttonImg = [UIImage imageNamed:@"dialog_btn_bg_blue.png"]; UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; [button setFrame:CGRectMake(6 + 98 + 281, 22.0f, 50.0f, 29.0f)]; [button setBackgroundImage:buttonImg forState:UIControlStateNormal]; [button setTitle:@"Load" forState:UIControlStateNormal]; [button.titleLabel setFont:[UIFont fontWithName:@"Arial-BoldMT" size:12]]; [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; [button addTarget: self action: @selector(doSomething:) forControlEvents: UIControlEventTouchDown]; [button setTag: indexPath.row]; [cell.contentView addSubview: button]; [cell.contentView bringSubviewToFront:button]; [buttonImg release];

• 去除邊框
  separatorColor=[UIColor clearColor];
  http://blog.csdn.net/zhouhuishine/article/details/5715556
• 讓選定的項目不要有特殊顏色

  cell.selectionStyle = UITableViewCellSelectionStyleNone;

• 當 didSelectRowAtIndexPath 卻要更改其他的 cell

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {  UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];     cell.detailTextLabel.text = @"更改";     NSIndexPath *tempIndex = [NSIndexPath indexPathForRow:1 inSection:1];     UITableViewCell *tempCell = [tableView cellForRowAtIndexPath:tempIndex];     tempCell.detailTextLabel.text = @"連動";     [cell setNeedsLayout]; }

• Table/Cell refresh
  - Table: [tableView reloadData];
  - Cell: [cell setNeedsLayout];
• TDBadgedCell
  https://github.com/tmdvs/TDBadgedCell/wiki/using-the-class

【Mac】Free Ruler

Free Screen Ruler http://www.pascal.com/software/freeruler/

簡單的螢幕量取工具。當 GUI/UX 忘記標註設計圖尺寸時，可用此工具簡單量測。

備註：

• 更改長度 先點選要改的是垂直或水平尺規 Free Ruler /Ruler /Chang Ruler Length
• 更改單位 Free Ruler/Units/Pixels…
• 如果刻度看不太清楚，可使用 Control+滑鼠中鍵往上放大螢幕大小。

【Mac】MarsEdit

▲ MarsEdit 編輯視窗

Windows Live Writer 是一套非常棒的離線部落格文章編輯器。但目前新版（Windows Live Writer 2011）的已不支援 XP。 舊版的有支援 XP的 目前下載後已不給安裝，只好開始搜尋另一套部落格編輯器。

MarsEdit是在Mac下的一套部落格文章編輯器，提供和 Windows Live Writer 類似的功能。
以下一些使用上的筆記，

- 更改系統圖片大小與上傳預設路徑

• 在上傳部落格文章的時候，預設會將圖片放到 Picasa 的 MarsEdit Images 之下，若要更改預設路徑我採用以下方式。
• 使用 SimpleCap 抓圖後，將 SimpleCap 存圖路徑 ln 到 /Users/$userName/Pictures/SimpCap 之下讓 Media Manager 可以找到。
  (ex. ln -s ~/Desktop/SimpleCap\ Images/ SimpCap)
• 打開 Media Manager （可直接點選上圖主視窗的 Media icon）匯入圖片，若無看到圖片，請記得在圖片資料夾上點右鍵選 reload。
• 若需更改圖片大小，請記得先將圖片大小改好，如 Width 為 400，而 Height 系統會自行調整。
• 同時記得將右邊 Section 改成 Windows Live Writer，之後點選 Insert 按鈕。
  
• 之後文章內上傳的圖片就會放到 Windows Live Writer 底下，

- 圖片處理與馬賽克工具，我原本是用 PicPick ，在 Mac 底下可能要再找看看了。

- 在 Mac 底下有另一套 ecto ，改天再試看看。

- 此文章以 MarsEdit 編輯。

【Mac】EditiX

EditiX Free XML Editor 是一套跨平台的xml editor，相對於也是跨平台的 XMLmind XML Editor ，個人比較喜歡 editiX 。

【Mac】ecto

ecto 的使用介面感覺非常人性化，可惜好像只能將圖片上傳到 Flickr。不支援 Picasa。

【Mac】Flycut (Clipboard manager)

原本用的 Clipboard History 變成要收費 (USD $4.99) 後，開始尋找替代的軟體。目前先用 Flycut 看看。
安裝的話直接使用 App Store 即可。