2010年11月27日 星期六

iPhone 開發教學 - 框框圓角、置中和自動調整大小

autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight setCornerRadius


很久沒練習 iPhone 程式,大概有半年吧?剛好無意間看到片斷的程式,就順便記錄一下。


這兩張圖共三個重點:



  • 中間顯示的框框是有圓角的

  • 框框無論 iPhone 擺在哪,都可以置中

  • 無論直看或橫向,框框都會自動地調整填滿


程式碼:


@untitled.h (新增一個 UIViewController)


#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface untitled : UIViewController {
        UIView *_blockerView;
}       
        
@end


@untitled.m


- (void)viewDidLoad {
    [super viewDidLoad];
    CGSize _blockerViewSize = CGSizeMake(250, 450);

    if( UIInterfaceOrientationIsLandscape( [[UIDevice currentDevice] orientation] ) )
        _blockerViewSize = CGSizeMake(450, 250);
        
    _blockerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, _blockerViewSize.width, _blockerViewSize.height)] autorelease];
    _blockerView.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.8];
    _blockerView.center = CGPointMake(self.view.bounds.size.width/2, self.view.bounds.size.height/2);
    _blockerView.clipsToBounds = YES;
    if( [_blockerView.layer respondsToSelector:@selector(setCornerRadius:)] )
        [_blockerView.layer setCornerRadius:10];

    _blockerView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    [self.view addSubview:_blockerView];

}

- (void) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) fromInterfaceOrientation {
    _blockerView.center = CGPointMake(self.view.bounds.size.width / 2, self.view.bounds.size.height / 2);
}


// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return YES;
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}


各項部分:



  • 圓角

    • #import <QuartzCore/QuartzCore.h>

      if( [_blockerView.layer respondsToSelector:@selector(setCornerRadius:)] )
          [_blockerView.layer setCornerRadius:10];



  • 置中

    • _blockerView.center = CGPointMake(self.view.bounds.size.width/2, self.view.bounds.size.height/2);

    • 並且實作兩個對應函數

      • - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation

      • - (void)didRotateFromInterfaceOrientation: (UIInterfaceOrientation) fromInterfaceOrientation





  • 自動調整大小

    • _blockerView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;




此部分常用在呈現 loading 或 waiting 的訊息,此時顯示黑色框框,大部分大小會調整成小型的正方型,不需要自動調整大小的功能,僅需置中即可,但如果需要疊一層圖層避免使用者點選到後面的部分,那就會需要自動調整大小的功能,以符合當下顯示或阻擋的大小。用法就跟在 Web Programming 上,使用 div 圖層顯示資訊或擋住不讓使用者點選到其他功能。


沒有留言:

張貼留言