iOS开发笔记7:Text、UI交互细节、两个动画效果等,iosui

iOS开发笔记7:Text、UI交互细节、两个动画效果等,iosui

   
 Text主要总结UILabel、UITextField、UITextView、UIMenuController以及UIWebView/WKWebView相关的一些问题。

   
 UI细节主要总结界面交互开发中遇到的一些细节问题,包括Masonry部分的问题。

   
 动画介绍最近用到的两个,算是常用级别的,动画这部分之后会专门研究总结下。

     最后介绍两个工具及三个Xcode使用设置的问题。

   
 Text主要总结UILabel、UITextField、UITextView、UIMenuController以及UIWebView/WKWebView相关的一些问题。

     1.Text

   
 UI细节主要总结界面交互开发中遇到的一些细节问题,包括Masonry部分的问题。

       (1)UILabel显示多行文字并且文字置顶显示

       
 不限制UILabel的高度(宽度需要设置,确定文字何时换行),numberOfLines设为0即可(设为0表示不限制行数)。图片 1 
   

   
 动画介绍最近用到的两个,算是常用级别的,动画这部分之后会专门研究总结下。

       (2)使用NSMutableAttributedString满足个性化的显示要求

       
比如对文字的行间距有要求、一行文字某几个文字的大小、颜色有特殊要求等等,都可以通过NSMutableAttributedString来进行设置。

图片 2图片 3

     最后介绍两个工具及三个Xcode使用设置的问题。

       (3)文字换行模式

        设置lineBreakMode,比如达到换行条件时按单词来换行NSLineBreakByWordWrapping,末尾显示省略号的NSLineBreakByTruncatingTail等。

图片 4图片 5

     1.Text

       (4)textField的clearButtonMode、placeholder、keyboardType、tintColor、tag、secureTextEntry典型应用场景

       
 clearButtonMode,设置一键清空按钮显示模式,一般是在编辑状态下才显示该按钮 图片 6图片 7

        placeholder/attributedPlaceholder,设置占位文本,如果对样式有特殊要求,比如颜色等,可以设置attributedPlaceholder。

       
keyboardType,设置初始进入编辑状态时,默认显示的键盘类型 ,比如输入手机号码的地方,使用数字键盘UIKeyboardTypeNumberPad即可,但是实际使用时发现,如果安装了第三方输入法比如搜狗输入法时,设置UIKeyboardTypeNumberPad不起作用,键盘仍然显示为其他类型,设置为UIKeyboardTypePhonePad则生效,不同的是UIKeyboardTypePhonePad相对UIKeyboardTypeNumberPad而言还允许输入*, #,但基本样式相同。

图片 8图片 9

       
下图为设置UIKeyboardTypePhonePad后的键盘类型

 图片 10

       
 tintColor,比如对textField的编辑状态下光标的颜色有要求,设置这个属性即可。

图片 11

图片 12

       
 tag,对于一个页面含有多个textField,常常需要在代理方法中进行区别单独处理,使用tag属性标明即可,textView等也是通过tag来进行区分 

图片 13图片 14

         

       (1)UILabel显示多行文字并且文字置顶显示

       
 不限制UILabel的高度(宽度需要设置,确定文字何时换行),numberOfLines设为0即可(设为0表示不限制行数)。图片 15 
   

secureTextEntry,设置输入字符的明暗文显示,设置为YES输入字符时则显示为*,一般密码输入时用到,但需要注意的时,针对系统原生的textField,如果添加了一个明暗文开关按钮,通过控制该属性来切换显示模式时,会有一些问题,一是切换明暗文状态切换到暗文状态(secureTextEntry

YES),输入字符时之前的字符串会情况,而是暗文状态下,结束编辑状态在进入编辑状态后,如果点击删除按钮,会清空全部已输入的字符。如果想切换状态后输入不清空,再次进入编辑状态点击删除按钮只删除前一个字符,需要针对该属性重写一下textField。

图片 16 
    

       (2)使用NSMutableAttributedString满足个性化的显示要求

       
比如对文字的行间距有要求、一行文字某几个文字的大小、颜色有特殊要求等等,都可以通过NSMutableAttributedString来进行设置。

图片 17图片 18

       (5)textField限制输入字数

       
 textField不像textView,代理方法中是没有DidChange事件方法的,但是可以通过监听UIControlEventEditingChanged达到同样效果,进入限制输入字数

图片 19图片 20

       (3)文字换行模式

        设置lineBreakMode,比如达到换行条件时按单词来换行NSLineBreakByWordWrapping,末尾显示省略号的NSLineBreakByTruncatingTail等。

图片 21图片 22

       (6)textView更改return键类型并自动根据输入情况决定改按键可用性

          设置两个属性即可

图片 23

       (4)textField的clearButtonMode、placeholder、keyboardType、tintColor、tag、secureTextEntry典型应用场景

       
 clearButtonMode,设置一键清空按钮显示模式,一般是在编辑状态下才显示该按钮 图片 24图片 25

        placeholder/attributedPlaceholder,设置占位文本,如果对样式有特殊要求,比如颜色等,可以设置attributedPlaceholder。

       
keyboardType,设置初始进入编辑状态时,默认显示的键盘类型 ,比如输入手机号码的地方,使用数字键盘UIKeyboardTypeNumberPad即可,但是实际使用时发现,如果安装了第三方输入法比如搜狗输入法时,设置UIKeyboardTypeNumberPad不起作用,键盘仍然显示为其他类型,设置为UIKeyboardTypePhonePad则生效,不同的是UIKeyboardTypePhonePad相对UIKeyboardTypeNumberPad而言还允许输入*, #,但基本样式相同。

图片 26图片 27

       
下图为设置UIKeyboardTypePhonePad后的键盘类型

 图片 28

       
 tintColor,比如对textField的编辑状态下光标的颜色有要求,设置这个属性即可。

图片 29

图片 30

       
 tag,对于一个页面含有多个textField,常常需要在代理方法中进行区别单独处理,使用tag属性标明即可,textView等也是通过tag来进行区分 

图片 31图片 32

         

       (7)textView如何响应按下发送按键的事件

         在代理方法shouldChangeTextInRange中判断识别处理即可—- if ([text isEqualToString:@”\n”]) {…}

secureTextEntry,设置输入字符的明暗文显示,设置为YES输入字符时则显示为*,一般密码输入时用到,但需要注意的时,针对系统原生的textField,如果添加了一个明暗文开关按钮,通过控制该属性来切换显示模式时,会有一些问题,一是切换明暗文状态切换到暗文状态(secureTextEntry

YES),输入字符时之前的字符串会情况,而是暗文状态下,结束编辑状态在进入编辑状态后,如果点击删除按钮,会清空全部已输入的字符。如果想切换状态后输入不清空,再次进入编辑状态点击删除按钮只删除前一个字符,需要针对该属性重写一下textField。

图片 33   
  

       (8)textView实现textField中的placeholder效果

       
 textView本身没有该属性,实现方法是在textView上添加一个UILabel作为placeholder,在代理方法中控制该label的显示情况,需要注意的是,UILabel
   

如果直接加在textView上,后续调整布局在iOS7的设备上可能会崩溃,建议将textView加在一个view上,再将UILabel加在此view上进行控制即可。

       (5)textField限制输入字数

       
 textField不像textView,代理方法中是没有DidChange事件方法的,但是可以通过监听UIControlEventEditingChanged达到同样效果,进而限制输入字数

图片 34图片 35

         update:iOS开发笔记12:iOS7上UITextField限制字数输入导致崩溃问题

       (9)textView根据输入内容高度动态变化

       
 写评论时如果字数较多,则textView的高度应该要随着内容的增加而变高,当然还要有一个高度限制,不能无限制增长。

图片 36  

       
 在textView中输入字符时动态调整高度即可,以下方法在iOS7、8、9下测试可用

图片 37

       
 还有一个需要注意的问题,当再次进入编辑状态且存有上一次的输入草稿时,textView的光标一般应该显示在最后一个字的末尾

图片 38

       (6)textView更改return键类型并自动根据输入情况决定改按键可用性

          设置两个属性即可

图片 39

      (10)使用正则表达式验证手机号码输入有效性

     
 一是判断首位数字是否为1,二是根据现有情况判断第二位数字有效性,三是验证后续9个字符是否为数字

图片 40 

       (7)textView如何响应按下发送按键的事件

         在代理方法shouldChangeTextInRange中判断识别处理即可—- if ([text isEqualToString:@”\n”]) {…}

      (11)自定义长按后弹出的UIMenuController

图片 41

       (8)textView实现textField中的placeholder效果

       
 textView本身没有该属性,实现方法是在textView上添加一个UILabel作为placeholder,在代理方法中控制该label的显示情况,需要注意的是,UILabel如果直接加在textView上,后续调整布局在iOS7的设备上可能会崩溃,建议将textView加在一个view上,再将UILabel加在此view上进行控制即可。

      (12)UIWebView

       
 需要注意三点,一是注意在代理方法中设置顶部状态栏的转圈,即[UIApplication sharedApplication].networkActivityIndicatorVisible

图片 42

          二是在willDisappear中需要做一些处理

图片 43  
     

       
三是loadRequest的时候注意忽略缓存,否则页面可能不是最新数据图片 44

       (9)textView根据输入内容高度动态变化

       
 写评论时如果字数较多,则textView的高度应该要随着内容的增加而变高,当然还要有一个高度限制,不能无限制增长。

图片 45  

       
 在textView中输入字符时动态调整高度即可,以下方法在iOS7、8、9下测试可用

图片 46

       
 还有一个需要注意的问题,当再次进入编辑状态且存有上一次的输入草稿时,textView的光标一般应该显示在最后一个字的末尾

图片 47

      (13)WKWebView

       
 使用的与safari一样的引擎,iOS8及以上系统建议使用WKWebView取代UIWebView,比UIWebView好用很多,并且支持进度条显示。图片 48图片 49   

      (10)使用正则表达式验证手机号码输入有效性

     
 一是判断首位数字是否为1,二是根据现有情况判断第二位数字有效性,三是验证后续9个字符是否为数字

图片 50 

      2.UI交互细节

      (11)自定义长按后弹出的UIMenuController

图片 51

       (1)根据cell显示内容动态计算高度

       
需要注意的是,使用Masonry布局cell时,一定不要忽略bottom属性,因为是根据内容撑开的大小来计算高度,才能根据cell里内容确定从顶部到底部的距离,即cell的高度。图片 52

      (12)UIWebView

       
 需要注意三点,一是注意在代理方法中设置顶部状态栏的转圈,即[UIApplication sharedApplication].networkActivityIndicatorVisible

图片 53

          二是在willDisappear中需要做一些处理

图片 54      
 

       
三是loadRequest的时候注意忽略缓存,否则页面可能不是最新数据图片 55

       (2)使用Masonry更新布局

         如果使用mas_updateConstraints方法是更新已经设置过得布局属性,使用mas_remakeConstraints是清除原有布局设置,重新布局。

      (13)WKWebView

       
 使用的与safari一样的引擎,iOS8及以上系统建议使用WKWebView取代UIWebView,比UIWebView好用很多,并且支持进度条显示。图片 56图片 57 

       (3)点击空白区域关闭弹框

         
对点击区域进行判断,当点击区域在弹框范围外,进行关闭操作即可

图片 58图片 59 

      (14)获取键盘高度

       
 当输入对象被弹出的键盘遮挡时,常常需要做上移操作,获取键盘高度是计算移动距离的关键之一,可以在键盘通知事件中获取其高度

图片 60

       (4)view的层级管理

         最常用三个,一是将view移动至最上层

图片 61 

        二是将view移动至最下层

图片 62

        三是将view加载到window上

图片 63

      2.UI交互细节

       (5)使用UIImageView做背景View时注意开启userInteractionEnabled属性

       
默认userInteractionEnabled属性为NO,需要开启,否则加在上面的UIButton等得点击事件会无法响应

       (1)根据cell显示内容动态计算高度

       
需要注意的是,使用Masonry布局cell时,一定不要忽略bottom属性,因为是根据内容撑开的大小来计算高度,才能根据cell里内容确定从顶部到底部的距离,即cell的高度。图片 64

       (6)UIButton点击区域设置

       
比如一个很小的图标需要支持点击,需要注意增大UIButton的响应区域,考虑用户的点击体验。

       (2)使用Masonry更新布局

         如果使用mas_updateConstraints方法是更新已经设置过的布局属性,使用mas_remakeConstraints是清除原有布局设置,重新布局。

       (7)SDWebImage加载进度条显示

        SDWebImage已经封装了方法支持监控加载进度

图片 65

       (3)点击空白区域关闭弹框

         
对点击区域进行判断,当点击区域在弹框范围外,进行关闭操作即可

图片 66图片 67 

       (8)注意关闭UIPageControl的userInteractionEnabled属性

       
使用轮播图时注意关闭userInteractionEnabled属性,否则点击pageControl区域,小圆点index会变化。

       (4)view的层级管理

         最常用三个,一是将view移动至最上层

图片 68 

        二是将view移动至最下层

图片 69

        三是将view加载到window上

图片 70

       (9)相册处理,PHPhotoLibrary取代ALAssetsLibrary

         iOS8以上必须用PHPhotoLibrary。

       (5)使用UIImageView做背景View时注意开启userInteractionEnabled属性

       
UIImageView默认userInteractionEnabled属性为NO,需要开启,否则在上面添加UIButton后,点击UIButton是无法响应的,因为作为父视图的UIImageView的userInteractionEnabled属性为NO时,触摸事件是不会继续往下传递给子视图的,子视图永远无法处理触摸事件。

       (10)使用代码拉伸图片

图片 71         

       (6)UIButton点击区域设置

       
比如一个很小的图标需要支持点击,需要注意增大UIButton的响应区域,考虑用户的点击体验。

       3.两个动画

       (7)SDWebImage加载进度条显示

        SDWebImage已经封装了方法支持监控加载进度

图片 72

       (1)加载等待转圈

         
选取一行渐变色的加载转圈图片,对图片设置动画效果

图片 73

       (8)注意关闭UIPageControl的userInteractionEnabled属性

       
使用轮播图时注意关闭userInteractionEnabled属性,否则点击pageControl区域,小圆点index会变化。

       (2)CAShapeLayer + UIBezierPath实现渐变按钮 

          使用UIBezierPath画一个矩形,控制点添加在中间,且注意最后一个点要闭合,根据滑动的距离,控制点的X坐标随之移动变化即可

图片 74 
            

       效果如下

图片 75

       (9)相册处理,PHPhotoLibrary取代ALAssetsLibrary,过滤非照片类型数据

       
 iOS8以上建议用PHPhotoLibrary,使用ALAssetsLibrary当照片数量较多时可能会加载不完全。

       
 另外需要注意的是过滤非照片类型的数据,比如视频等

图片 76图片 77

       4.其它

       (10)使用代码拉伸图片

图片 78         

       (1)dSYM

          app使用友盟统计上线后,根据错误崩溃信息查找问题可以使用“dSYM
”这个工具进行跟踪处理。

       3.两个动画

       (2)Network Link Conditioner 

         
 mac上可以下载该工具来模拟网络环境进行测试,在真机上则可以通过设置里的开发者选项找到这些工具。

图片 79

       (1)加载等待转圈

         
选取一张渐变色的加载转圈图片,对图片设置动画效果

图片 80

       (3)app启动后顶部和底部空出黑色区域问题

       
 由于设置启动图加载方式为LaunchImage,但是没有给图片导致,系统会根据LaunchImage尺寸来决定显示尺寸,添加LaunchImage后正常显示

       (2)CAShapeLayer + UIBezierPath实现渐变按钮 

          使用UIBezierPath画一个矩形,控制点添加在中间,且注意最后一个点要闭合,根据滑动的距离,控制点的X坐标随之移动变化即可

图片 81         
    

       效果如下

图片 82

       (4)Xcode升级后,第三方插件无法使用

       
 获得Xcode的UUID,添加到插件对应的工程里,重新运行一遍即可正常使用。

         获取Xcode的UUID:“defaults read
/Applications/Xcode.app/Contents/Info DVTPlugInCompatibilityUUID”

  图片 83

      图片 84

       4.其它

       (5)使用代码块提高效率

       
 对于经常重复输入的一些代码,比如一些代理方法,布局代码等,使用代码块进行管理可以提高效率,对于其中的变量,在设置代码块的时候,以<#变量名称#>这样的格式设置即可,下次使用时,编译器就能识别出这里需要输入值。

      图片 85

       (1)dSYM

          app使用友盟统计上线后,根据错误崩溃信息查找问题可以使用“dSYM
”这个工具进行跟踪处理。

       5.参考

     (1)Text Programming Guide for iOS

     (2)AssetsLibrary framework broken on iOS 8

     (3)Network Link Conditioner

     (4)XCODE7 真机调试问题

     (5)iOS开发之详解正则表达式

     (6)用正则表达式验证邮箱和手机号

     (7)Understanding and Analyzing iOS Application Crash Reports

     (8)Xcode插件 info.plist/DVTPlugInCompatibilityUUIDs

     (9)dSYM 文件分析工具

     (10)放肆的使用UIBezierPath和CAShapeLayer画各种图形

Text主要总结UILabel、UITextField、UITextView、UIMenuController以及UIWebView/WKWebView相关的一些…

       (2)Network Link Conditioner 

         
 mac上可以下载该工具来模拟网络环境进行测试,在真机上则可以通过设置里的开发者选项找到这些工具。

图片 86

       (3)app启动后顶部和底部空出黑色区域问题

       
 由于设置启动图加载方式为LaunchImage,但是没有给图片导致,系统会根据LaunchImage尺寸来决定显示尺寸,添加LaunchImage后正常显示

       (4)Xcode升级后,第三方插件无法使用

       
 获得Xcode的UUID,添加到插件对应的工程里,重新运行一遍即可正常使用。

         获取Xcode的UUID:“defaults read
/Applications/Xcode.app/Contents/Info DVTPlugInCompatibilityUUID”

  图片 87

      图片 88

       (5)使用代码块提高效率

       
 对于经常重复输入的一些代码,比如一些代理方法,布局代码等,使用代码块进行管理可以提高效率,对于其中的变量,在设置代码块的时候,以<#变量名称#>这样的格式设置即可,下次使用时,编译器就能识别出这里需要输入值。

      图片 89

       5.参考

     (1)Text Programming
Guide for
iOS

     (2)AssetsLibrary
framework broken on iOS
8

     (3)Network Link
Conditioner

     (4)XCODE7
真机调试问题

     (5)iOS开发之详解正则表达式

     (6)用正则表达式验证邮箱和手机号

     (7)Understanding and
Analyzing iOS Application Crash
Reports

     (8)Xcode插件
info.plist/DVTPlugInCompatibilityUUIDs

     (9)dSYM
文件分析工具

     (10)放肆的使用UIBezierPath和CAShapeLayer画各种图形

相关文章