iOS UI基础-9.1 UITableView 团购

概述

接下来，我们要做的是团购界面的设计，最张要实现的效果图及项目结构图

    

团购数据的展示

思路：

  • 系统自带的tableCell不能展示三个文本，不能满足条件，自定义tableCell
  • 每一个tableCell样式固定不变，使用xib来实现。
  • 数据来源通过加载plist文件

定义展示数据模型

Tuangou.h

//
//  Tuangou.h
//  9.1团购
//
//  Created by jiangys on 15/9/16.
//  Copyright (c) 2015年 uxiaoyuan. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface Tuangou : NSObject
/** 标题 */
@property (nonatomic, copy) NSString *title;

/** 价格 */
@property (nonatomic, copy) NSString *price;

/** 购买人数 */
@property (nonatomic, copy) NSString *buyCount;

/** 图片 */
@property (nonatomic, copy) NSString *icon;

-(instancetype)initWithDict:(NSDictionary *)dict;
+(instancetype)tuangouWithDit:(NSDictionary *)dict;
@end

Tuangou.m

#import "Tuangou.h"

@implementation Tuangou

-(instancetype)initWithDict:(NSDictionary *)dict
{
    if (self=[super init]) {
        [self setValuesForKeysWithDictionary:dict];
    }
    return self;
}

+(instancetype)tuangouWithDit:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];
}

@end

使用xib自定义cell

使用xib封装一个view的步骤

  1. 新建一个xib文件描述一个view的内部结构(假设叫做TuangouCell.xib)
  2. 新建一个自定义的类(自定义类需要继承自系统自带的view, 继承自哪个类,  取决于xib根对象的Class),当前继续自UITableViewCell
  3. 新建类的类名最好跟xib的文件名保持一致(比如类名就叫做TuangouCell)
  4. 将xib中的控件 和 自定义类的.m文件 进行连线
  5. 提供一个类方法返回一个创建好的自定义view(屏蔽从xib加载的过程)
  6. 提供一个模型属性让外界传递模型数据
  7. 重写模型属性的setter方法,在这里将模型数据展示到对应的子控件上面

TuangouCell.xib

说明：cell 大小为320*80，图片为95*60。注意要设置identifier为tuangou,为了从缓存中记取cell使用。

Tuangou.h

#import <UIKit/UIKit.h>
@class Tuangou;

@interface TuangouCell : UITableViewCell

/**
 *  通过一个tableView来创建一个cell
 */
+ (instancetype)cellWithTableView:(UITableView *)tableView;

/** 团购模型 */
@property (nonatomic, strong) Tuangou *tuangou;
@end

TuangouCell.m

#import "TuangouCell.h"
#import "Tuangou.h"

@interface TuangouCell()
//将xib中的控件 和 自定义类的.m文件 进行连线
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@property (weak, nonatomic) IBOutlet UILabel *titleView;
@property (weak, nonatomic) IBOutlet UILabel *priceView;
@property (weak, nonatomic) IBOutlet UILabel *buyCountView;

@end

@implementation TuangouCell

//提供一个类方法返回一个创建好的自定义view(屏蔽从xib加载的过程)
+ (instancetype)cellWithTableView:(UITableView *)tableView
{
    static NSString *ID = @"tuangou";
    TuangouCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    if (cell == nil) {
        // 从xib中加载cell
        cell = [[[NSBundle mainBundle] loadNibNamed:@"TuangouCell" owner:nil options:nil] lastObject];
    }
    return cell;
}

//重写模型属性的setter方法,在这里将模型数据展示到对应的子控件上面
- (void)setTuangou:(Tuangou *)tuangou
{
    _tuangou = tuangou;

    // 1.图片
    self.iconView.image = [UIImage imageNamed:tuangou.icon];

    // 2.标题
    self.titleView.text = tuangou.title;

    // 3.价格
    self.priceView.text = [NSString stringWithFormat:@"￥%@", tuangou.price];

    // 4.购买数
    self.buyCountView.text = [NSString stringWithFormat:@"%@人已购买", tuangou.buyCount];
}

@end

控制器实现

Main.storyboard里拉入一个TableView,并设置ViewController为dataSouce数据源。

ViewController.m

#import "ViewController.h"
#import "Tuangou.h"
#import "TuangouCell.h"

@interface ViewController ()<UITableViewDataSource>
@property (weak, nonatomic) IBOutlet UITableView *tableView;

/** 数据源 */
@property (nonatomic, strong) NSMutableArray *tgs;

@end

@implementation ViewController

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

/**
 *  数据的懒加载
 */
-(NSMutableArray *)tgs
{
    if(_tgs==nil)
    {
        NSString *path=[[NSBundle mainBundle] pathForResource:@"tgs.plist" ofType:nil];
        NSArray *dictArray=[NSArray arrayWithContentsOfFile:path];

        NSMutableArray *tgArray=[NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            Tuangou *tg=[Tuangou tuangouWithDit:dict];
            [tgArray addObject:tg];
        }
        _tgs=tgArray;
    }
    return _tgs;
}

/**
 *  一共有多少行数据
 */
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.tgs.count;
}

/**
 *  每一行显示怎样的cell
 */
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 1.创建cell
    TuangouCell *cell = [TuangouCell cellWithTableView:tableView];

    // 2.给cell传递模型数据
    cell.tuangou = self.tgs[indexPath.row];
    return cell;
}

/**
 *  隐藏状态栏
 */
- (BOOL)prefersStatusBarHidden
{
    return YES;
}
@end

这样，运行起来，就看到数据已经加载了，效果：

加载更多数据

建立TuangouFooterView.xib

说明：UIView的大小为320*44。Button 为300*35 。View下面封装了菊花和Lable,设置Hidden为Yes。

新建一个xib根对象的Class ，并定义代理。

TuangouFooterView.h

#import <UIKit/UIKit.h>
@class TuangouFooterView;

@protocol TuangouFooterViewDelegate <NSObject>

@optional
-(void)tuangouFooterDidClickedLoadBtn:(TuangouFooterView *)tuangouFooterView;

@end
@interface TuangouFooterView : UIView
/**
 *  快速创建一个footerView对象
 */
+ (instancetype)footerView;

// 要使用weak，避免循环引用
@property(nonatomic,weak) id<TuangouFooterViewDelegate> delegate;
@end

TuangouFooterView.m

#import "TuangouFooterView.h"

@interface TuangouFooterView()
@property (weak, nonatomic) IBOutlet UIButton *loadBtn;
@property (weak, nonatomic) IBOutlet UIView *loadingView;
- (IBAction)loadBtnClick;

@end

@implementation TuangouFooterView

+ (instancetype)footerView
{
    return [[[NSBundle mainBundle] loadNibNamed:@"TuangouFooterView" owner:nil options:nil] lastObject];
}

/**
 *  点击"加载"按钮
 */
- (IBAction)loadBtnClick {
    // 1.隐藏加载按钮
    self.loadBtn.hidden = YES;

    // 2.显示"正在加载"
    self.loadingView.hidden = NO;

    // 3.显示更多的数据
    // GCD ，1s后执行时面的代码
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ // 通知代理,先判断是否有实现代理的方法。
        if ([self.delegate respondsToSelector:@selector(tuangouFooterDidClickedLoadBtn:)]) {
            [self.delegate tuangouFooterDidClickedLoadBtn:self];
        }

        // 4.显示加载按钮
        self.loadBtn.hidden = NO;

        // 5.隐藏"正在加载"
        self.loadingView.hidden = YES;
    });
}
@end

ViewController.m就很简单了，实现TuangouFooterViewDelegate代理。

@interface ViewController ()<UITableViewDataSource,TuangouFooterViewDelegate>

设置代理

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

    TuangouFooterView *footerView=[TuangouFooterView footerView];
    footerView.delegate=self;// 设置当前footerView为代理
    self.tableView.tableFooterView=footerView;
}

实现里面的代理方法

/**
 *  加载更多的数据
 */
- (void)tuangouFooterDidClickedLoadBtn:(TuangouFooterView *)tuangouFooterView
{
#warning 正常开发:发送网络请求给远程的服务器
    // 1.添加更多的模型数据
    Tuangou *tg = [[Tuangou alloc] init];
    tg.icon = @"ad_01";
    tg.title = @"新增加的团购数据..";
    tg.price = @"100";
    tg.buyCount = @"0";
    [self.tgs addObject:tg];

    // 2.刷新表格(告诉tableView重新加载模型数据, 调用tableView的reloadData)
    [self.tableView reloadData];
}

效果：

使用delegate的步骤

1.先搞清楚谁是谁的代理(delegate)

2.定义代理协议,协议名称的命名规范:控件类名 + Delegate

3.定义代理方法

  • 代理方法一般都定义为@optional
  • 代理方法名都以控件名开头
  • 代理方法至少有1个参数,将控件本身传递出去

4.设置代理(delegate)对象  (比如myView.delegate = xxxx;)

代理对象遵守协议

代理对象实现协议里面该实现的方法

5.在恰当的时刻调用代理对象(delegate)的代理方法,通知代理发生了什么事情

(在调用之前判断代理是否实现了该代理方法)

加载顶部广告

新建一个TuangouHeaderView.xib

说明：分割线使用的是UIView,宽为320，高为1,Background 设置为灰色，Alpha 设置为0.5 。

TuangouHeaderView.h

#import <UIKit/UIKit.h>

@interface TuangouHeaderView : UIView
+ (instancetype)headerView;
@end

TuangouHeaderView.m

#import "TuangouHeaderView.h"

@interface TuangouHeaderView()

@end

@implementation TuangouHeaderView

+ (instancetype)headerView
{
    return [[[NSBundle mainBundle] loadNibNamed:@"TuangouHeaderView" owner:nil options:nil] lastObject];
}

/**
 *  当一个对象从xib中创建初始化完毕的时候就会调用一次
 */
- (void)awakeFromNib
{
    // 在这里面添加图片轮播器
}

@end

当然，这一块可以使用幻灯，幻灯的效果请参考:http://www.cnblogs.com/jys509/p/4811509.html

最终效果

源代码下载：点击下载

时间： 2024-11-05 21:37:11

iOS UI基础-9.1 UITableView 团购的相关文章

iOS UI基础-9.0 UITableView基础

在iOS中,要实现表格数据展示,最常用的做法就是使用UITableView.UITableView继承自UIScrollView,因此支持垂直滚动,而且性能极佳. UITableView有两种样式: 一列显示:UITableViewStylePlain 分组显示:UITableViewStyleGrouped tableView展示数据的过程 1.调用数据源的下面方法得知一共有多少组数据 - (NSInteger)numberOfSectionsInTableView:(UITableView

iOS UI基础-9.2 UITableView 简单微博列表

概述 我们要实现的效果: 这个界面布局也是UITableView实现的,其中的内容就是UITableViewCell,只是这个UITableViewCell是用户自定义实现的.虽然系统自带的UITableViewCell已经够强大了,但是这个界面布局并不能满足我们的需求. 在上面的cell布局里,我们可以知道,每个cell的高度都是不固定的.因此,我们通过代码来自定义cell. 代码自定义cell 步骤: 1.新建一个继承自UITableViewCell的类 2.重写initWithStyle:

iOS UI控件7(UITableView)

1.表格(UITableView)与表格控制器(UITableViewController) UITableView是iOS开发中常见的UI控件,本质是一个列表(单列的表格).UITableView允许自由控制行的控件,包括在表格行中添加多个字控件.UITableView继承了UIScrollView,具有UIScrollView的功能,这个UIScrollView主要封装了UITableViewCell单元格控件,因此UITableView默认可以对单元格进行滚动.默认情况下,所有UITabl

ios-用xib和UI table View controller 的团购网站

首先 素材 照例是照片和plist文件 然后依旧是 字典转模型 UI table View controller 的缺点是 不能灵活控制 图片的大小 和布局 所以 新建一个xib文件,然后新建同名的类  xib继承此类 里面的控件可以拖线到类中 // // Tg.h // 团购网 // // Created by YaguangZhu on 15/8/18. // Copyright (c) 2015年 YaguangZhu. All rights reserved. // #import <F

IOS UI基础07

TableView 属性 // 设置每一行cell的高度 @property (nonatomic)CGFloat rowHeight; // 设置每一组头部的高度 @property (nonatomic)CGFloat sectionHeaderHeight; // 设置分割线颜色 @property (nonatomic, retain) UIColor *separatorColor // 设置表头控件 @property (nonatomic, retain) UIView *tabl

IOS UI基础08

自定义等高cell // 创建自定义cell添加子控件的方法initWithStyle(note:子控件要添加到contentView上) - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier NS_AVAILABLE_IOS(3_0); // 传统创建自定义view添加子空间的方法 //- (instancetype)initWithFrame:

iOS UI基础-17.0 UILable之NSMutableAttributedString

在iOS开发中,常常会有一段文字显示不同的颜色和字体,或者给某几个文字加删除线或下划线的需求.之前在网上找了一些资料,有的是重绘UILabel的textLayer,有的是用html5实现的,都比较麻烦,而且很多UILabel的属性也不起作用了,效果都不理想.后来了解到NSMuttableAttstring(带属性的字符串),上面的一些需求都可以很简便的实现. NSMuttableAttstring 方法 为某一范围内文字设置多个属性 - (void)setAttributes:(NSDictio

iOS UI基础-1.0加法计算器

1.打开Xcode,新建一个项目 2.Single View Application是最适合初学者的模板 3.填写该应用相关信息 4.搭建UI界面 项目创建完毕后,自动帮我们做了很多配置,也自动生成了很多文件 还自动添加了开发所依赖的框架 项目中这么多文件,哪些是影响着UI界面的呢?在iOS5之前,苹果使用xib文件来描述UI界面,在iOS5之后,苹果采取了更加强大和先进的storyboard文件来描述界面(Xcode5是基于iOS7的)因此,可以得出结论:修改项目中的Main.storyboa

IOS UI基础04

动画 1.头尾式动画 动画开始 [UIView beginAnimations:nil context:nil]; 设置动画时间 [UIView s ! etAnimationDuration:3]; [UIView setAnimationDelegate:self]; 只要写在开始和结束之间的代码, 就会被执行动画 但是: 并不是所有的代码都能够执行动画 只有属性声明中说明了是animatable的属性,才可以执行UIView动画 CGRect tempFrame2 = self.hudLa