效果图如下:

实现思路

整体可以看做为一个大的UIStackView(排列方式水平)包括一个子UIStackView(排列方式垂直),其中左边包括一个图片,右边的UIStackView中可以看做包括三个小控件,其中一个imageView控件,两个label控件

实现代码如下(供参考):

//

//  ViewController.m

//  UIStackView

//

//  Created by 陈高健 on 16/1/29.

//  Copyright © 2016年 陈高健. All rights reserved.

//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    //创建整体UIStackView

    UIStackView *stackView = [[UIStackView alloc]initWithFrame:CGRectMake(50, 50, 200, 50)];

    //排列方式 水平排列

    stackView.axis = UILayoutConstraintAxisHorizontal;

    //设置间隔为10

    stackView.spacing = 10;

    //添加到View上

    [self.view addSubview:stackView];

    //创建左侧StackView上的图片

    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 50, 50)];

    //设置颜色

    imageView.backgroundColor = [UIColor redColor];

    //设置图片

    imageView.image = [UIImage imageNamed:@"image1"];

    //把子控件依组的形式添加进来

    [stackView addArrangedSubview:imageView];

    //创建子StackView

    UIStackView *stackViewSub = [[UIStackView alloc]initWithFrame:CGRectMake(0, 0, 150, 50)];

    //排列方式 垂直排列

    stackViewSub.axis = UILayoutConstraintAxisVertical;

    //对齐方式 顶部对齐

    stackViewSub.alignment = UIStackViewAlignmentLeading;

    //创建右侧StackView上第一个图片控件

    UIImageView *imageView2 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 38, 10)];

    //设置颜色

    imageView2.backgroundColor = [UIColor greenColor];

    //设置图片

    imageView2.image = [UIImage imageNamed:@"image2"];

    //创建第一个label控件

    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 38, 10)];

    //设置文本内容

    label.text = @"人均 18 $";

    //设置字体大小

    label.font = [UIFont systemFontOfSize:12];

    //创建第二个label控件

    UILabel *label2 = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 150, 10)];

    //设置文本内容

    label2.text = @"口味21 环境 21 价格 18 $";

    //设置字体大小

    label2.font = [UIFont systemFontOfSize:10];

    //将图片控件添加到子StackView中

    [stackViewSub addArrangedSubview:imageView2];

    //将第一个label添加到StackView中

    [stackViewSub addArrangedSubview:label];

    //将第二个label添加到StackView中

    [stackViewSub addArrangedSubview:label2];

    //将子StackView添加到整体的StackView中

    [stackView addArrangedSubview:stackViewSub];

}

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end