IOS项目实战-登录解析

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

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

用户登录，一般是所有程序都有的基础功能，在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] initWithNibName:@"ViewController" bundle:nil];

3	self.rootController = [[UINavigationController alloc] initWithRootViewController:self.viewController];

4	self.window.rootViewController = self.rootController;

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

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

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

2、主体部分

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

1	UITableView *loginView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, 480) style:UITableViewStyleGrouped];

2	loginView.delegate = self;

3	loginView.dataSource = self;

4	loginView.scrollEnabled = NO;

5	loginView.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

}

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

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

原：http://my.oschina.net/wbei/blog/94389