先看一下最终效果
最终效果
准备
下载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
是不是很简单？其他操作大同小异，有空我把源码整理一下，发上来。
