IOS项目实战-登录解析

最新推荐文章于 2024-09-07 11:43:45 发布

iShareStudio

最新推荐文章于 2024-09-07 11:43:45 发布

阅读量1k

点赞数

想转个以项目导向的系列教程，先来个最简单的。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

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

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

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

红色：UINavigation

黄色：UIBarButtonItem

紫色：UILable

蓝色：UITableView,UITableViewCell

黑色：UITextField

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

1、头布导航

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

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

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

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

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

2、主体部分

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

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

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

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

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

这个在viewDidLoad中已经实现了。

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

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

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

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

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

 
    01// 设置tableview第二栏头文字内容
 
    02- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
 
    03{
 
    04    if (section == 1)
 
    05        return @"忘记密码？请点击这里>";
 
    06    return nil;
 
    07}
 
    08 
 
    09// 设置tableview第二栏头的高度
 
    10- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
 
    11{
 
    12    if (section == 1)
 
    13        return 20;
 
    14    return 0;
 
    15}

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

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

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

5：设置登录框内容

 
    01// 设置<span>登录</span>框
 
    02- (UITableViewCell *)tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)indexPath
 
    03{
 
    04    static NSString *CellWithIdentifier = @"loginCell";
 
    05    UITableViewCell *cell = [tv dequeueReusableCellWithIdentifier:CellWithIdentifier];
 
    06    if (cell == nil) {
 
    07        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellWithIdentifier];
 
    08    }
 
    09    if (indexPath.section == 0) {  // 设置第一组的<span>登录</span>框内容
 
    10        switch ([indexPath row]) {
 
    11            case 0:
 
    12                cell.textLabel.text = @"账号"; // 设置label的文字
 
    13                cell.selectionStyle = UITableViewCellSelectionStyleNone; // 设置不能点击
 
    14                self.nameField = [[UITextField alloc] initWithFrame:CGRectMake(60, 7, 230, 30)];
 
    15                [self.nameField setBorderStyle:UITextBorderStyleNone]; //外框类型
 
    16                self.nameField.placeholder = @"请输入账号";
 
    17                self.nameField.clearButtonMode = YES; // 设置清除输入文本
 
    18                self.nameField.returnKeyType = UIReturnKeyNext;
 
    19                [cell.contentView addSubview:self.nameField];
 
    20                break;
 
    21            default:
 
    22                cell.textLabel.text = @"密码";
 
    23                cell.selectionStyle = UITableViewCellSelectionStyleNone;
 
    24                self.pwdField = [[UITextField alloc] initWithFrame:CGRectMake(60, 7, 230, 30)];
 
    25                [self.pwdField setBorderStyle:UITextBorderStyleNone]; //外框类型
 
    26                self.pwdField.placeholder = @"请输入密码";
 
    27                self.pwdField.clearButtonMode = YES;
 
    28                self.pwdField.returnKeyType = UIReturnKeyDone;
 
    29                [cell.contentView addSubview:self.pwdField];
 
    30                break;
 
    31        }
 
    32    }  else {  // 设置第二组注册框内容
 
    33        cell.textLabel.text = @"赶快去注册吧！";
 
    34        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; // 设置向>箭头
 
    35    }
 
    36    return cell;
 
    37}