zoukankan      html  css  js  c++  java
  • [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(@" QQ number is %@; QQ passworld is %@",self.qqNum.text,self.qqPassWord.text);

         2、退出键盘

            键盘是由文本框在编辑的时候进行调出的,按键关闭遵循谁调出谁关闭的原则,取消第一响应者就可以将键盘退出。

              // 退出键盘的第一种方式,取消第一响应者。

              [self.qqNum resignFirstResponder];

              [self.qqPassWord resignFirstResponder];

             

            第二种方式用view的 endEditing:方法

              // 退出键盘的第二种方式。

              [self.view endEditing:YES];

           相应事件代码完成,然后跟界面进行连线,整个功能完成,全部代码如下:

     1 //
     2 //  ViewController.m
     3 //  01-qq登陆
     4 //
     5 //  Created by zhaoli on 15/8/8.
     6 //  Copyright (c) 2015年 hello. All rights reserved.
     7 //
     8 
     9 #import "ViewController.h"
    10 
    11 @interface ViewController ()
    12 
    13 @property (weak, nonatomic) IBOutlet UITextField *qqNum;
    14 @property (weak, nonatomic) IBOutlet UITextField *qqPassWord;
    15 
    16 - (IBAction)login;
    17 
    18 @end
    19 
    20 @implementation ViewController
    21 
    22 - (void)viewDidLoad {
    23     [super viewDidLoad];
    24     // Do any additional setup after loading the view, typically from a nib.
    25 }
    26 
    27 - (void)didReceiveMemoryWarning {
    28     [super didReceiveMemoryWarning];
    29     // Dispose of any resources that can be recreated.
    30 }
    31 
    32 /** 登陆*/
    33 - (IBAction)login {
    34     // print qqNumber and qq password
    35     NSLog(@"
     QQ number is %@; 
     QQ passworld is %@",self.qqNum.text,self.qqPassWord.text);
    36     
    37     
    38     // 退出键盘的第一种方式,取消第一响应者。
    39     [self.qqNum resignFirstResponder];
    40     [self.qqPassWord resignFirstResponder];
    41     
    42     // 退出键盘的第二种方式。
    43     [self.view endEditing:YES];
    44 }
    45 @end

         

                                                                           

  • 相关阅读:
    如何利用好chrome控制台这个神器好好调试javascript代码
    关于前端学习和笔试面试的总结
    当推荐算法开源包多如牛毛,为什么我们还要专门的推荐算法工程师
    关键词匹配项目深入研究(二)- 分表思想的引入
    PHP如何快速读取大文件
    整理了一些有用的网址,不喜勿喷
    Chrome控制台 JS调试的一些小技巧
    安装最新版本的PHPUnit后,不能使用
    PHP API接口测试小工具
    PHP Log时时查看小工具
  • 原文地址:https://www.cnblogs.com/zhaoli/p/4712850.html
Copyright © 2011-2022 走看看