我的新書AI 職場超神助手:ChatGPT 與生成式 AI 一鍵搞定工作難題的教材投影片已製作完成
歡迎各位有需要的教師和博碩文化索取教材

上課筆記(五) – UIView操作及繪圖介紹

view介紹

  1. UIWindow是會在一開始便被xcode建立起來,裡面有很多view。
  2. View的操作:
    1. 於上層操作subview: 在supervview裡是用MutableArray的index去管理subView,這index就是tag,tag=0是代表subview自己。
      [self addSubView: view];//新增view
      [self insertSubView: view atIndex:0];//新增view在layer0
      [self insertSubView:view belowSubview:upView];//新增view在upView之下
      [self insertSubView:view aboveSubview:upView];//新增view在upView之上
      [self exchangeSubviewAtIndex:0 withSubviewAtIndex:1];//將第0層的物件和第1層的調換
      UIView view = [self viewWithTag:1];//取出在storyboard中tag為1的物件
    2. 移除自己: [view removeFromSuperview];
    3. 設為隱藏:[view setHidden:YES];
  3. 繪圖資訊相關的包括CGRect和CGSize及CGPoint,可以用NSValue包起來
        //將NSRect放入NSArray中
        NSMutableArray *array = [[NSMutableArray alloc] init];
        NSValue *value;
        CGRect rect = CGRectMake(0, 0, 320, 480);
        value = [NSValue valueWithBytes:&rect objCType:@encode(CGRect)];
        [array addObject:value];
        NSLog(@"array:%@",array);
    
        //從Array中提取
        value = [array objectAtIndex:0];
        [value getValue:&rect];
        NSLog(@"value:%@",value);
  4. view有兩個用來描述其資訊的rect:framebounds
    這個網頁有說明這兩者的不同:http://n11studio.blogspot.tw/2012/06/frame-bounds.html
    值得一題的是這兩者的定位點不同,bounds是在畫面的中心,frame則是在左上角。

    1. Frame:Frame指定了View相對於其父View座標系的位置和大小,用在想要加入一個新產生的view時。
    2. Bounds:Bounds則是view相對於自身坐標系的位置和大小,bounds的起點通常都是(0,0)。處理事件或要畫內部的元件時使用。
    3. Center:顧名思義就是view的Frame的中心。
  5. 要注意,在viewDidLoad裡取得的frame和viewWillAppear裡的並不一樣,在viewWillAppear裡時的x及y坐標位置才會被移到正確位置。
  6. 元件自動縮放:imageView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
  7. UIView的各個函數呼叫時間(請見此),以下說明幾個我曾用過的:
    1. setNeedsDisplay:讓uiview重新執行drawRect
    2. setNeedsLayout:重新計算view layout的大小
    3. layoutSubviews:需要調整subview的大小時呼叫(詳細解說
    4. 其他view相關處理事件
      – didAddSubview:
      – willRemoveSubview:
      – willMoveToSuperview:
      – didMoveToSuperview
      – willMoveToWindow:
      – didMoveToWindow
    5. view的動畫處理相關
      + animateWithDuration:delay:options:animations:completion:
      + animateWithDuration:animations:completion:
      + animateWithDuration:animations:
      + transitionWithView:duration:options:animations:completion:
      + transitionFromView:toView:duration:options:completion:

Drawing介紹

    1. 每次繪圖都需要取出繪圖物件:CGContextRef ctx = UIGraphicsGetCurrentContext();
    2. 畫三角型範例:
      - (void)drawRect:(CGRect)rect
          CGContextRef context = UIGraphicsGetCurrentContext();
          [[UIColor whiteColor] set];
          UIRectFill([self bounds]);
          CGContextBeginPath(context);
          CGContextMoveToPoint(context, 50, 50);
          CGContextAddLineToPoint(context, 50, 150);
          CGContextAddLineToPoint(context, 150, 50);
          CGContextClosePath(context);
      
          [[UIColor blueColor] setFill];
          [[UIColor blackColor] setStroke];
          CGContextDrawPath(context, kCGPathEOFillStroke);
      }
    3. 畫圓型範例:
      - (void)drawRect:(CGRect)rect
      {
          CGContextRef ctx = UIGraphicsGetCurrentContext();
          CGContextAddEllipseInRect(ctx, rect);
          CGContextSetFillColor(ctx, CGColorGetComponents([[UIColor blueColor] CGColor]));
          CGContextFillPath(ctx);
      
      }

 


17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。

如果你認同我或想支持我的努力,歡迎請我喝一杯咖啡!讓我更有動力分享知識!