文档章节

iOS 商城类 app 首页的实现

GLAlanTong
 GLAlanTong
发布于 2017/03/25 20:38
字数 1255
阅读 61
收藏 0

iOS 商城类 app 首页的实现

    很多人做 iOS开发的人员都应该写过这样的界面,但是呢,具体怎么去优化写这样的界面是我们需要考虑的,对于这样的界面动辄上千行代码在控制器里面"活跃"着,后期维护成本大大增加,现在我简单的说一下我的实现思路,这样的界面无非就是 collectionView 或者 tableView. 举个简单的例子,以 tableView 为例吧,绝大数 app 首页基本都是第一个分区是个 bannar, 其实是分类,其次可能还是分类,最后是列表,一般这个时候,我的习惯是将每一块自定义 view, 然后当做 tableView 的 sectionHeaderView, 最后一个是 cell,当然你也可以将每一块携程 cell 也是可以的,因为 sectionHeaderView 也是可以复用的,当然,如果就是三四个分区是否复用其实差不多(如果大家觉得有必要复用,请记得在下面留言,然后我们一起探讨一下嘛). 上个图,很丑,简单的看一下就好了,不要介意

1.第一部分代码: 

#import "SectionHeaderViewOne.h"

@interface SectionHeaderViewOne ()

@property (nonatomic,strong) UIImageView *hotel_image;
@property (nonatomic,strong) UILabel *hotel_type;
@property (nonatomic,strong) UIButton *hotel_rate;
@property (nonatomic,strong) UIButton *hotel_address;

@end

@implementation SectionHeaderViewOne

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setupUI];
    }
    return self;
}

- (void)setupUI {
    [self addSubview:self.hotel_image];
    [self addSubview:self.hotel_type];
    [self addSubview:self.hotel_rate];
    [self addSubview:self.hotel_address];
}

#pragma mark --- 懒加载 ----
- (UIImageView *)hotel_image {
    if (!_hotel_image) {
        _hotel_image = [[UIImageView alloc] init];
        [_hotel_image setFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height - 50)];
        _hotel_image.image = [UIImage imageNamed:@"timg.jpg"];
        _hotel_image.contentMode =  UIViewContentModeScaleToFill;
    }
    return _hotel_image;
}

-(UILabel *)hotel_type {
    if (!_hotel_type) {
        _hotel_type = [[UILabel alloc] init];
        [_hotel_type setFrame:CGRectMake(10, self.frame.size.height - 100, 100, 50)];
        _hotel_type.font = [UIFont systemFontOfSize:18];
        _hotel_type.text = @"7天";
        _hotel_type.textColor = [UIColor whiteColor];
    }
    return _hotel_type;
}

- (UIButton *)hotel_rate {
    if (!_hotel_rate) {
        _hotel_rate = [UIButton buttonWithType:UIButtonTypeCustom];
        [_hotel_rate setFrame:CGRectMake(self.frame.size.width - 100, self.hotel_type.frame.origin.y, 100, 50)];
        [_hotel_rate setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        _hotel_rate.titleLabel.font = [UIFont systemFontOfSize:18];
        [_hotel_rate setTitle:@"查看评价" forState:UIControlStateNormal];
    }
    return _hotel_rate;
}

- (UIButton *)hotel_address {
    if (!_hotel_address) {
        _hotel_address = [UIButton buttonWithType:UIButtonTypeCustom];
        [_hotel_address setFrame:CGRectMake(10, CGRectGetMaxY(self.hotel_image.frame), self.frame.size.width - 20, 50)];
        [_hotel_address setTitle:@"地址: 北京天安门" forState:UIControlStateNormal];
        [_hotel_address setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];
        [_hotel_address setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
        _hotel_address.titleLabel.font = [UIFont systemFontOfSize:17];
    }
    return _hotel_address;
}

2.第二部分的话,就稍微麻烦点,因为上面嵌套了一个 collectionView

先自定义 collectionView, 在自定义 collectionViewCell, 最后也可以自定义一个 view, 将其作为 collectionView 的父视图 (我是这样写的,我个人觉得没有多大的必要, 简单事物复杂化了)

collectiomView.m 的代码 

#import "CollectionView.h"
#import "CollectionViewCell.h"


@interface CollectionView () <UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>

@end

static NSString *kIdentify = @"CollectionViewCell";

@implementation CollectionView

-(instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout {
    if (self = [super initWithFrame:frame collectionViewLayout:layout]) {
        self.delegate = self;
        self.dataSource = self;
        self.alwaysBounceVertical = YES;
        [self registerNib:[UINib nibWithNibName:kIdentify bundle:[NSBundle mainBundle]] forCellWithReuseIdentifier:kIdentify];
    }
    return self;
}


#pragma mark --- 代理 ----
#pragma mark  设置CollectionView的组数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}

#pragma mark  设置CollectionView每组所包含的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.imgArrays.count;
}

#pragma mark  设置CollectionCell的内容
// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
        CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kIdentify forIndexPath:indexPath];
    cell.type_img.image = [UIImage imageNamed:(self.imgArrays[indexPath.row])];
        return cell;
}
    


#pragma mark  定义每个UICollectionView的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake([UIScreen mainScreen].bounds.size.width / 5, 100);
}



#pragma mark  定义整个CollectionViewCell与整个View的间距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(0, 0, 0, 0);//(上、左、下、右)
}


#pragma mark  定义每个UICollectionView的横向间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
    return 0;
}

#pragma mark  定义每个UICollectionView的纵向间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 0;
}

#pragma mark  点击CollectionView触发事件
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    
    
}

#pragma mark  设置CollectionViewCell是否可以被点击
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    return YES;
}

collectionViewCell 用 xib 就好了,这个就不再啰嗦了

3. 自定义 tableView

#import "HotelTableView.h"
#import "SectionHeaderViewOne.h"
#import "SectionHeaderViewTwo.h"
#import "CollectionView.h"


@interface HotelTableView () <UITableViewDelegate,UITableViewDataSource>

@end

@implementation HotelTableView

- (instancetype)init
{
    self = [super init];
    if (self) {
        self.dataSource = self;
        self.delegate = self;
        UIView *footerView = [[UIView alloc] init];
        footerView.backgroundColor = [UIColor lightGrayColor];
        self.tableFooterView = footerView;
    }
    return self;
}


- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    if (section == 0) {
        return 0;
    }else if (section == 1){
        return 0;
    }else {
        return 10;
    }
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 3;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *cell_id = @"cell_id";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cell_id];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cell_id];
    }
    cell.textLabel.text = @"简单的测试";
    return cell;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    if (section == 0) {
        SectionHeaderViewOne *headerView = [[SectionHeaderViewOne alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 200)];
        return headerView;
    }else if (section == 1){
        SectionHeaderViewTwo *headerView = [[SectionHeaderViewTwo alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 200)];
        headerView.imgArrays = @[@"04",@"10",@"42",@"51",@"70",@"80-2",@"80",@"10",@"04",@"51"];
        return headerView;
    }else {
        UILabel *label = [[UILabel alloc] init];
        [label setFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 60)];
        label.text = @"入住日期,3月24日";
        label.font = [UIFont systemFontOfSize:18];
        return label;
    }
}


- (CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 100;
}


- (CGFloat )tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    if (section == 2) {
        return 60;
    }else {
        return 200;
    }
}

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
    return 10;
}

4. 将 tableView 添加到控制器上面就好了

#import "ViewController.h"
#import "HotelTableView.h"

@interface ViewController ()

@property (nonatomic,strong) HotelTableView *tableView;


@end

@implementation ViewController

-(HotelTableView *)tableView {
    if (!_tableView) {
        _tableView = [[HotelTableView alloc] init];
        [_tableView setFrame:self.view.bounds];
    }
    return _tableView;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [self.view addSubview:self.tableView];
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

 

以上就可以简单实现上面图的界面了,这样控制器里面看起来是不是很简洁,因为逻辑处理可以相应的分散到 tableView 以及子视图当中, 哪怕界面逻辑修改,维护起来成本也不至于太高,这是我的想法,欢迎各路大神拍砖

 

© 著作权归作者所有

上一篇: socket 和 http
下一篇: iOS install opencv
GLAlanTong
粉丝 3
博文 21
码字总数 15640
作品 0
广州
程序员
私信 提问
OpenCart App正式发布!

OpenCart App正式发布! 国内首创OpenCart手机APP公测啦!! 经过数月奋战,国内首创OpenCart手机APP商城已开发完成。我们遵循原生开发,一体化系统建设思想,完成了OpenCart的APP 开发,包括...

OpenCart中文官方
2015/12/10
1
0
强大的iOS开发必备工具

做iOS应用开发的,没有这些工具怎么行,强大的iOS开发必备工具!需要的速来拿! 1、ShareSDK 下载链接:http://sharesdk.cn/Download 软件首页:http://sharesdk.cn/ 分类:程序开发 功能强大...

拉偶有所依
2014/12/06
1K
10
OpenCMF v1.4.0 正式版发布,积木式开发平台

经过历史2个月的研发,OpenCMF v1.4.0正式版发布! 项目介绍 OpenCMF是一套国内领先的互联网积木式云平台,追求简单、高效、卓越。可轻松实现支持多终端的WEB产品快速搭建、部署、上线。系统...

ijry
2016/07/19
3.9K
27
iOS Simulator功能介绍关于Xamarin IOS开发

iOS Simulator功能介绍关于Xamarin IOS开发 iOS Simulator功能介绍 在图1.38所示的运行效果中,所见到的类似于手机的模型就是iOS Simulator。在没有iPhone或iPad设备时,可以使用iOS Simulat...

大学霸
2015/04/17
788
0
Vue项目history模式下微信分享总结

每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信分享又遇到了很多问题,最后终于解决了,现将解决的过程分享一下。 原文justyeh.top/post/39 技术...

justyeh
03/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
4
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
8
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
868
10
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部