iphone开发中九宫格的界面布局的实现

 

原地址http://www.cnblogs.com/lovecode/articles/2239231.html

 

九宫格是一种比较古老的设计，它最基本的表现其实就像是一个三行三列的表格。如何在iPhone中实现类似下图九宫格的效果呢？

 

核心就这2个方法:

//Power by ieliwb.com
- (void)viewDidLoad {
   [super viewDidLoad];

   NSArray *imageNames = [NSArray arrayWithObjects:
                                      @"ico_mobile.png",
                                      @"ico_idcard.png",
                                      @"ico_postcode.png",
                                      @"ico_flight.png",
                                      @"ico_translate.png",
                                      @"ico_phone.png",
                                      @"ico_car.png",
                                      @"ico_health.png",
                                      @"ico_bjxm.png", nil];
   UIButton *Btn;
   for(int i=0; i<9; i++) {
       CGRect frame;
       Btn = [[UIButton buttonWithType:UIButtonTypeCustom] retain];
       [Btn setImage:[UIImage imageNamed:[imageNames objectAtIndex:i]] forState:UIControlStateNormal]; //设置按钮图片
      Btn.tag = i;

        frame.size.width = 59;
        frame.size.height = 75;
        frame.origin.x = (i % 3)*(59+32)+40;
        frame.origin.y = floor(i / 3)*(75+24)+40;
        [Btn setFrame:frame];

        [Btn setBackgroundColor:[UIColor clearColor]];
        [Btn addTarget:self action:@selector(btnPressed:) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview:Btn];
        [Btn release];
   }
}

//响应按钮事件
- (void)btnPressed:(id)sender {
   UIButton *Btn = (UIButton *)sender;
   int index = Btn.tag;
   swith(index) {
       case 0:
              if(mobileController == nil)
                     mobileController = [[MobileController alloc] init];
              [self.navigationController pushViewController:mobileController animated:YES];
              break;
        //其他几个控制器类似
   }
}

九宫格背景修改可以这样实现：

 1 - (void)loadView {
 2    UIImageView *contentView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
 3 
 4    [contentView setImage:[UIImage imageNamed:@"subview_9_bg.png"]];
 5 
 6    [contentView setUserInteractionEnabled:YES];
 7 
 8    self.view = contentView;
 9 
10    [contentView release];
11 }

UINavigationBar背景图片可以这样实现:

1 @implementation UINavigationBar (CustomImage)
2 - (void)drawRect:(CGRect)rect {
3     UIImage *image = [UIImage imageNamed: @"top_bg.png"];
4     [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
5 }
6 @end

底部TabBar栏的风格与实现的代码片段：

1     CGRect frame = CGRectMake(0.0, 0.0, 320.0, 49.0);
2     UIView *v = [[UIView alloc] initWithFrame:frame];
3     UIImage *img = [UIImage imageNamed:@"tabbar.png"];
4     UIColor *c  = [[UIColor alloc] initWithPatternImage:img];
5     v.backgroundColor = c;
6     [m_TabBar.tabBar insertSubview:v atIndex:0];
7     m_TabBar.tabBar.opaque  =YES;
8     [c release];
9     [v release];