织梦CMS - 轻松建站从此开始!

罗索实验室

IOS项目实战-登录解析

落鹤生 发布于 2012-12-15 20:59 点击:次 
在做这个Demo前,参考并分析了其它应用的登录特点,主流的应用都是通过UITableView来设置布局,整体页面也比较简单,但是非常实用,就像下面的这个登录。分析登录窗口,可以发现是什么控件来布局的。
TAG:

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

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

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

红色:UINavigation

黄色:UIBarButtonItem

紫色:UILable

蓝色:UITableView,UITableViewCell

黑色:UITextField

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

1、头布导航

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

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

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

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

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

2、主体部分

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

  1. UITableView *loginView = [[UITableView alloc]
  2.  initWithFrame:CGRectMake(0, 0, 320, 480) style:UITableViewStyleGrouped]; 
  3. loginView.delegate = self; 
  4. loginView.dataSource = self; 
  5. loginView.scrollEnabled = NO; 
  6. loginView.backgroundView = [[UIImageView alloc]
  7.  initWithFrame:CGRectMake(0, 0, 320, 480)]; 
  8. [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.     return 2;  // 返回2组 
  1. - (NSInteger)tableView:(UITableView *)tv numberOfRowsInSection:(NSInteger)section 
  2.     if (section == 0)  // 等于0,返回第一组,2行 
  3.         return 2; 
  4.     else 
  5.         return 1;  // 等于1,返回第二组,1行 

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

  1. // 设置tableview第二栏头文字内容 
  2. - (NSString *)tableView:(UITableView *)tableView
  3.  titleForHeaderInSection:(NSInteger)section 
  4.     if (section == 1) 
  5.         return @"忘记密码?请点击这里>"
  6.     return nil; 
  7.  
  8. // 设置tableview第二栏头的高度 
  9. - (CGFloat)tableView:(UITableView *)tableView
  10.  heightForHeaderInSection:(NSInteger)section 
  11.     if (section == 1) 
  12.         return 20; 
  13.     return 0; 

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

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

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

5:设置登录框内容

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

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

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

(qq5306546)
本站文章除注明转载外,均为本站原创或编译欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,同学习共成长。转载请注明:文章转载自:罗索实验室 [http://www1.rosoo.net/a/201212/16426.html]
本文出处:CSDN博客 作者:qq5306546 原文
顶一下
(7)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
将本文分享到微信
织梦二维码生成器
推荐内容