（七）iOS 实战项目开发:团购之商品详情

• 自定义分栏控制器
• 左侧分栏界面实现
• 商品详情页面实现

自定义分栏控制器

1：自定义左右两侧的View
2：对两侧View添加约束
3：分别制作左右两侧的View

• 控制器选择横屏模式、隐藏电池、自由尺寸

Paste_Image.png

左侧分栏界面的实现

1：使用Xib制作左侧的UIView
2：Autolayout约束
3：添加具体的点击事件
4：图片显示的逻辑控制，根据服务器返回的数据进行处理

• 如何给控制器部分View添加一个导航栏？

Paste_Image.png

直接添加一个顶部View即可，上面添加返回按钮背景图等等。
在我们进行约束的时候，Label有个技巧就是不用给它添加高度约束，因为Label有个Lines属性，我们不给它添加约束的时候，Label就会根据文字的多少自动换行。自动计算高度。

Paste_Image.png

• 下面我们来实现一个这样的约束

Paste_Image.png

对于这四个Button，首先他们有个父View
1：选中第一个Button和父View，设置他的宽度等于父View的一半，顶部和左边都距父View为0
2：选中四个Button让他们等宽等高
3：设置其他三个Button的顶部和左边为0

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

• 更新约束即可

商品详情页面的实现

• UIWebView创建的

• 加载WebView

• UIWebView的协议方法

• 实现点击方法 传递模型

#pragma mark 
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    
    DealModel *md = [_dataSource objectAtIndex:indexPath.item];
    DetailViewController *dvc = [[DetailViewController alloc] initWithNibName:@"DetailViewController" bundle:nil];
    dvc.dealModel = md;
    [self.navigationController pushViewController:dvc animated:YES];
}```

- 连线控件 赋值 等等

• (void)viewDidLoad {
  [super viewDidLoad];
  // Do any additional setup after loading the view from its nib.

  // 加载详情页面h5请求
  NSURLRequest *request = [[NSURLRequest alloc] initWithURL:[NSURL URLWithString:self.dealModel.deal_h5_url]];
  [_webView loadRequest:request];

  [self.demailImageView sd_setImageWithURL:[NSURL URLWithString:self.dealModel.image_url]];

}```

• 简单的运行效果：

Detail.gif

掌握：
1：自定义分屏控制器
2：UIWebView的简单使用