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