iOS9中通过UIStackView实现类似大众点评中的效果图

效果图如下:

实现思路

整体可以看做为一个大的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