IOS开发---菜鸟学习之路--（四）-登陆界面

本篇的内容其实大家 参照橘子的那本开发的书的话  上面讲解的是更详细的 一些实现.

我这边唯一的区别就是 做了网络数据的获取 以及 验证成功后 进行界面的跳转..

第四篇了 本篇主讲登陆模块

首先先放效果图

图一

图二

图三

首先整体效果如图一所示

2个uilabel

2个textfield　

1个Button 按钮

实现功能的话有以下几点

1.其中输入账号后点击 NEXT 跳到 密码框.

2.点击密码输入框 显示DONE 点击done的话 直接进行登陆验证

3.点击背景 将 键盘隐藏

4.点击 登陆按钮 进行登陆 验证 

首先先新建一个项目.如下图,选择单一视图项目

然后 将对应的控件拖拽到对应的位置.并修改文字描述

排成图一的样子

控件的细节属性我就不做介绍了,选择对应的Textfield控件 分别在 Placeholder中输入"请输入账号" 和"请输入密码" 该属性就是 在文本输入框没有输入内容时显示的数据

完成后的效果如下

还有个两个属性分别是return key 和Secure  

修改return key的话就是修改 键盘上的结束键.这个大家可以修改下看看就知道了

然后是Secure属性.该属性就是常见的密码选项.选择了后 输入的内容就会显示为****** 所以在密码的Textfield  的属性中需要选择该属性

.xib文件暂时就修改这么多了. 

然后是.h文件 .还是一样的 直接上代码

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    UIButton *loginButton;
    UITextField *pwdTextField;
    UITextField *uidTextField;
}
@property(nonatomic,retain) IBOutlet UIButton *loginButton;
@property(nonatomic,retain) IBOutlet UITextField *uidTextField;
@property(nonatomic,retain) IBOutlet UITextField *pwdTextField;

-(IBAction)loginButtonPressed:(id)sender;
-(IBAction)backgroundTap:(id)sender;
-(IBAction)uidDidEndOnExit:(id)sender;
-(void)initNav:(NSString *)pid;
@end

这边我分别定义了三个属性和4个方法 

loginButton  pwdTextField  uidTextField  

这三个就分别对应着我们 的 登陆按钮 . 密码输入框和账号输入框三个稍后会讲怎么样形成关联

然后是4个方法分别用来处理  登陆按钮点击事件, 背景点击事件 , 账号输入完成事件,以及登陆成功后界面切换事件  initNav

然后回到XIB文件

按住CTRL键同时左键点击 然后移动鼠标,会出现一条蓝色的线. 将蓝色的线连接到 账号输入框上

便会出现刚刚在.H文件中的属性.然后选择与之相对应的 属性 ,就完成了连接了(这边是QQ截图的  有点暗可能看步清楚.不过大家试下就知道了)

然后用同样的方法 分别连接 密码输入框和按钮. 就完成了连接

接下来我们选择 账号输入框 在右边属性栏选择事件 

选择Did End on Exit 点击右边的小圆圈 同样的拉动话,会出现一条蓝线,然后 拖拽到左边的 

然后选择uidDidEndOnExit事件,

用同样的方法 分别将密码输入 的Did End on Exit事件连接到 loginButtonPressed

登陆按钮的Touch up inside 事件连接到loginButtonPressed

这样的话 我们就将 对应的事件绑定到对应的控件上面了 

最后还有一个点击背景的事件这边有点复杂

首先需要选择 背景

然后找到属性中的class 将其修改为UIControl  否则的话 他是没有对应的点击事件的

然后同样的 选择 tuochdown 事件 连接到 

backgroundTap 事件上去

最后进入.m文件实现具体的 操作

好了直接上代码

//点击背景隐藏输入框
-(IBAction)backgroundTap:(id)sender
{
    [pwdTextField resignFirstResponder];
    [uidTextField resignFirstResponder];
    
}
-(IBAction)uidDidEndOnExit:(id)sender{
    [pwdTextField  becomeFirstResponder];
}

这个方法 分别是 移除对应的焦点,以及使某个控件成为焦点 ..就实现了 点击背景 .隐藏键盘 以及点击NEXT 跳转到 密码输入框的功能

然后就是我们的重点了 

longinbutton点击事件

-(void)loginButtonPressed:(id)sender{

    GetWebInfo *getwebinfo=[GetWebInfo alloc];
    NSString *myparameters=[[NSString alloc] initWithString:[NSString stringWithFormat:@"&Method=Login&uid=%@&pwd=%@",uidTextField.text,pwdTextField.text]];
    getwebinfo.parameters=myparameters;
    NSString *webReturnMessage=[getwebinfo dogetWebInfo];
    NSData* jsonData=[webReturnMessage dataUsingEncoding:NSUTF8StringEncoding];
    NSArray *keys =   [NSJSONSerialization
                       JSONObjectWithData:jsonData
                       options:NSJSONReadingMutableContainers
                       error:nil];
    NSString *result=[keys valueForKey:@"Result"];
    if([result isEqual:@"False"])
    {
        UIAlertView *alert=[[UIAlertView alloc] initWithTitle:@"登陆失败" message:@"密码错误或者网络连接失败" delegate:self
                                            cancelButtonTitle:@"确定" otherButtonTitles: nil];
        [alert show];
    }
    else{

        [self initNav:[[keys valueForKey:@"Data"] valueForKey:@"ID"]];
    
    }

 }

首先是利用我们前两篇建的GETWEBINFO 类来获取数据

然后判断是否登录成功

如果登录成功就调用initNav方法 并传递数据过去.否则就提示密码输入错误

最后要讲的就是 initNav 方法了 .initNav方法主要就是实现登录后的页面跳转..以前刚学的时候在这里纠结了好久 好了直接上代码吧.

这边我们首先要新建两个 UIViewController 分别命名为A和B 吧

-(void)initSmallP:(NSString *)pid
{
    AViewController *aViewController =[[AViewController alloc]initWithNibName:@"AViewController" bundle:nil];
    BViewController *bViewController = [[BViewController alloc]initWithNibName:@"BViewController" bundle:nil] ;
    UINavigationController *aNavController=[[UINavigationController alloc]initWithRootViewController:aViewController];
 　　UINavigationController *bNavController=[[UINavigationController alloc] initWithRootViewController:bViewController]; 
　　UITabBarController *tabController=[[UITabBarController alloc] init];
　　 [tabController setViewControllers:[NSMutableArray arrayWithObjects:aNavController,bNavController,nil]]; 
　　AppDelegate * app = (AppDelegate*)[[UIApplication sharedApplication] delegate] ;
　　 [app.window setRootViewController:tabController];
 }

然后就完成了 

代码的意思呢.就是我们首先 实例化两个  视图,然后 创建两个导航控制器.

最后添加到 一个tabbarcontroller里面

最后将程序的 rootviewcontroller 设置成tabbarcontroller 就完成了就完成了.

因为手头没有资源.所以就把以前做好的登陆后的效果图贴在下面了

不过我们接下来也要实现以下的效果  

接下来的内容主要是围绕着UITableView 来讲解的  

大家如果熟练的掌握了 UITABLEVIEW的话 基本上就能完成一个简单的基本项目了

PS:同样的再次声明,本文为本人随意所写(看着肯定感觉怪怪的乱七八糟的..非常不好意思对不起观众了.)

另外如果有错请莫怪楼主误人子弟..也请及时指出,好让本人修改..