界面的搭建

2015-07-28 本文已影响281人 Little_Dragon

对于简单界面用xib直接创建，若觉得设置的图片不符合自己的要求，或者是尺寸不符合要求，可以在代码中进行修改，比如，如下代码

- (void)viewDidLoad {
    [super viewDidLoad];
        // 获取按钮的背景图片
    UIImage *image =  _loginBtn.currentBackgroundImage;
    // 将图片进行拉伸。
    image = [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5];
    // 再将修改后的图片赋值给按钮
    [_loginBtn setBackgroundImage:image forState:UIControlStateNormal];
}

对于一般界面的搭建，
- 一般采用xib/storyboard与纯代码共同搭建。
- 也就可以理解为，
  - 用xib搭建基本页面，
  - 代码进行辅助修改。实现一些效果。
  - 毕竟xib搭建的都是表面的，若想实现一些功能或者动画，以及等等，都需要纯代码进行编写。
比如
- stroyboard搭建具有静态的cell的UItableViewController的控制器。并且完成了没有跳转条件的segue直接能够push其他控制器
- 但还是需要进行代码的优化，让其能够进行更加绚丽的动画
- 需要注意的事，storyboard中创建的cell没有左滑删除功能，只有纯代码根据模型创建的cell才有左滑删除功能（没有太多的验证，需要在进行验证）
- 纯代码实现cell的移动出现（从右边推出）

// 通常这个方法，用来做cell的动画
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 先将其平移至最右边
    cell.transform = CGAffineTransformMakeTranslation(self.view.width, 0);

    [UIView animateWithDuration:0.5 animations:^{
    // 再将所有形变量删除，返回默认状态
        cell.transform = CGAffineTransformIdentity;
    }];
}


// 同样也可以不使用平移，直接移动它的位置也可以
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    cell.center = CGPointMake(self.view.width, 0);

    [UIView animateWithDuration:0.5 animations:^{
        cell.center = CGPointMake(0, 0);
    }];
}

为了让用户有一个良好的体验，所以我们让每次这个界面出现的时候就执行这个动画，所以调用刷新，让每次页面即将出现的时候，来调用刷新，执行动画（每次刷新，都有重新给cell赋值，其尺寸也会重新固定）

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];

    [self.tableView reloadData];
}

对于push进去的控制器，需要进行额外的设置，比如标题，左右按钮的样式。

因为如果使用系统的UIButton来进行设置的话，会造成右边是图片，左边是文字。（设置button时必须应该设置尺寸）
只有通过自定义控件才能让图片和文字调换位置

关于自定义按钮控件
- 思考 button控件中，有图片，和文字，只有将文字的起点x 取代图片的x；并且让图片新位置的x 为文字的最大宽度即可。文字的宽度随文字的多少进行改变。
- 关于按钮的尺寸，可以调用- sizeToFit进行自适应尺寸安排。
- 主要代码实现

// 布局子控件
- (void)layoutSubviews
{
    [super layoutSubviews];


    if (self.titleLabel.x > self.imageView.x) {
        // 交换两个子控件的位置
        self.titleLabel.x = self.imageView.x;

        NSLog(@"titleLabel-%f",self.titleLabel.x);
    // self.imageView.x = self.titleLabel.width;
        self.imageView.x = CGRectGetMaxX(self.titleLabel.frame);
        [self sizeToFit];
        NSLog(@"imageView-%f",self.imageView.x);

    }

}



// 思想：如果以后系统自带的功能不满足需求，就重写这个方法，添加额外的功能，一定要记得还原之前的功能
- (void)setTitle:(NSString *)title forState:(UIControlState)state
{
    [super setTitle:title forState:state];

    [self sizeToFit];
}

- (void)setImage:(UIImage *)image forState:(UIControlState)state
{
    [super setImage:image forState:state];
    [self sizeToFit];
}

底部导航条tabBar的隐藏
- 系统的tabBar的话，在xib/storyboard中创建的控制器的话，直接在右侧栏中的
  
  Snip20150725_13.png
- 如果是纯代码创建的话，直接调用 - hideBottomBarOnPush进行设置就行了。

本次项目中的是利用的自定义tabBar，所以，隐藏系统原有的tabBar是没有作用的。（因为自定义的tabBar，加入到了view当中，是直接占据了原有tabBar的位置。）
- 设想如果将自定义的tabBar，加到系统的tabBar内。那么只要隐藏了系统的tabBar，那么自定义的tabBar也就跟着隐藏了。对于图片超出尺寸问题
  只要删除，taBar内不是自定义的view就行了
- 代码实现

#pragma mark - 自定义tabBar
- (void)setUpTabBar
{


    // 2.添加自己的tabBar
    LXLTabBar *tabBar = [[LXLTabBar alloc] init];

    ...

    tabBar.frame = self.tabBar.bounds;

    [self.tabBar addSubview:tabBar];

}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];

    // 移除系统tabBar上自带的按钮
    for (UIView *childView in self.tabBar.subviews) {
    // 只要不是自定义的tabBar，就给删除
        if (![childView isKindOfClass:[LXLTabBar class]]) {
            [childView removeFromSuperview];
        }

    }
}

关于顶部导航条的返回按钮
- 系统的返回按钮为蓝色的，不太好看。所以需要自己来进行设置。
  - 进行设置navigationItem的leftBarButtonItem 上添加自定义的UIBarButtonItem，进行图片和方法的设定。
  - 由于是多出需要此种定义，所以将其设置在push方法中，只有这样的话，当push进一个控制器的时候，则对该控制器的返回按钮进行修改。
  - 但要注意的是，根控制器也是push进去的，所以需要进行判断，只要不是根控制器，就要进行返回按钮的设置。
  - 但是，如果是自己设置的图片和方法的话，那么就没有了系统的左滑功能。此时如果想保留系统的左滑功能，需要做额外操作。
  - 返回功能一般保存在self.interactivePopGestureRecognizer.delegate;（交互手势的代理）中，如果覆盖了返回按钮，那么就不会有滑动功能。所以需要在控制器加载的时候将交互手势代理保存,可是对于根控制器，不需要滑动，所以将交互手势代理进行赋原值。对于非根控制器，赋值nil，让其能够跳转，不去执行别的操作。只有它为空的时候才能进行滑动操作。

- (void)viewDidLoad {
    [super viewDidLoad];
    // 前提条件，覆盖了系统的返回按钮，就不会有滑动返回功能。

    _popDelegate = self.interactivePopGestureRecognizer.delegate;


    self.delegate = self;

}
// 监听什么时候回到跟控制器
- (void)navigationController:(UINavigationController *)navigationController didShowViewController:(UIViewController *)viewController animated:(BOOL)animated
{
    if (viewController == self.childViewControllers[0]) { // 跟控制器
        self.interactivePopGestureRecognizer.delegate = _popDelegate;
    }else{
        // 实现导航控制器的滑动返回
        self.interactivePopGestureRecognizer.delegate = nil;
    }
    NSLog(@"%@",viewController);
}

- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated
{
    // viewController:栈顶控制器，导航条的内容是由栈顶控制器

    // 设置导航条左边按钮,非根控制器才需要
    if (self.childViewControllers.count != 0) { // 非根控制器

        viewController.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageWithOriginRenderingName:@"NavBack"] style:UIBarButtonItemStyleBordered target:self action:@selector(back)];
    }

    [super pushViewController:viewController animated:animated];
}

- (void)back
{
    [self popViewControllerAnimated:YES];
}

第二种方法
- 将系统的tabBar的主题颜色进行改变,改成想显示的颜色，然后把文字移除屏幕，移到用户看不到的地方。然后不用管系统的任何东西。(只需要在用户没有看到屏幕显示之前调用即可。)因为并没有覆盖系统什么，指示调用了系统的方法，将其文字的显示位置进行了改变。
- 代码实现

+ (void)initialize
{
    if(self == [XMGNavigationController class])
    {...
    // 获取当前类下的导航条
    // self->XMGNavigationController
    UINavigationBar *bar = [UINavigationBar appearanceWhenContainedIn:self, nil];
    // ...
    // 统一设置导航条按钮的颜色
    [bar setTintColor:[UIColor whiteColor]];

    // 获取UIBarButtonItem
    UIBarButtonItem *item = [UIBarButtonItem appearanceWhenContainedIn:self, nil];

    // 设置导航条返回按钮的文字的位置
    [item setBackButtonTitlePositionAdjustment:UIOffsetMake(0, -64) forBarMetrics:UIBarMetricsDefault];
    }

}

界面的搭建

猜你喜欢

热点阅读