文档章节

注册或登录页面设计

波bo波维奇
 波bo波维奇
发布于 2016/02/29 09:44
字数 2285
阅读 42
收藏 0

一.注册或登录界面

      如下图,实现了一个注册或登录界面,这里先只介绍单个页面,不介绍点击“完成”按钮后的动作,在之后的系列《iOS开发入门总结》中会逐步介绍,等基础知识介绍的差不多了,就可以以一个完整的注册系统作为小结。

     说明:

  1. 这里为了展现UITextField的文本框关联键盘的设置,这里把“密码”和“确定密码”的关联键盘都设置为数字键盘,实际应用中密码一般都允许为数字或字母。

  2. 实现了键盘收回操作。

  3. 这里没有写对“用户名”进行特殊字符过滤的代码。

   实现代码:

 

 View Code

 

 

 

二.UILabel

  UILabel继承了UIView,它可以设置UIView所支持的属性。

复制代码

UILabel *label1 = [[UILabel alloc]initWithFrame:CGRectMake(50.0, 20.0, 200.0, 50.0)];  //设置Label的位置和大小//设置显示文字label1.text = @"用户名";//设置字体:粗体,正常的是 SystemFontOfSizelabel1.font = [UIFont boldSystemFontOfSize:20];//设置文字颜色label1.textColor = [UIColor orangeColor];//设置文字位置label1.textAlignment = UITextAlignmentRight;
label2.textAlignment = UITextAlignmentCenter;//设置字体大小适应label宽度label4.adjustsFontSizeToFitWidth = YES;//设置label的行数label5.numberOfLines = 2;
UIlabel.backgroudColor=[UIColor clearColor]; //可以去掉背景色//设置高亮label6.highlighted = YES;
label6.highlightedTextColor = [UIColor orangeColor];//设置阴影label7.shadowColor = [UIColor redColor];
label7.shadowOffset = CGSizeMake(1.0,1.0);//设置是否能与用户进行交互label7.userInteractionEnabled = YES;//设置label中的文字是否可变,默认值是YESlabel3.enabled = NO;//设置文字过长时的显示格式label3.lineBreakMode = UILineBreakModeMiddleTruncation;//截去中间//  typedef enum {//      UILineBreakModeWordWrap = 0,//      UILineBreakModeCharacterWrap,//      UILineBreakModeClip,//截去多余部分//      UILineBreakModeHeadTruncation,//截去头部//      UILineBreakModeTailTruncation,//截去尾部//      UILineBreakModeMiddleTruncation,//截去中间//  } UILineBreakMode;//如果adjustsFontSizeToFitWidth属性设置为YES,这个属性就来控制文本基线的行为label4.baselineAdjustment = UIBaselineAdjustmentNone;//  typedef enum {//      UIBaselineAdjustmentAlignBaselines,//      UIBaselineAdjustmentAlignCenters,//      UIBaselineAdjustmentNone,//  } UIBaselineAdjustment;

复制代码

  有时需要设置UILabel中文本的行数,其属性值默认为1,用于设置该UILabel只能显示一行文本。

   oldPasswordLabel.numberOfLines = 2;

 

三.UITextField

复制代码

//初始化textfield并设置位置及大小UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, 30)];//当输入框没有内容时,水印提示 ,提示内容为“用户名”//显示灰色字体,作为提示信息text.placeholder = @"用户名";//设置边框样式,只有设置了才会显示边框样式text.borderStyle = UITextBorderStyleRoundedRect;
typedef enum {
    UITextBorderStyleNone,
    UITextBorderStyleLine,
    UITextBorderStyleBezel,
    UITextBorderStyleRoundedRect
} UITextBorderStyle;//设置键盘的样式text.keyboardType = UIKeyboardTypeNumberPad;
typedef enum {
    UIKeyboardTypeDefault,                 //默认键盘,支持所有字符
    UIKeyboardTypeASCIICapable,            //支持ASCII的默认键盘
    UIKeyboardTypeNumbersAndPunctuation,   //标准电话键盘,支持+*#字符
    UIKeyboardTypeURL,                      //URL键盘,支持.com按钮 只支持URL字符
    UIKeyboardTypeNumberPad,               //数字键盘
    UIKeyboardTypePhonePad,               //电话键盘
    UIKeyboardTypeNamePhonePad,            //电话键盘,也支持输入人名
    UIKeyboardTypeEmailAddress,            //用于输入电子 邮件地址的键盘
    UIKeyboardTypeDecimalPad,              //数字键盘 有数字和小数点
    UIKeyboardTypeTwitter,                 //优化的键盘,方便输入@、#字符
    UIKeyboardTypeAlphabet = UIKeyboardTypeASCIICapable,
} UIKeyboardType;//每输入一个字符就变成点 用语密码输入text.secureTextEntry = YES;//设置输入框的背景颜色,此时设置为白色 如果使用了自定义的背景图片边框会被忽略掉text.backgroundColor = [UIColor whiteColor];//设置背景图片text.background = [UIImage imageNamed:@"dd.png"];//设置背景text.disabledBackground = [UIImage imageNamed:@"cc.png"];//设置输入框内容的字体样式和大小text.font = [UIFont fontWithName:@"Arial" size:20.0f];//设置字体颜色text.textColor = [UIColor redColor];//输入框中是否有个叉号,在什么时候显示,用于一次性删除输入框中的内容text.clearButtonMode = UITextFieldViewModeAlways;
typedef enum {
    UITextFieldViewModeNever,           //从不出现
    UITextFieldViewModeWhileEditing,     //编辑时出现
    UITextFieldViewModeUnlessEditing,   //除了编辑外都出现
    UITextFieldViewModeAlways           //一直出现} UITextFieldViewMode;//输入框中一开始就有的文字text.text = @"一开始就在输入框的文字";//是否纠错text.autocorrectionType = UITextAutocorrectionTypeNo;
typedef enum {
    UITextAutocorrectionTypeDefault,    //默认
    UITextAutocorrectionTypeNo,        //不自动纠错
    UITextAutocorrectionTypeYes,       //自动纠错} UITextAutocorrectionType;//再次编辑就清空text.clearsOnBeginEditing = YES;//内容对齐方式text.textAlignment = UITextAlignmentLeft;//内容的垂直对齐方式  UITextField继承自UIControl,此类中有一个属性contentVerticalAlignmenttext.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;//设置为YES时文本会自动缩小以适应文本窗口大小.默认是保持原来大小,而让长文本滚动textFied.adjustsFontSizeToFitWidth = YES;//设置自动缩小显示的最小字体大小text.minimumFontSize = 20;//首字母是否大写text.autocapitalizationType = UITextAutocapitalizationTypeNone;

typedef enum {
    UITextAutocapitalizationTypeNone, 不自动大写
    UITextAutocapitalizationTypeWords, 单词首字母大写
    UITextAutocapitalizationTypeSentences, 句子的首字母大写
    UITextAutocapitalizationTypeAllCharacters, 所有字母都大写
} UITextAutocapitalizationType;//return键变成什么键text.returnKeyType =UIReturnKeyDone;

typedef enum {
    UIReturnKeyDefault,          //默认 灰色按钮,标有Return
    UIReturnKeyGo,               //标有Go的蓝色按钮
    UIReturnKeyGoogle,            //标有Google的蓝色按钮,用语搜索
    UIReturnKeyJoin,              //标有Join的蓝色按钮
    UIReturnKeyNext,              //标有Next的蓝色按钮
    UIReturnKeyRoute,             //标有Route的蓝色按钮
    UIReturnKeySearch,            //标有Search的蓝色按钮
    UIReturnKeySend,              //标有Send的蓝色按钮
    UIReturnKeyYahoo,             //标有Yahoo的蓝色按钮
    UIReturnKeyYahoo,             //标有Yahoo的蓝色按钮
    UIReturnKeyEmergencyCall,     //紧急呼叫按钮} UIReturnKeyType;//键盘外观textView.keyboardAppearance=UIKeyboardAppearanceDefault;
typedef enum {
    UIKeyboardAppearanceDefault,   //默认外观,浅灰色
    UIKeyboardAppearanceAlert,   //深灰 石墨色    } UIReturnKeyType;//设置代理 用于实现协议text.delegate = self;//把textfield加到视图中[self.window addSubview:text];//最右侧加图片是以下代码  左侧类似UIImageView *image=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"right.png"]];
text.rightView=image;
text.rightViewMode = UITextFieldViewModeAlways;
typedef enum {
    UITextFieldViewModeNever,
    UITextFieldViewModeWhileEditing,
    UITextFieldViewModeUnlessEditing,
    UITextFieldViewModeAlways
} UITextFieldViewMode;

复制代码

  在处理密码等隐私类的信息时,可能需要将输入的信息隐藏一下。

//每输入一个字符就变成点 ,用语密码输入[passwordTextField setSecureTextEntry:YES];

  也可以设置文本框关联的键盘,如下:

复制代码

//设置键盘的样式text.keyboardType = UIKeyboardTypeNumberPad;
typedef enum {
    UIKeyboardTypeDefault,                 //默认键盘,支持所有字符
    UIKeyboardTypeASCIICapable,            //支持ASCII的默认键盘
    UIKeyboardTypeNumbersAndPunctuation,   //标准电话键盘,支持+*#字符
    UIKeyboardTypeURL,                      //URL键盘,支持.com按钮 只支持URL字符
    UIKeyboardTypeNumberPad,               //数字键盘
    UIKeyboardTypePhonePad,               //电话键盘
    UIKeyboardTypeNamePhonePad,            //电话键盘,也支持输入人名
    UIKeyboardTypeEmailAddress,            //用于输入电子 邮件地址的键盘
    UIKeyboardTypeDecimalPad,              //数字键盘 有数字和小数点
    UIKeyboardTypeTwitter,                 //优化的键盘,方便输入@、#字符
    UIKeyboardTypeAlphabet = UIKeyboardTypeASCIICapable,
} UIKeyboardType;

复制代码

   有时需要限制输入文本的长度,这类操作也非常普遍和重要。

复制代码

//限制输入文本的长度- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string{    if ([textField.text length] > MAXLENGTH)
    {
        textField.text = [textField.text substringToIndex:MAXLENGTH-1];        return NO;
    }    return YES; 
}

复制代码

 

四.UIButton

复制代码

UIButton *button1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];     //    能够定义的button类型有以下6种,     //    typedef enum {     //        UIButtonTypeCustom = 0,          自定义风格     //        UIButtonTypeRoundedRect,         圆角矩形     //        UIButtonTypeDetailDisclosure,    蓝色小箭头按钮,主要做详细说明用     //        UIButtonTypeInfoLight,           亮色感叹号     //        UIButtonTypeInfoDark,            暗色感叹号     //        UIButtonTypeContactAdd,          十字加号按钮     //    } UIButtonType;         //给定button在view上的位置
         button1.frame = CGRectMake(20, 20, 280, 20);         //button背景色
         button1.backgroundColor = [UIColor clearColor];         //设置button填充图片         //[button1 setImage:[UIImage imageNamed:@"btng.png"] forState:UIControlStateNormal];         //设置button标题
         [button1 setTitle:@"点击" forState:UIControlStateNormal];         /* forState: 这个参数的作用是定义按钮的文字或图片在何种状态下才会显现*/
        //以下是几种状态     //    enum {     //        UIControlStateNormal       = 0,         常规状态显现     //        UIControlStateHighlighted  = 1 << 0,    高亮状态显现     //        UIControlStateDisabled     = 1 << 1,    禁用的状态才会显现     //        UIControlStateSelected     = 1 << 2,    选中状态     //        UIControlStateApplication  = 0x00FF0000, 当应用程序标志时     //        UIControlStateReserved     = 0xFF000000  为内部框架预留,可以不管他     //    };

         /*
                   * 默认情况下,当按钮高亮的情况下,图像的颜色会被画深一点,如果这下面的这个属性设置为no,
                   * 那么可以去掉这个功能                  */
         button1.adjustsImageWhenHighlighted = NO;         /*跟上面的情况一样,默认情况下,当按钮禁用的时候,图像会被画得深一点,设置NO可以取消设置*/
         button1.adjustsImageWhenDisabled = NO;         /* 下面的这个属性设置为yes的状态下,按钮按下会发光*/
         button1.showsTouchWhenHighlighted = YES;         /* 给button添加事件,事件有很多种,我会单独开一篇博文介绍它们,下面这个时间的意思是
                   按下按钮,并且手指离开屏幕的时候触发这个事件,跟web中的click事件一样。
                   触发了这个事件以后,执行butClick:这个方法,addTarget:self 的意思是说,这个方法在本类中
                   也可以传入其他类的指针*/
         [button1 addTarget:self action:@selector(butClick:) forControlEvents:UIControlEventTouchUpInside];         //显示控件
         [self.view addSubview:button1];

复制代码

  单独说明一下:

复制代码

    UIButton *confirmButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    confirmButton.frame = CGRectMake(110, 60+40*3+20, 100, 37);
    [confirmButton setTitle:@"确定" forState:UIControlStateNormal];       //正常状况下button显示的标题
    [confirmButton setTitle:@"确定" forState:UIControlStateHighlighted];  //高亮显示时button的标题
    confirmButton.backgroundColor = [UIColor redColor];
    [confirmButton addTarget:self action:@selector(confirm:) forControlEvents:UIControlEventTouchUpInside];//button被按下又抬起后发生的事件    //@selector可以理解为"选择子",selector是一个指针变量,类似于sender。 这里是将method的方法指定给新建的这个confirmButton
    [self.view addSubview:confirmButton];

复制代码

  若要设置UIButton的背景图片时:

复制代码

    UIButton *confirmButton = [UIButton buttonWithType:UIButtonTypeCustom];
    confirmButton.frame = CGRectMake(10, 60, 100, 40);
    UIImage *nextStepImage = [UIImage imageNamed:@"app.png"];
    UIImage *nextStepDownImage = [UIImage imageNamed:@"app.png"];
    nextStepImage = [nextStepImage resizableImageWithCapInsets:UIEdgeInsetsMake(8, 8, 8, 8)];
    nextStepDownImage = [nextStepDownImage resizableImageWithCapInsets:UIEdgeInsetsMake(8, 8, 8, 8)];
    [confirmButton setBackgroundImage:nextStepImage forState:UIControlStateNormal];
    [confirmButton setBackgroundImage:nextStepDownImage forState:UIControlStateHighlighted];
    [confirmButton setTitle:@"确定" forState:UIControlStateNormal];
    [confirmButton addTarget:self action:@selector(confirm:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:confirmButton];

复制代码


本文转载自:http://www.cnblogs.com/heyonggang/p/3664565.html

共有 人打赏支持
波bo波维奇
粉丝 0
博文 1
码字总数 0
作品 0
张家口
聊一聊登录页设计那些事儿

现在很多的大型网站把登录和首页放在一起设计,由此可见产品登录页面设计的重要性。一个出彩的登录界面,将提升产品的品质,赋予产品独特的气质。登录界面也是一个发挥情感化设计,提升用户体...

mo311
2017/07/04
384
0
【转】帐号注册和登录的八大不良设计

思科公司的网站上不仅出售自家的热门高端网络设备,还向来到网站的人们出售一系列的印有思科标志的休闲服装、饰品等,从风衣到高尔夫球应有尽有。但网站存在一个问题,那就是要浏览这些印有思...

王二铁
2012/01/29
0
0
c#开发电子商务网站---我的笔记

电子商务网站(C#版) 通过一个在线的电子商务网站(网上书店销售系统)的实例,来讲述如何采用ASP.NET 3.5+SQL Server 2010的模式定制一个小型的电子商务平台。系统采用了模块化的设计方法,...

crossmix
2015/12/27
450
0
WebForm-博客园-1.0-账户模块(Passport)-登录与注册

ylbtech-OpenSource:WebForm-博客园-1.0-账户模块(Passport)-登录与注册 大伙闲暇无聊,于是有人建议咱们自己做一个博客园吧! 于是对我们天天使用(甚至朝夕相伴,为啥?大多人想多写几篇好...

吞吞吐吐的
2017/11/07
0
0
PHP开发会员系统

学习PHP很久啦,对PHP语言也熟悉啦,想设计简单的会员系统,内容包括:创建数据库和表、会员注册、会员登录、会员权限设置。涉及到的知识点:md5加密,Cookie/Session创建、使用、销毁等。下...

crossmix
2015/10/05
312
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

咕泡-Factory设计模式笔记

个人感悟: 设计模式都是处理复杂问题的,如果问题本身很简单,使用设计模式反而累赘,增加了开发的复杂性 遇到最简单的情况,直接 new 如果创建对象的过程简单,但是需要匹配不同情况,返回...

职业搬砖20年
16分钟前
0
0
Java中的锁分类

在读很多并发文章中,会提及各种各样锁如公平锁,乐观锁等等,这篇文章介绍各种锁的分类。介绍的内容如下: 公平锁/非公平锁 可重入锁 独享锁/共享锁 互斥锁/读写锁 乐观锁/悲观锁 分段锁 偏...

Funcy1122
24分钟前
0
0
Ansible随机数

想为你的Ansible剧本取一个随机数?还想在接下来的运行中保持系统的等幂性?这里有一个答案。 假如,你要为一大批服务器设置cron任务,却不想让它们同时启动,你可以这样设置分钟数: minute...

大别阿郎
33分钟前
0
0
SpringCloud之服务注册中心Eureka

本系列介绍的配置均基于 Spring Boot 2.0.1.RELEASE 版本和 Spring Cloud Finchley.SR1 服务注册中心 Spring Cloud 已经帮我们实现了服务注册中心,我们只需要很简单的几个步骤就可以完成。 ...

熊小飞呀
今天
7
1
“Comparison method violates ...”异常的再现方法

前提条件:JDK8 代码: import java.util.ArrayList;import java.util.Collections;import java.util.Comparator;import java.util.List;public class Test { public stat......

hunterli
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部