NoMark在iOS界面开发中的应用之一-登录界面

先看一下最终效果

最终效果

准备

下载NoMark
素材PSD下载 密码:hp5g
用NoMark打开Register.psd

1. 背景

背景是一个从上到下的渐变，那么可以取上下的颜色，在app里做出渐变。也可以用一个渐变的图片做出拉伸，这里选择第一种方法。从NoMark界面上部点击取色

取色

取色后会自动保存到剪贴板，也可再次点击吸管显示颜色历史

颜色历史

拿到两个颜色后可以做出渐变：

- (void)viewDidLoad {
  [super viewDidLoad];

  CAGradientLayer *gradient = [CAGradientLayer layer];

  gradient.frame = self.view.bounds;
  gradient.colors = @[
    (id)[UIColor colorWithHex:0x503A5B].CGColor,
    (id)[UIColor colorWithHex:0x1D1D1D].CGColor
  ];

  [self.view.layer insertSublayer:gradient atIndex:0];
}

背景色效果.png

2. 导出图标到Xcode

由于我们要导出图标给iOS用，根据实际情况选择适当缩放：

缩放

再打开设置，去掉@1x：

导出设置

在NoMark中选中要导出的图标，然后拖动这个

拖放

拖到Xcode的 Assets.xcassets

如果操作无误，Assets.xcassets类似于这样：

导出结果

注意，有些图标是好几层构成的，比如下方的那些按钮

多层图标

在NoMark中 右键弹出菜单，可以选择

多层选择.png

导出结果2.png

选中输入框，显示326pt * 56.5pt

输入框

这时候就要灵活处理了，由于不同屏幕的宽度并不一样，而输入框几乎辅满屏幕，所以不适合使用固定宽度。

保持输入框选中，鼠标移动到外面：

距离.png

这里，我使用高度固定56.5pt，左右距离为25pt，在Xcode中创建约束。

Xcode1.png

在NoMark中查看图标与输入框的距离：

user-icon.png

数值和图标都有了，撸代码

  UIImage *image = [UIImage imageNamed:@"username_icon"];
  int const paddingHorizontal = 21.5;
  int const paddingVertical = 15;

  UIView *paddingView = [UIView new];
  paddingView.frame = CGRectMake(0, 0, image.size.width + paddingHorizontal * 2,
                                 image.size.height + paddingVertical * 2);
  UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
  imageView.frame = CGRectMake(paddingHorizontal, paddingVertical,
                               image.size.width, image.size.height);
    [paddingView addSubview:imageView];
  self.userTextField.backgroundColor =
      [UIColor colorWithHex:0x4D4253]; // 使用取色功能拿到背景色
  self.userTextField.leftView = paddingView;
  self.userTextField.leftViewMode = UITextFieldViewModeAlways;

输入框效果.png

看上去还差字体就完成输入框了，在NoMark中选中输入框中的文本：

输入框字体.png

  self.userTextField.textColor = [UIColor whiteColor];
  self.userTextField.font = [UIFont systemFontOfSize:13];

运行结果

输入框完成.png

是不是很简单？其他操作大同小异，有空我把源码整理一下，发上来。