• [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

         

                                                                           

  • 相关阅读:
    Python3.4的Pillow库实现验证码图片
    希尔排序
    二分法排序
    [算法天天练]选择排序
    冒泡 [Python]
    python -- 结构数据类型(列表、元组、集合、字典)
    python -- 字符串操作
    python -- 基础语法
    python -- 环境搭建
    Unittest方法 -- 以test开头实例
  • 原文地址:https://www.cnblogs.com/zhaoli/p/4712850.html
Copyright © 2020-2023  润新知