上篇文章中讲到了如何实现一个ViewController上面显示背景图,这次我们继续往下开发。
我们把这个ViewController当作一个splash界面,ios本身其实是自带有这个功能的,个人喜好,我自己写一个自定义的
splash,显示一下qq图片3秒再跳转到下一个ViewController。
要实现等待3秒,可以用到线程,切不可在主线程中直接sleep,不管是android还是ios或是mfc中,在主线程sleep界面就
卡死了。在ViewController中添加线程代码,效果如下。
由于我们现在还没有创建LoginViewController,现在是会报错的。先点工程右键选择cocoa(不懂的看ios语法简介一文),
New File->objective C class->next,然后输入文件名,subclass默认是UIViewController,这是视图,要显示在window上面。
成功之后我们就在ViewController.h里面添加以下代码,要导入LoginViewController头文件及申明
接下来在LoginViewController中实现登录界面上的内容,包括背景、登录头像图片、输入框、按钮及点击事件……
万事开头难,一步一个脚印慢慢实现呗!
首先添加背景图片,和第一篇实现是一样的。代码如下:
然后添加登录头像,在居中显示,我们可以计算坐标。或者有别的方法居中,不过在下菜鸟目前还不知道,嘿嘿……
坐标的计算大家相信都没总是,就是算数字嘛,小学里面都有的。取屏幕宽度也很简单,一句代码的事……
下面添加输入框,这个就有点小厉害了。不管是什么平台,都会有这个方法的实现,图片自动填充。做过Android开发的
朋友知道,用.9的格式图片,然后自动去填充指定的区域进行内容填充,这样就能达到一个非常完美的效果,一张很小的
图片,可以在任意大小的控制正常显示,不会发生变形,这个可以看看iOS图片拉伸技巧这篇文章。
再继续实现输入框背景和输入框,下面代码都有注释特别重要的部分
实现按钮,点击登录的按钮
写到这里,基本上差不多完成了,但是会有一个警告的提示, pwdText.delegate = self;提示类型不正确,为啥呢?因为
这个controller还没有实现系统的委托,只要加一句代码即可,在.h文件中添加,效果如下:
就是它了,,加上直接编译运行,是不是很棒!最后看下效果图
我们把这个ViewController当作一个splash界面,ios本身其实是自带有这个功能的,个人喜好,我自己写一个自定义的
splash,显示一下qq图片3秒再跳转到下一个ViewController。
要实现等待3秒,可以用到线程,切不可在主线程中直接sleep,不管是android还是ios或是mfc中,在主线程sleep界面就
卡死了。在ViewController中添加线程代码,效果如下。
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. UIImageView *imgBg = [[UIImageView alloc]initWithFrame:self.view.frame]; imgBg.image = [UIImage imageNamed:@"splash.jpg"]; [self.view addSubview:imgBg]; NSThread *myThread = [[NSThread alloc]initWithTarget:self selector:@selector(threadFunc) object:nil]; [myThread start]; } -(void)threadFunc { sleep(1);//休眠3秒进入登录界面 self.loginView = [[LoginViewController alloc]init]; [self presentViewController:self.loginView animated:NO completion:nil]; }
由于我们现在还没有创建LoginViewController,现在是会报错的。先点工程右键选择cocoa(不懂的看ios语法简介一文),
New File->objective C class->next,然后输入文件名,subclass默认是UIViewController,这是视图,要显示在window上面。
成功之后我们就在ViewController.h里面添加以下代码,要导入LoginViewController头文件及申明
// // ViewController.h // XQQ // // Created by leehom on 14-11-12. // Copyright (c) 2014年 ___FULLUSERNAME___. All rights reserved. // #import#import "LoginViewController.h" @interface ViewController : UIViewController @property (strong,nonatomic) LoginViewController *loginView; @end // 负责跳转的代码[self presentViewController:self.loginView animated:NO completion:nil];
接下来在LoginViewController中实现登录界面上的内容,包括背景、登录头像图片、输入框、按钮及点击事件……
万事开头难,一步一个脚印慢慢实现呗!
首先添加背景图片,和第一篇实现是一样的。代码如下:
UIImageView *imgBg = [[UIImageView alloc]initWithFrame:self.view.frame]; imgBg.image = [UIImage imageNamed:@"login_bg.jpg"]; [self.view addSubview:imgBg]; CGRect wRect = self.view.frame;
然后添加登录头像,在居中显示,我们可以计算坐标。或者有别的方法居中,不过在下菜鸟目前还不知道,嘿嘿……
坐标的计算大家相信都没总是,就是算数字嘛,小学里面都有的。取屏幕宽度也很简单,一句代码的事……
CGRect wRect = self.view.frame; NSLog(@"%0f,%0f",wRect.size.width,wRect.size.height); //qq头像图标 int x = (int)(wRect.size.width-108)>>1; UIImageView *avatar = [[UIImageView alloc]initWithFrame:CGRectMake(x, 60, 108, 108)]; [avatar setImage:[UIImage imageNamed:@"login_default_avatar.png"]]; [self.view addSubview:avatar];
下面添加输入框,这个就有点小厉害了。不管是什么平台,都会有这个方法的实现,图片自动填充。做过Android开发的
朋友知道,用.9的格式图片,然后自动去填充指定的区域进行内容填充,这样就能达到一个非常完美的效果,一张很小的
图片,可以在任意大小的控制正常显示,不会发生变形,这个可以看看iOS图片拉伸技巧这篇文章。
再继续实现输入框背景和输入框,下面代码都有注释特别重要的部分
//qq用户名输入框 int tw = (int)(wRect.size.width-76); UIImageView *loginBgView = [[UIImageView alloc]initWithFrame:CGRectMake(35, 190, tw, 87)]; { UIImage *imgInput = [UIImage imageNamed:@"login_input.png"]; CGFloat top = 25; // 顶端盖高度 CGFloat bottom = 25 ; // 底端盖高度 CGFloat left = 10; // 左端盖宽度 CGFloat right = 10; // 右端盖宽度 UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right); // 指定为拉伸模式,伸缩后重新赋值 imgInput = [imgInput resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch]; [loginBgView setImage:imgInput]; } [self.view addSubview:loginBgView]; UITextField *nameText = [[UITextField alloc]initWithFrame:CGRectMake(42, 192, tw, 40)]; nameText.placeholder = @"号码";//提示用户文字,相当于android里面的hint [self.view addSubview:nameText]; UIView *line = [[UIView alloc]initWithFrame:CGRectMake(38, 232, tw-6, 1)]; [line setBackgroundColor:[UIColor colorWithRed:0xCC/255.0 green:0xCC/255.0 blue:0xCC/255.0 alpha:1]]; [self.view addSubview:line]; UITextField *pwdText = [[UITextField alloc]initWithFrame:CGRectMake(42, 235, tw, 40)]; pwdText.secureTextEntry = YES;//安全文本选项,yes不显示内容,只显示一个黑色的圆点 pwdText.placeholder = @"密码"; [self.view addSubview:pwdText]; //委托,会自动调用系统实现的(BOOL)textFieldShouldReturn:(UITextField *)textField函数 //可以理解为注册监听,事件通知,和android的addListener类似。
实现按钮,点击登录的按钮
x = (int)(wRect.size.width-162)>>1; UIButton *login = [[UIButton alloc]initWithFrame:CGRectMake(x, 300, 162, 60)]; login.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;//文本内容居中显示 //下面是添加点击事件,事件响应函数为loginEvent,无任何参数,响应的条件是UIControlEventTouchUpInside,就是弹起还在这个按钮所在的区域范围之内有效 [login addTarget:self action:@selector(loginEvent) forControlEvents:UIControlEventTouchUpInside]; { UIImage *imgNor = [UIImage imageNamed:@"login_button_nor.png"]; UIImage *imgPre = [UIImage imageNamed:@"login_button_press.png"]; CGFloat top = 25; // 顶端盖高度 CGFloat bottom = 25 ; // 底端盖高度 CGFloat left = 10; // 左端盖宽度 CGFloat right = 10; // 右端盖宽度 UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right); // 指定为拉伸模式,伸缩后重新赋值 imgNor = [imgNor resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch]; imgPre = [imgPre resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch]; [login setBackgroundImage:imgNor forState:UIControlStateNormal];//设置普通状态图片样式 [login setBackgroundImage:imgPre forState:UIControlStateHighlighted];//设置点击后图片样式 [login setTitle:@"登录" forState:UIControlStateNormal]; [login setTitle:@"登录" forState:UIControlStateHighlighted]; [login setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; } [self.view addSubview:login]; - (BOOL)textFieldShouldReturn:(UITextField *)textField { NSLog(@"%s",textField.text.UTF8String); [textField resignFirstResponder]; return YES; } -(void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex { //NSLog(@"%d",buttonIndex); if(buttonIndex == 0) { NSLog(@"\n点击取消"); //关闭当前view视图 } else if(buttonIndex == 1) { NSLog(@"\n点击确定"); [self dismissViewControllerAnimated:NO completion:nil]; } } -(void)loginEvent { UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"" message:@"登录中" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil]; [alert show]; }
写到这里,基本上差不多完成了,但是会有一个警告的提示, pwdText.delegate = self;提示类型不正确,为啥呢?因为
这个controller还没有实现系统的委托,只要加一句代码即可,在.h文件中添加,效果如下:
// // LoginViewController.h // XQQ // // Created by leehom on 14-11-12. // Copyright (c) 2014年 leehom. All rights reserved. // #import@interface LoginViewController : UIViewController @end
就是它了,,加上直接编译运行,是不是很棒!最后看下效果图
收藏的用户(0) X
正在加载信息~
推荐阅读
最新回复 (0)
站点信息
- 文章2300
- 用户1336
- 访客10861715
每日一句
True success inspires others to act.
真正的成功是激励他人行动。
真正的成功是激励他人行动。
语法错误: 意外的令牌“标识符”
全面理解Gradle - 定义Task
Motrix全能下载工具 (支持 BT / 磁力链 / 百度网盘)
谷歌Pixel正在开始起飞?
获取ElementUI Table排序后的数据
Run-Time Check Failure #0 - The value of ESP was not properly saved across a function call. This is
亲测!虚拟机VirtualBox安装MAC OS 10.12图文教程
华为手机app闪退重启界面清空log日志问题
android ndk开发之asm/page.h: not found
手机屏幕碎了怎么备份操作?
免ROOT实现模拟点击任意位置
新手必看修改DSDT教程
thinkpad t470p装黑苹果系统10.13.2
新会员