IOS项目实战-登录解析

用户登录，一般是所有程序都有的基础功能，在IOS中的登录页面用到了哪些控件，怎么布局才能提高用户体验。

在做这个Demo前，参考并分析了其它应用的登录特点，主流的应用都是通过UITableView来设置布局，整体页面也比较简单，但是非常实用，就像下面的这个登录

分析上面的登录窗口，可以发现是什么控件来布局的

红色：UINavigation

黄色：UIBarButtonItem

紫色：UILable

蓝色：UITableView,UITableViewCell

黑色：UITextField

知道了整个登陆的布面，接着就是怎么样实现这种布局的形式了。

1、头布导航

因为是在启动时就直接到登录页面，所以在AppDelegate中就加入了UINavigationController来管理导航

self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil];
    self.rootController = [[UINavigationController alloc] initWithRootViewController:self.viewController];
    self.window.rootViewController = self.rootController;

在登录的窗口里，设置导航的title为登陆，并且用到了第二个控件UIBarButtonItem，在登录View中viewDidLoad添加代码

创建了一个right的登录按钮，并且绑定事件为doLogin

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"登陆" style:UIBarButtonItemStylePlain target:self action:@selector(doLogin)];

2、主体部分

在主体部分中，大部分都是对UITableView和UItabViewCell的操作，首先在viewDidLoad添加一个tableView

UITableView *loginView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, 480) style:UITableViewStyleGrouped];
loginView.delegate = self;
loginView.dataSource = self;
loginView.scrollEnabled = NO;
loginView.backgroundView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
[self.view addSubview:loginView];

在代码中，创建了一个UITableView，并设置了tableView的委托，数据源，并且设置了背景为空白，还有scrollEnabled=NO，锁定为不能滚动，最后添加到self.view中，创建好了tableView，现在需要实现成图片中看到的样子。

先分析分析，看这个tableView都设置了哪些东西

1：这是一个样式为Grouped的tableView

     这个在viewDidLoad中已经实现了。

2：tableView共有三行，并且被分为了2组，第一组2行，第二组1行

     设置一个只有3行，并且分为2组的tableView代码

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 2;  // 返回2组
}

- (NSInteger)tableView:(UITableView *)tv numberOfRowsInSection:(NSInteger)section
{
    if (section == 0)  // 等于0，返回第一组，2行
        return 2;
    else
        return 1;  // 等于1，返回第二组，1行
}

3：在第一组的cell，没有title,第二组cell中多了一个title

// 设置tableview第二栏头文字内容
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    if (section == 1)
        return @"忘记密码？请点击这里>";
    return nil;
}

// 设置tableview第二栏头的高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    if (section == 1)
        return 20;
    return 0;
}

4:  第一组的2行，不能点击，第二组中的cell可以击，并转到注册页面

     设置第一组的cell不能点击，是在另一个方法中设置了cell.selectionStyle = UITableViewCellSelectionStyleNone  也就是      生成cell的方法，设置点击的方法     

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 用户点击tableview第二栏，第一行的时候
    if (indexPath.section == 1 && [indexPath row] == 0)
    {
        [self doRegister];
    }
}

5：设置登录框内容

// 设置登录框
- (UITableViewCell *)tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellWithIdentifier = @"loginCell";
    UITableViewCell *cell = [tv dequeueReusableCellWithIdentifier:CellWithIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellWithIdentifier];
    }
    if (indexPath.section == 0) {  // 设置第一组的登录框内容
        switch ([indexPath row]) {
            case 0:
                cell.textLabel.text = @"账号"; // 设置label的文字
                cell.selectionStyle = UITableViewCellSelectionStyleNone; // 设置不能点击
                self.nameField = [[UITextField alloc] initWithFrame:CGRectMake(60, 7, 230, 30)];
                [self.nameField setBorderStyle:UITextBorderStyleNone]; //外框类型
                self.nameField.placeholder = @"请输入账号";
                self.nameField.clearButtonMode = YES; // 设置清除输入文本
                self.nameField.returnKeyType = UIReturnKeyNext;
                [cell.contentView addSubview:self.nameField];
                break;
            default:
                cell.textLabel.text = @"密码";
                cell.selectionStyle = UITableViewCellSelectionStyleNone;
                self.pwdField = [[UITextField alloc] initWithFrame:CGRectMake(60, 7, 230, 30)];
                [self.pwdField setBorderStyle:UITextBorderStyleNone]; //外框类型
                self.pwdField.placeholder = @"请输入密码";
                self.pwdField.clearButtonMode = YES;
                self.pwdField.returnKeyType = UIReturnKeyDone;
                [cell.contentView addSubview:self.pwdField];
                break;
        }
    } else {  // 设置第二组注册框内容
        cell.textLabel.text = @"赶快去注册吧！";
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; // 设置向>箭头
    }
    return cell;
}

到此，登录框的所有布局内容都搞定了，但是在实际中，根据UI的设计，所用到的布局控件也会不一样，在这个Demo中，还有很细节的地方要改，因为本人也是新手，所以就不班门弄斧了，大牛到此看到不对的地方，还望评论指出。

demo下载：http://download.csdn.net/detail/qq5306546/4855824