UITableView - 學(xué)習(xí)筆記(使用)

一個(gè)網(wǎng)管的iOS學(xué)習(xí)筆記，記錄下自己這條路上的點(diǎn)點(diǎn)滴滴。都是一些很簡(jiǎn)單的筆記，不敢妄談教學(xué)，純粹只是為了記錄自己在這條路上——前進(jìn)著。

  • 本來(lái)是分成3篇來(lái)寫的，但是感覺(jué)這樣太亂而雜了，所以索性整理成一篇。算是自己對(duì)UITableView這個(gè)控件的初步了解的學(xué)習(xí)吧。
  • 這里分享2篇很全面也很實(shí)用的UITableView的博文：
    1、 UITableView整理
    2、 iOS開發(fā)之UITableView全面解析
開始任務(wù)：

  • 模仿的Demo（簡(jiǎn)單模仿一下效果，加深對(duì)UITableView的了解程度而已，并不包含實(shí)際功能）：


    模仿頁(yè)面
Step1：分析
  • 素材：
    需要5個(gè)圖標(biāo)（#FFFFFF）和一張背景圖片（毛玻璃）
  • 內(nèi)容：
    這個(gè)界面一共有9行，即是：FirstName（名）、LastName（姓）、UserName（昵稱）、Password（密碼）、Re-Password（確認(rèn)密碼）、Email（郵箱）、Register（注冊(cè)）、Login here（賬號(hào)登錄）
Step2：搭建基本頁(yè)面
  1. 找素材：
    谷歌、花瓣、知乎求助等等，小圖標(biāo)的@2x（2倍）圖尺寸為為58*58。
    關(guān)于iOS中尺寸的說(shuō)明，可以點(diǎn)這里。
    我這里已經(jīng)收集整理好了素材，并且上傳到了項(xiàng)目中：
    準(zhǔn)備好素材
  • 搭建基本界面：
    首先，實(shí)現(xiàn),UITableView兩個(gè)代理方法：UITableViewDelegate,UITableViewDataSource
//UITableView的代理方法
@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>
@end

用代碼新建一個(gè)TableView，添加代理方法、數(shù)據(jù)源以及為UITableView設(shè)置背景圖片：

//代碼創(chuàng)建一個(gè)TableView
- (void)createTableviews{
    //創(chuàng)建TableView，設(shè)置位置大小
    self.registerTableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width, [[UIScreen mainScreen] bounds].size.height)];
    
    //給TableView設(shè)置背景圖片
    UIImageView *backImageView = [[UIImageView alloc]initWithFrame:self.view.bounds];
    [backImageView setImage:[UIImage imageNamed:@"blurred_background"]];
    self.registerTableView.backgroundView = backImageView;
    
    //代理方法和數(shù)據(jù)源
    self.registerTableView.delegate = self;
    self.registerTableView.dataSource = self;
        
    //添加到視圖中（在屏幕里顯示這個(gè)TableView）
    [self.view addSubview:_registerTableView];
}

添加我們需要初步搭建這個(gè)界面需要的TableView的代理方法：

//返回多少個(gè)Section
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

//每組多少行數(shù)據(jù)
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

//設(shè)置行高
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

//cell顯示的具體內(nèi)容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
  • 完整代碼：
#import "ViewController.h"

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>
@property (strong, nonatomic) UITableView *registerTableView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    //調(diào)用自定義方法，創(chuàng)建tableView
    [self createTableviews];
}

//代碼創(chuàng)建一個(gè)UITableView
- (void)createTableviews{
    
    //創(chuàng)建TableView
    self.registerTableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width, [[UIScreen mainScreen] bounds].size.height)];
    
    //給UITableView設(shè)置背景圖片
    UIImageView *backImageView = [[UIImageView alloc]initWithFrame:self.view.bounds];
    [backImageView setImage:[UIImage imageNamed:@"blurred_background"]];
    self.registerTableView.backgroundView = backImageView;
    
    //代理方法和數(shù)據(jù)源
    self.registerTableView.delegate = self;
    self.registerTableView.dataSource = self;
    
    //添加到視圖中（在屏幕里顯示這個(gè)TableView）
    [self.view addSubview:_registerTableView];
}

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

//返回多少個(gè)Section
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return 1;//只有一組數(shù)據(jù)，所以只需要返回一個(gè)Section
}

//返回多少行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    if (section == 0) {
        return 8;//需要8行數(shù)據(jù)
    }else{
        
        return 0;
    }
}

//設(shè)置行高
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    if (indexPath.section == 0) {
        
        return 80;//為了比較直觀，設(shè)置的比較大
    }
    return 0;
}

//cell的內(nèi)容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    //創(chuàng)建cell，標(biāo)識(shí)符為：myCell，類型為：UITableViewCellStyleDefault
    UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"myCell"];
    
    //讓cell背景透明
    cell.backgroundColor = [UIColor clearColor];
    
    //讓cell的字體為白色
    cell.textLabel.textColor = [UIColor whiteColor];
    //cell的字體和大小
    cell.textLabel.font = [UIFont fontWithName:@"Helvetica" size:18];

    
    if (indexPath.section == 0) {
        if (indexPath.row == 0) {//名
            //設(shè)置圖標(biāo)和文字內(nèi)容
            cell.imageView.image = [UIImage imageNamed:@"firstName"];
            cell.textLabel.text = @"Your First Name";
            
        }else if (indexPath.row == 1){//姓
            cell.imageView.image = [UIImage imageNamed:@"lastName"];
            cell.textLabel.text = @"Your Last Name";
            
        }else if (indexPath.row == 2){//昵稱
            cell.imageView.image = [UIImage imageNamed:@"userName"];
            cell.textLabel.text = @"Your User Name";
            
        }else if (indexPath.row == 3){//密碼
            cell.imageView.image = [UIImage imageNamed:@"password"];
            cell.textLabel.text = @"Create Your Password";
            
        }else if (indexPath.row == 4){//確認(rèn)密碼
            cell.imageView.image = [UIImage imageNamed:@"password"];
            cell.textLabel.text = @"Re-enter Your Password";
            
        }else if (indexPath.row == 5){//郵箱
            cell.imageView.image = [UIImage imageNamed:@"email"];
            cell.textLabel.text = @"Enter Your Email";
        }
    }
    
    return cell;
}
@end

  • 運(yùn)行效果


    搭建基本頁(yè)面

現(xiàn)在基本界面完成，還要繼續(xù)完善。

Step3：進(jìn)一步完善

需求：正上方一個(gè)名為“Register”的標(biāo)題，正下方一個(gè)名為“ Register”的按鈕

  1. 添加一個(gè)“Register”的標(biāo)題：
  • 需要調(diào)用TableView的兩個(gè)代理方法：
//組頭部視圖
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
//組頭部的高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
  • 給TableView添加標(biāo)題的完整代碼：
//組頭部的高度（即這里的標(biāo)題所在視圖的高度）
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    return 80;
}

//自定義組頭部視圖（即標(biāo)題內(nèi)容）
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    
    //初始化一個(gè)UIImageView，（frame會(huì)被之后的label設(shè)置，所以可以隨便設(shè)置，“CGRectMake(0, 0, 0, 0)”等同于“CGRectZero”）
    UIImageView *titleImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 0, 0)];
    //image的背景顏色（clearColor即背景透明）
    titleImage.backgroundColor = [UIColor clearColor];
    
    //初始化一個(gè)UILabel，并設(shè)置位置大?。ㄓ?jì)算尺寸是一門技術(shù)活，我也不太懂，??，所以這里隨便設(shè)置了一下，記得寬度等于屏幕寬）
    UILabel *titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 30, [[UIScreen mainScreen] bounds].size.width, 30)];
    titleLabel.text = @"Register";
    //字體顏色
    titleLabel.textColor = [UIColor whiteColor];
    
    //字體的大小適應(yīng)label的寬度（很關(guān)鍵的地方）
    titleLabel.adjustsFontSizeToFitWidth = YES;
    
    //字體：粗體，字號(hào)：30
    titleLabel.font = [UIFont boldSystemFontOfSize:22];
    //位置：居中對(duì)齊
    titleLabel.textAlignment = NSTextAlignmentCenter;
    
    //將label放入image的視圖中（即顯示出來(lái)）
    [titleImage addSubview:titleLabel];
    return titleImage;
}

  • 運(yùn)行效果：


    添加一個(gè)“Register”的標(biāo)題：

2.添加一個(gè)注冊(cè)按鈕（即“ Register”按鈕）

其實(shí)基本思路和上一步一模一樣：1??只是viewForHeaderInSection換（組頭部方法）成了viewForFooterInSection（組尾部方法），2??UILabel（文本）換成了UIButton（按鈕）

  • 調(diào)用方法：組尾部高度和組尾部視圖
//組尾部高度方法
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
//組尾部視圖方法
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
  • 修改組尾部的視圖內(nèi)容，設(shè)置為一個(gè)綠色的按鈕：
    //初始化一個(gè)button，類型為UIButtonTypeCustom（即自定義風(fēng)格）
    UIButton *registerButton = [UIButton buttonWithType:UIButtonTypeCustom];
    //位置大小
    registerButton.frame = CGRectMake([[UIScreen mainScreen] bounds].size.width/10, 20, 300, 40);
    
    //設(shè)置button顏色（把@“#4FAC74”轉(zhuǎn)成UIColor）
    registerButton.backgroundColor = [UIColor colorWithRed:79/255.f green:172/255.f blue:116/255.f alpha:1];
    [registerButton setTitle:@"REGISTER" forState:UIControlStateNormal];
    
    //設(shè)置button的圓角效果
    registerButton.layer.cornerRadius = registerButton.frame.size.height/8;
    registerButton.imageView.layer.masksToBounds = YES;
  • 給TableView底部添加一個(gè)按鈕完整代碼：

//組尾部高度
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
    return 100;
}
//組尾部視圖
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section{
    
    UIImageView *buttonImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 0, 0)];
    //image的背景顏色（clearColor即背景透明）
    buttonImage.backgroundColor = [UIColor clearColor];
    
    //初始化一個(gè)button，類型為UIButtonTypeCustom（即自定義風(fēng)格）
    UIButton *registerButton = [UIButton buttonWithType:UIButtonTypeCustom];
    //位置大?。ǔ叽绫壤孕袇⒖?，我還不太懂。。。）
    registerButton.frame = CGRectMake([[UIScreen mainScreen] bounds].size.width/10, 20, 300, 40);
    
    //設(shè)置button顏色（把@“#4FAC74”轉(zhuǎn)成UIColor）
    registerButton.backgroundColor = [UIColor colorWithRed:79/255.f green:172/255.f blue:116/255.f alpha:1];
    [registerButton setTitle:@"REGISTER" forState:UIControlStateNormal];
    
    //設(shè)置button的圓角效果
    registerButton.layer.cornerRadius = registerButton.frame.size.height/8;
    registerButton.imageView.layer.masksToBounds = YES;
    
    [buttonImage addSubview:registerButton];
    return buttonImage;
}
  • 運(yùn)行效果：
底部添加按鈕
項(xiàng)目（目前）完整代碼：

#import "ViewController.h"

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>
@property (strong, nonatomic) UITableView *registerTableView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    //調(diào)用自定義方法，創(chuàng)建tableView
    [self createTableviews];
}

//代碼創(chuàng)建一個(gè)UITableView
- (void)createTableviews{
    
    //創(chuàng)建TableView
    self.registerTableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width, [[UIScreen mainScreen] bounds].size.height)];
    
    //給UITableView設(shè)置背景圖片
    UIImageView *backImageView = [[UIImageView alloc]initWithFrame:self.view.bounds];
    [backImageView setImage:[UIImage imageNamed:@"blurred_background"]];
    self.registerTableView.backgroundView = backImageView;
    
    //代理方法和數(shù)據(jù)源
    self.registerTableView.delegate = self;
    self.registerTableView.dataSource = self;
    
    //添加到視圖中（在屏幕里顯示這個(gè)TableView）
    [self.view addSubview:_registerTableView];
}

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

//返回多少個(gè)Section
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return 1;//只有一組數(shù)據(jù)，所以只需要返回一個(gè)Section
}

//返回多少行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    if (section == 0) {
        return 8;//需要8行數(shù)據(jù)
    }else{
        
        return 0;
    }
}

//設(shè)置行高
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    if (indexPath.section == 0) {
        
        return 80;//為了比較直觀，設(shè)置的比較大
    }
    return 0;
}


//組頭部的高度（即這里的標(biāo)題所在視圖的高度）
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    return 80;
}

//自定義組頭部視圖（即標(biāo)題內(nèi)容）
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    
    //初始化一個(gè)UIImageView，（frame會(huì)被之后的label設(shè)置，所以可以隨便設(shè)置，“CGRectMake(0, 0, 0, 0)”等同于“CGRectZero”）
    UIImageView *titleImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 0, 0)];
    //image的背景顏色（clearColor即背景透明）
    titleImage.backgroundColor = [UIColor clearColor];
    
    //初始化一個(gè)UILabel，并設(shè)置位置大?。ㄓ?jì)算尺寸是一門技術(shù)活，我也不太懂，??，所以這里隨便設(shè)置了一下，記得寬度等于屏幕寬）
    UILabel *titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 30, [[UIScreen mainScreen] bounds].size.width, 30)];
    titleLabel.text = @"Register";
    //字體顏色
    titleLabel.textColor = [UIColor whiteColor];
    
    //字體的大小適應(yīng)label的寬度（很關(guān)鍵的地方）
    titleLabel.adjustsFontSizeToFitWidth = YES;
    
    //字體：粗體，字號(hào)：30
    titleLabel.font = [UIFont boldSystemFontOfSize:22];
    //位置：居中對(duì)齊
    titleLabel.textAlignment = NSTextAlignmentCenter;
    
    //將label放入image的視圖中（即顯示出來(lái)）
    [titleImage addSubview:titleLabel];
    return titleImage;
}

//組尾部高度
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
    return 100;
}
//組尾部視圖
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section{
    
    UIImageView *buttonImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 0, 0)];
    //image的背景顏色（clearColor即背景透明）
    buttonImage.backgroundColor = [UIColor clearColor];
    
    //初始化一個(gè)button，類型為UIButtonTypeCustom（即自定義風(fēng)格）
    UIButton *registerButton = [UIButton buttonWithType:UIButtonTypeCustom];
    //位置大小
    registerButton.frame = CGRectMake([[UIScreen mainScreen] bounds].size.width/10, 20, 300, 40);
    
    //設(shè)置button顏色（把@“#4FAC74”轉(zhuǎn)成UIColor）
    registerButton.backgroundColor = [UIColor colorWithRed:79/255.f green:172/255.f blue:116/255.f alpha:1];
    [registerButton setTitle:@"REGISTER" forState:UIControlStateNormal];
    
    //設(shè)置button的圓角效果
    registerButton.layer.cornerRadius = registerButton.frame.size.height/8;
    registerButton.imageView.layer.masksToBounds = YES;
    
    [buttonImage addSubview:registerButton];
    return buttonImage;
}


//cell的內(nèi)容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    //創(chuàng)建cell，標(biāo)識(shí)符為：myCell，類型為：UITableViewCellStyleDefault
    UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"myCell"];
    
    //讓cell背景透明
    cell.backgroundColor = [UIColor clearColor];
    
    //讓cell的字體為白色
    cell.textLabel.textColor = [UIColor whiteColor];
    //cell的字體和大小
    cell.textLabel.font = [UIFont fontWithName:@"Helvetica" size:18];

    
    if (indexPath.section == 0) {
        if (indexPath.row == 0) {//名
            //設(shè)置圖標(biāo)和文字內(nèi)容
            cell.imageView.image = [UIImage imageNamed:@"firstName"];
            cell.textLabel.text = @"Your First Name";
            
        }else if (indexPath.row == 1){//姓
            cell.imageView.image = [UIImage imageNamed:@"lastName"];
            cell.textLabel.text = @"Your Last Name";
            
        }else if (indexPath.row == 2){//昵稱
            cell.imageView.image = [UIImage imageNamed:@"userName"];
            cell.textLabel.text = @"Your User Name";
            
        }else if (indexPath.row == 3){//密碼
            cell.imageView.image = [UIImage imageNamed:@"password"];
            cell.textLabel.text = @"Create Your Password";
            
        }else if (indexPath.row == 4){//確認(rèn)密碼
            cell.imageView.image = [UIImage imageNamed:@"password"];
            cell.textLabel.text = @"Re-enter Your Password";
            
        }else if (indexPath.row == 5){//郵箱
            cell.imageView.image = [UIImage imageNamed:@"email"];
            cell.textLabel.text = @"Enter Your Email";
        }
    }
    
    return cell;
}
@end
Step4：完善一些細(xì)節(jié)

  1. 現(xiàn)在，實(shí)現(xiàn)了添加標(biāo)題和按鈕：


    實(shí)現(xiàn)注冊(cè)頁(yè)面（2）完成效果

但是因?yàn)椴皇翘私獠季?，也就是?duì)于UI控件的布局距離位置還是不太熟悉，所以上圖的兩個(gè)控件都只是在iPhone6中看起來(lái)居中了而已，但其實(shí)并沒(méi)有居中，也就是說(shuō)當(dāng)換成5s神馬的機(jī)型，位置馬上會(huì)偏移。

所有現(xiàn)在解決這個(gè)問(wèn)題呢，我稍稍學(xué)了一下這個(gè)問(wèn)題的解決方法，那就是調(diào)用當(dāng)前UI控件的center屬性，然后在center屬性的CGPointMake中綁定一個(gè)父視圖（比如當(dāng)前屏幕）的x、y位置，這樣就可以讓這個(gè)UI控件一直居中。

    //x、y位置
    registerButton.center = CGPointMake([[UIScreen mainScreen] bounds].size.width/2, 50);

這樣就可以保證這個(gè)按鈕永遠(yuǎn)對(duì)齊著當(dāng)前屏幕的中心位置：

5s運(yùn)行效果
6s運(yùn)行效果

無(wú)論屏幕尺寸如何變化，兩個(gè)控件的位置始終處于正中間的位置。

2.在button按鈕下面添加一段文字：

    //button下面添加一段一段文字
    UILabel *loginLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 250, 20)];//寬高
    loginLabel.center = CGPointMake([[UIScreen mainScreen] bounds].size.width/2, 80);//x、y軸
    loginLabel.text = @"Already have an account?Login here";//文本
    loginLabel.textColor = [UIColor whiteColor];//字體顏色
    loginLabel.font = [UIFont boldSystemFontOfSize:22];//加粗，字體22
    loginLabel.adjustsFontSizeToFitWidth = YES;//自適應(yīng)lable寬度
    [buttonImage addSubview:loginLabel];//添加到視圖
button下放添加文字
  • 將文字的"Login Here"變色
    //讓“Login here”變成綠色
    NSMutableAttributedString *customStr = [[NSMutableAttributedString alloc]initWithString:loginLabel.text];//調(diào)用NSMutableAttributedString屬性（自定義字符串）
    [customStr addAttribute:NSForegroundColorAttributeName value:[UIColor colorWithRed:79/255.f green:172/255.f blue:116/255.f alpha:1] range:NSMakeRange(24,loginLabel.text.length-24)];//設(shè)置顏色和要變色的部分
    loginLabel.attributedText = customStr;//將自定義的字符串傳給LoginLabel
讓字符串的一部分變色
step5：自定義cell內(nèi)容

UITableView默認(rèn)的cell的顯示方式有4種：

//cell的四種樣式  
       //UITableViewCellStyleDefault,       只顯示圖片和標(biāo)題  
       //UITableViewCellStyleValue1,        顯示圖片，標(biāo)題和子標(biāo)題（子標(biāo)題在右邊）  
       //UITableViewCellStyleValue2,        標(biāo)題和子標(biāo)題  
       //UITableViewCellStyleSubtitle       顯示圖片，標(biāo)題和子標(biāo)題（子標(biāo)題在下邊）

但是，需要實(shí)現(xiàn)的效果是這樣的：

模仿頁(yè)面

所有默認(rèn)的4種cell樣式都不能實(shí)現(xiàn)這個(gè)效果，就必須要自定義cell的樣式。

好吧，因?yàn)槟壳皩?duì)自定義cell而言還是半知半解，所有就把cell的學(xué)習(xí)放到之后單獨(dú)一篇學(xué)習(xí)筆記中吧。

這里關(guān)于UITableView的學(xué)習(xí)就到這里了。比較凌亂，但是自己還是get到一些實(shí)用的新技能。最主要最實(shí)在的還是邊思考的同時(shí)又敲了代碼，雖然并不算多，但是日積月累也可能是成長(zhǎng)的一大步。
  • 完整代碼：
#import "ViewController.h"

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>
@property (strong, nonatomic) UITableView *registerTableView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    //調(diào)用自定義方法，創(chuàng)建tableView
    [self createTableviews];
}

//代碼創(chuàng)建一個(gè)UITableView
- (void)createTableviews{
    
    //創(chuàng)建TableView
    self.registerTableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width, [[UIScreen mainScreen] bounds].size.height)];
    
    //給UITableView設(shè)置背景圖片
    UIImageView *backImageView = [[UIImageView alloc]initWithFrame:self.view.bounds];
    [backImageView setImage:[UIImage imageNamed:@"blurred_background"]];
    self.registerTableView.backgroundView = backImageView;
    
    //代理方法和數(shù)據(jù)源
    self.registerTableView.delegate = self;
    self.registerTableView.dataSource = self;
    
    //添加到視圖中（在屏幕里顯示這個(gè)TableView）
    [self.view addSubview:_registerTableView];
}

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

//返回多少個(gè)Section
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return 1;//只有一組數(shù)據(jù)，所以只需要返回一個(gè)Section
}

//返回多少行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    if (section == 0) {
        return 8;//需要8行數(shù)據(jù)
    }else{
        
        return 0;
    }
}

//設(shè)置行高
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    if (indexPath.section == 0) {
        
        return 80;//為了比較直觀，設(shè)置的比較大
    }
    return 0;
}


//組頭部的高度（即這里的標(biāo)題所在視圖的高度）
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    return 80;
}

//自定義組頭部視圖（即標(biāo)題內(nèi)容）
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    
    //初始化一個(gè)UIImageView，（frame會(huì)被之后的label設(shè)置，所以可以隨便設(shè)置，“CGRectMake(0, 0, 0, 0)”等同于“CGRectZero”）
    UIImageView *titleImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 0, 0)];
    //image的背景顏色（clearColor即背景透明）
    titleImage.backgroundColor = [UIColor clearColor];
    
    //初始化一個(gè)UILabel，并設(shè)置位置大?。ㄓ?jì)算尺寸是一門技術(shù)活，我也不太懂，??，所以這里隨便設(shè)置了一下，記得寬度等于屏幕寬）
    UILabel *titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width, 30)];
    titleLabel.center = CGPointMake([[UIScreen mainScreen] bounds].size.width/2, 50);
    
    titleLabel.text = @"Register";
    //字體顏色
    titleLabel.textColor = [UIColor whiteColor];
    
    //字體的大小適應(yīng)label的寬度（很關(guān)鍵的地方）
    titleLabel.adjustsFontSizeToFitWidth = YES;
    
    //字體：粗體，字號(hào)：30
    titleLabel.font = [UIFont boldSystemFontOfSize:22];
    //位置：居中對(duì)齊
    titleLabel.textAlignment = NSTextAlignmentCenter;
    
    //將label放入image的視圖中（即顯示出來(lái)）
    [titleImage addSubview:titleLabel];
    return titleImage;
}

//組尾部高度
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
    return 100;
}
//組尾部視圖
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section{
    
    UIImageView *buttonImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 0, 0)];
    //image的背景顏色（clearColor即背景透明）
    buttonImage.backgroundColor = [UIColor clearColor];
    
    //初始化一個(gè)button，類型為UIButtonTypeCustom（即自定義風(fēng)格）
    UIButton *registerButton = [UIButton buttonWithType:UIButtonTypeCustom];
    //大小
    registerButton.frame = CGRectMake(0,0, 300, 40);
    //x、y位置
    registerButton.center = CGPointMake([[UIScreen mainScreen] bounds].size.width/2, 30);
    
    //設(shè)置button顏色（把@“#4FAC74”轉(zhuǎn)成UIColor）
    registerButton.backgroundColor = [UIColor colorWithRed:79/255.f green:172/255.f blue:116/255.f alpha:1];
    [registerButton setTitle:@"REGISTER" forState:UIControlStateNormal];
    
    //設(shè)置button的圓角效果
    registerButton.layer.cornerRadius = registerButton.frame.size.height/8;
    registerButton.imageView.layer.masksToBounds = YES;
    
    [buttonImage addSubview:registerButton];
    
    //button下面添加一段一段文字
    UILabel *loginLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 250, 20)];//寬高
    loginLabel.center = CGPointMake([[UIScreen mainScreen] bounds].size.width/2, 65);//x、y軸
    loginLabel.text = @"Already have an account?Login here";//文本
    loginLabel.textColor = [UIColor whiteColor];//字體顏色
    loginLabel.font = [UIFont boldSystemFontOfSize:22];//加粗，字體22
    loginLabel.adjustsFontSizeToFitWidth = YES;//自適應(yīng)lable寬度
    [buttonImage addSubview:loginLabel];//添加到視圖
    
    

    //讓“Login here”變成綠色
    NSMutableAttributedString *customStr = [[NSMutableAttributedString alloc]initWithString:loginLabel.text];//調(diào)用NSMutableAttributedString屬性（自定義字符串）
    [customStr addAttribute:NSForegroundColorAttributeName value:[UIColor colorWithRed:79/255.f green:172/255.f blue:116/255.f alpha:1] range:NSMakeRange(24,loginLabel.text.length-24)];//設(shè)置顏色和要變色的部分
    loginLabel.attributedText = customStr;//將自定義的字符串傳給LoginLabel

    
    return buttonImage;
}


//cell的內(nèi)容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    //創(chuàng)建cell，標(biāo)識(shí)符為：myCell，類型為：UITableViewCellStyleDefault
    UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"myCell"];
    
    //讓cell背景透明
    cell.backgroundColor = [UIColor clearColor];
    
    //讓cell的字體為白色
    cell.textLabel.textColor = [UIColor whiteColor];
    //cell的字體和大小
    cell.textLabel.font = [UIFont fontWithName:@"Helvetica" size:18];

    
    if (indexPath.section == 0) {
        if (indexPath.row == 0) {//名
            //設(shè)置圖標(biāo)和文字內(nèi)容
            cell.imageView.image = [UIImage imageNamed:@"firstName"];
            cell.textLabel.text = @"Your First Name";
            
        }else if (indexPath.row == 1){//姓
            cell.imageView.image = [UIImage imageNamed:@"lastName"];
            cell.textLabel.text = @"Your Last Name";
            
        }else if (indexPath.row == 2){//昵稱
            cell.imageView.image = [UIImage imageNamed:@"userName"];
            cell.textLabel.text = @"Your User Name";
            
        }else if (indexPath.row == 3){//密碼
            cell.imageView.image = [UIImage imageNamed:@"password"];
            cell.textLabel.text = @"Create Your Password";
            
        }else if (indexPath.row == 4){//確認(rèn)密碼
            cell.imageView.image = [UIImage imageNamed:@"password"];
            cell.textLabel.text = @"Re-enter Your Password";
            
        }else if (indexPath.row == 5){//郵箱
            cell.imageView.image = [UIImage imageNamed:@"email"];
            cell.textLabel.text = @"Enter Your Email";
        }
    }
    
    return cell;
}
@end

下一篇，自動(dòng)布局（（AutoLayout）的"深入"學(xué)習(xí)，加油!

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容