1.最终效果
一个ViewController，紧挨着导航条有一个View ，右边显示电磁电量，左边显示一些文字吧，呃，如图：
这是横屏状态下的截图，至于竖屏和这个没什么两样。
2.电池电量的图片
3.开始coding
a.首先创建一个View（先不管里面的lable和imageView）
代码如下：
id topGuide =self.topLayoutGuide;
UIView*someView = [UIView new];
[someView setBackgroundColor:[UIColor greenColor]];
[someView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:someView];
NSMutableArray*someArrayOne = [NSMutableArrayarray];
[someArrayOne addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[topGuide][someView(==26)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(someView,topGuide)]];
[someArrayOne addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[someView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(someView)]];
[self.view addConstraints:someArrayOne];
PS:这里说明一点self.topLayoutGuide; 如果ViewController 存在导航条topLayoutGuide就是指的导航条，如果没有导航条就是self.view的顶部（有兴趣的可以将导航条除掉，看看上面的代码效果有什么不同），同时也有self.bottomLayoutGuide这个属性。还有系统会自动帮你适配textLable 和imageView大小，具体根据文字的多少、字体大小，和图片的size有关。
b.开始布局textLabel 和imageView ，接着上面的代码写：
UILabel *lbl = [UILabel new];
[lbl setTranslatesAutoresizingMaskIntoConstraints:NO];
lbl.text=@"123456 G";
[someView addSubview:lbl];
UIImageView *imageView = [UIImageView new];
[imageView setTranslatesAutoresizingMaskIntoConstraints:NO];
[imageView setImage:[UIImage imageNamed:@"battery.png"]];
[someView addSubview:imageView];
NSMutableArray*someArrayTwo = [NSMutableArray array];
[someArrayTwo addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-16-[lbl]-(>=100)-[imageView]-16-|"options:NSLayoutFormatAlignAllCenterY metrics:nil views:NSDictionaryOfVariableBindings(lbl,imageView)]];
[someArrayTwo addObject:[NSLayoutConstraint constraintWithItem:lbl attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:someView attribute:NSLayoutAttributeCenterY multiplier:1constant:0]];
[someView addConstraints:someArrayTwo];
Ps:不知道有没有人对NSLayoutFormatAlignAllCenterY疑惑，其实这句代码就是指定lbl和imageView在垂直方向水平对齐。还有很多类似的变量，多写写就知道什么意思了，如果这个NSLayoutFormatAlignAllCenterY去掉，后面的电磁电量是显示不出来的。
c. 最后 ，给导航条制定个颜色，把someView的绿色背景去掉。