【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"];
  • 承上面兩項,實際顯示的圖形會被系統再處理一次
    原本 被選取時 沒被選取時
    image
    32 x 32
    image image

【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
  • 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 忘記標註設計圖尺寸時,可用此工具簡單量測。

image

備註:

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

【Mac】MarsEdit


110804 0002
▲ MarsEdit 編輯視窗

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

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 按鈕。
    110804 0005
  • 之後文章內上傳的圖片就會放到 Windows Live Writer 底下,

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

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

- 此文章以 MarsEdit 編輯。

【Mac】EditiX


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

110805 0002

【Mac】ecto


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

110804 0007

【Mac】Flycut (Clipboard manager)


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

 

Ed32. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com