【目标】

  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登陆界面]的更多相关文章

  1. [iOS基础控件 - 3.1] QQ登陆界面

      A.storyboard 控件版 1.label 2.textfield      a.Keyboard Type           账号:Number Pad           密码:Num ...

  2. Qt 之 模仿 QQ登陆界面——样式篇

    一.简述 今天晚上花了半天时间从QQ登录界面抠了些图,顺便加了点样式基本上实现了QQ的登陆界面全部效果.虽不说100%相似,那也有99.99%相似了哈O(∩_∩)O. QQ好像从去年开始,登录界面有了 ...

  3. WPF和Expression Blend开发实例:模拟QQ登陆界面打开和关闭特效

    不管在消费者的心中腾讯是一个怎么样的模仿者抄袭者的形象,但是腾讯在软件交互上的设计一直是一流的.正如某位已故的知名产品经理所说的:设计并非外观怎样,感觉如何.设计的是产品的工作原理.我觉得腾讯掌握了其 ...

  4. ios swift模仿qq登陆界面,xml布局

    给大家推荐两个学习的地址: 极客学院的视频:http://www.jikexueyuan.com/path/ios/ 一个博客:http://blog.csdn.net/lizhongfu2013/a ...

  5. IOS 开发qq登陆界面

    // //  ViewController.m //  QQUI_bydfg // //  Created by Kevin_dfg on 16/4/15. //  Copyright © 2016年 ...

  6. WPF中做出一个QQ登陆界面

    Xaml: <Window x:Class="ChatSoftware.MainWindow" xmlns="http://schemas.microsoft.co ...

  7. Semantic UI基础使用教程

    自己今后要使用Semantic UI进行项目开发了,一步步的记录下来,供大家参考,也让自己去简单的学习一下,有空了就会更新一点东西,大家有什么问题可以相互交流一下,文采不是很好,希望大家要多多见谅,这 ...

  8. [转]Android:布局实例之模仿QQ登录界面

    Android:布局实例之模仿QQ登录界面 预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件 其对应效果图分布 ...

  9. Android:布局实例之模仿QQ登录界面

    预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件 其对应效果图分布为 4.分析样式选择器 下拉箭头2种样式:点 ...

随机推荐

  1. LeetCode——Single Number II

    Description: Given an array of integers, every element appears three times except for one. Find that ...

  2. 1.执行环境判断 window 或 self

    window or self ? 在 underscore 的判断所处环境的代码中,似乎我们没有看到 window 对象的引用,其实,在浏览器环境下,self 保存的就是当前 window 对象的引用 ...

  3. 【BZOJ1854】[Scoi2010]游戏 二分图最大匹配

    [BZOJ1854][Scoi2010]游戏 Description lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当 ...

  4. npm安装出错的时候,如何使用国内的镜像!--解决办法

    在前端开发领域,Node已经很普遍了,使用Node就会使用到一些包.所以常用的 npm 就会经常使用得到,但是在使用 npm 安装一些包的过程中,会发现安装的速度会很慢,而且很多时候直接安装不了. 百 ...

  5. BFS+状态压缩DP+二分枚举+TSP

    http://acm.hdu.edu.cn/showproblem.php?pid=3681 Prison Break Time Limit: 5000/2000 MS (Java/Others)   ...

  6. 【JavaScript算法】---快速排序法

    一.快速排序法概念 我们将一个杂乱无章的数组进行一个快速排序,可以先从一个数组中取一个中间值,将一个数组一分为2,左边的数组跟中间值进行比较,小的放在左边,大的放在右边.比较完毕后再次取中间值,再次比 ...

  7. mysql-sql高级应用

    sql语言进阶 典型操作 order by - select * from play_list order by createtime; - select * from play_list order ...

  8. Hadoop生态上几个技术的解释:hive、pig、hbase 关系与区别

    hadoop生态圈 Pig 一种操作hadoop的轻量级脚本语言,最初又雅虎公司推出,不过现在正在走下坡路了.当初雅虎自己慢慢退出pig的维护之后将它开源贡献到开源社区由所有爱好者来维护.不过现在还是 ...

  9. 奇怪的Visual Studio 2013停止响应问题

    昨天开始遭遇这个问题,今天再次遭遇. 疑似问题发生在写代码的窗口中复制/粘贴时(有待进一步确认触发条件),突然停止响应,出现下面的对话框: 对话框中的文字为: Waiting for a requir ...

  10. nginx简介和配置gd

    转自:https://www.cnblogs.com/zhouxinfei/p/7862285.html nginx概述 nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器:同时也 ...