[UI基础][QQ登陆界面]
【目标】
1、QQ号码文本框要有“请输入QQ号码”的提示(用户输入时会自动消失)
2、QQ密码文本框要有“请输入QQ密码”的提示(用户输入文字会自动消失)
3、QQ号码文本框只能输入数字
4、QQ密码文本框内容必须是暗文显示
5、点击登陆按钮后把QQ密码和QQ号码打印到控制台,退出键盘
【实现】
1、完成界面搭建
这个界面比较简单,需要在storyboard上搭建
1、 2个Label
“QQ号码” 和 “QQ密码”
2、 1个Button
“登陆”
3、 2个TextField
QQ密码输入和QQ号码输入
搭建完成如下
2、设置属性
1、键盘属性
a> QQ号码只能是数字键盘,设置QQ号码文本框的属性 KeyBoard Type 为 Number Pad.
b> QQ密码即可输入字符又可输入数字,设置其属性 KeyBoard Type 为 AsccII Capable.
2、文本提示
a> QQ号码文本框提示“请输入QQ号码”,设置其属性 PlaceHolder 为“请输入QQ号码”
b> QQ密码文本框提示“请输入QQ密码”,设置其属性 PlaceHolder 为“请输入QQ密码”
3、QQ密码暗文
暗文属性只要使能 Secure Text Entry 属性即可.
前四项功能只需要通过设置控件的属性就可以完成相应的功能,在这里可以增加一个功能就是clear button。
设置文本框的clear button 属性 为 Appears while eding 那么就可以在输入内容是显示一个clear button,一键
清除刚刚输入的文本内容。下图就完成的界面搭建,可以看到在输入框里输入内容的时候出现了clear button,这个
时候点击clear button会删除文本框里的所有数据。
3、监听按键
按下登陆按钮时需要进行两个操作,那么我们需要对登陆按钮进行监听,并且写出按键事件产生对应的handler
1> 输出文本框的内容到控制台
2> 退出键盘
1、输出文本框的内容到控制台
我们要输出文本框的内容到控制台那么首先要获取到文本框的内容,那么需要两个属性属性 qqNum 和 qqPassWord。
通过这两个属性来获取文本内容并打印到控制台:
NSLog(@"\n QQ number is %@; \n QQ passworld is %@",self.qqNum.text,self.qqPassWord.text);
2、退出键盘
键盘是由文本框在编辑的时候进行调出的,按键关闭遵循谁调出谁关闭的原则,取消第一响应者就可以将键盘退出。
// 退出键盘的第一种方式,取消第一响应者。
[self.qqNum resignFirstResponder];
[self.qqPassWord resignFirstResponder];
第二种方式用view的 endEditing:方法
// 退出键盘的第二种方式。
[self.view endEditing:YES];
相应事件代码完成,然后跟界面进行连线,整个功能完成,全部代码如下:
//
// ViewController.m
// 01-qq登陆
//
// Created by zhaoli on 15/8/8.
// Copyright (c) 2015年 hello. All rights reserved.
// #import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UITextField *qqNum;
@property (weak, nonatomic) IBOutlet UITextField *qqPassWord; - (IBAction)login; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
} - (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
} /** 登陆*/
- (IBAction)login {
// print qqNumber and qq password
NSLog(@"\n QQ number is %@; \n QQ passworld is %@",self.qqNum.text,self.qqPassWord.text); // 退出键盘的第一种方式,取消第一响应者。
[self.qqNum resignFirstResponder];
[self.qqPassWord resignFirstResponder]; // 退出键盘的第二种方式。
[self.view endEditing:YES];
}
@end
[UI基础][QQ登陆界面]的更多相关文章
- [iOS基础控件 - 3.1] QQ登陆界面
A.storyboard 控件版 1.label 2.textfield a.Keyboard Type 账号:Number Pad 密码:Num ...
- Qt 之 模仿 QQ登陆界面——样式篇
一.简述 今天晚上花了半天时间从QQ登录界面抠了些图,顺便加了点样式基本上实现了QQ的登陆界面全部效果.虽不说100%相似,那也有99.99%相似了哈O(∩_∩)O. QQ好像从去年开始,登录界面有了 ...
- WPF和Expression Blend开发实例:模拟QQ登陆界面打开和关闭特效
不管在消费者的心中腾讯是一个怎么样的模仿者抄袭者的形象,但是腾讯在软件交互上的设计一直是一流的.正如某位已故的知名产品经理所说的:设计并非外观怎样,感觉如何.设计的是产品的工作原理.我觉得腾讯掌握了其 ...
- ios swift模仿qq登陆界面,xml布局
给大家推荐两个学习的地址: 极客学院的视频:http://www.jikexueyuan.com/path/ios/ 一个博客:http://blog.csdn.net/lizhongfu2013/a ...
- IOS 开发qq登陆界面
// // ViewController.m // QQUI_bydfg // // Created by Kevin_dfg on 16/4/15. // Copyright © 2016年 ...
- WPF中做出一个QQ登陆界面
Xaml: <Window x:Class="ChatSoftware.MainWindow" xmlns="http://schemas.microsoft.co ...
- Semantic UI基础使用教程
自己今后要使用Semantic UI进行项目开发了,一步步的记录下来,供大家参考,也让自己去简单的学习一下,有空了就会更新一点东西,大家有什么问题可以相互交流一下,文采不是很好,希望大家要多多见谅,这 ...
- [转]Android:布局实例之模仿QQ登录界面
Android:布局实例之模仿QQ登录界面 预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件 其对应效果图分布 ...
- Android:布局实例之模仿QQ登录界面
预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件 其对应效果图分布为 4.分析样式选择器 下拉箭头2种样式:点 ...
随机推荐
- Shell主要逻辑源码级分析 (2)——SHELL作业控制
版权声明:本文由李航原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/110 来源:腾云阁 https://www.qclou ...
- bigpipe&bigrender
bigpipe: 先输出页面的整体布局,在按块输出输出页面的每个部分.这样可以让服务器的运算.网络的传输和浏览器的渲染并行.适用于服务器运算较慢的时候. bigrender: 主要在浏览器端,先将字符 ...
- 【node】------websocket------【巷子】
001.学习地址 https://github.com/websockets/ws 002.server.js //引入ws第三方模块 const WebSocket = require('ws'); ...
- Session的存储原理
一.session是怎么存储,提取的? 1.在服务器端有一个session池,用来存储每个用户提交session中的数据,Session对于每一个客户端(或者说浏览器实例)是“人手一份”,用户首次与W ...
- Ubbeditor的使用
简单介绍: 作为一种放在客户端文本编辑器,此时不能支持将JS.Html代码直接发送给服务器,这样将会给服务器带来极大的危险,比如UMEditor(富文本编辑器),它的使用需要关闭服务器端的代码检查的, ...
- pta 天梯地图 (Dijkstra)
本题要求你实现一个天梯赛专属在线地图,队员输入自己学校所在地和赛场地点后,该地图应该推荐两条路线:一条是最快到达路线:一条是最短距离的路线.题目保证对任意的查询请求,地图上都至少存在一条可达路线. 输 ...
- oracle Bug 4287115(ora-12083)
今天公司开发在删除表时报错ora-12083,很是疑惑,数据字典记录的是表,而删除要用物化视图方式删除,如下: SQL> DROP TABLE CODE_M_AGENCY;DROP TABLE ...
- Tomcat 系统架构
https://www.ibm.com/developerworks/cn/java/j-lo-tomcat1/index.html 2010 年 5 月 20 日发布 本文以 Tomcat 5 为基 ...
- 系统中同时有 python2和 python3,怎么让 ipython 选择不同的版本启动?
已经安装的情况下: > which ipython /usr/local/bin/ipython > cat /usr/local/bin/ipython #!/usr/local/op ...
- Jury Compromise---poj1015(动态规划,dp,)
题目链接:http://poj.org/problem?id=1015 大致题意: 在遥远的国家佛罗布尼亚,嫌犯是否有罪,须由陪审团决定.陪审团是由法官从公众中挑选的.先随机挑选n 个人作为陪审团的候 ...