iOS_67控件外观对比

iOS 7 按钮无边框，操作栏透明，控制器全屏

---

Tab Bar 对比

iOS 7                                                              iOS 6

如果使用了自定义icon的话，

可以使用UITabBarItem中的selectedImage属性来设置按下状态的图像。

---

Toolbar 对比

iOS 7                                                           iOS 6

 

---

Bar Buttons 对比

在iOS 6中，栏上按钮可以是有边框的，也可以是无边框的。

在iOS 7中只能是无边框的。

iOS 7                                                         iOS 6

iOS 7                                                        iOS 6

在早期版本的iOS中，自定义栏上按钮图片会自动被当做“template image”。（template image被用作最终图像的一个遮罩。）而iOS 7中，你可以使用以下UIImage属性来指定是否需要把自定义的图片当做template image来处理：

• UIImageRenderingModeAlwaysTemplate。图片被用作Template Image。
• UIImageRenderingModeAlwaysOriginal。图片按照原样渲染。

  如果你没有指定对图片的处理方法的话，图片会使用包含它的视图的默认处理方式。比如，tab栏默认会使用template处理方式，而进度滑块则会使用原样完整渲染的处理方式。

  注意：template image会依照其父结构的着色进行着色 。如果不想让栏上的元素被着色，为图片设置UIImageRendering-ModeAlwaysOriginal属性。

  
  

  ---

  活动菜单（Activity） 对比

  活动菜单代表了一个可以响应当前选择内容的功能，它可以是系统提供的或者自定义的。用户可以通过系统提供的活动视图控制器来使用这些功能，当用户点击分享按钮的时候，活动视图控制器就会从屏幕底部向上升起。

  系统提供的活动菜单中可以提供两种风格的按钮：

  1. 原样渲染的app图标——比如下面这个邮件的icon
  2. 和tab栏上的按钮一样的风格——比如下面复制、打印这样的icon

  第三方功能总是使用第二种风格的icon。

  

  如果要在你的app中提供某个服务，创建一个简洁、线框状的template image。创建template image的时候请遵守下述指导原则：

  1. 使用黑色或者白色，配合适当的alpha透明度
  2. 不要使用投影
  3. 使用抗锯齿效果

  活动菜单上的template image应该在区域中居中，分辨率大约在70 x 70像素左右。

  
  

  ---

  集合视图（Collection View）对比

  

  
  

  ---

  图片视图（Image View）对比

  
  

  在iOS 7中，UIImageView包含了着色属性tintColor。

  
  

  当图片视图包含template image的时候，tintColor会被应用到图片上。

  
  

  ---

  地图视图（Map View）对比

  
  

  
  

  

  在iOS 7，只能够使用一个新的类MKOverlayRenderer来在地图视图上面创建覆盖层。

  如果要给地图视图增加3D外观的话，只需给它的camera属性分配一个相机对象即可（MKMapCamera的一个实例）。

  
  

  ---

  页面视图控制器（Page View Controller）对比

  可以使用滚动过场，也可以使用卷页过场动画。

  
  

  在iOS 7中，使用两个方法来分别指定pageViewControllerPreferredInterfaceOrientationForPresentation

  pageViewControllerSupportedInterfaceOrientations

  

  
  

  ---

  滚动视图（Scroll View）对比

  
  

  iOS 7                            iOS 6

  

  在iOS 7，

  通过UIViewController的

  automaticallyAdjustsScrollViewInsets属性

  来管理滚动视图的项目分组之间的间隔。

  
  

  
  

  ---

  表格视图（Table View）对比

  iOS 7                                   iOS 6 

  

  
  

  
  

  

  
  

  
  

  

  
  

  ---

  文本视图（Text View）对比

  通过UIFont类的preferredFontForTextStyle方法

  获取文本视图中显示的文字字体。

  
  

  
  

  ---

  控件（Controls）对比

  控件是种特殊的可以与用户进行交互 UI元素。

  
  

  
  

  因为UIControl是从UIView继承而来，

  你可以使用控件的tintColor属性来为它们着色。

  
  

  
  

  ---

  日期拾取器（Date Picker）对比

  
  

  

  iOS 7的app会将日期拾取器嵌入到内容中，

  而不是单独呈现在一个弹出的视图上。

  比如日历应用动态地将表格的一行扩展开，

  将日期拾取器嵌入，

  用户指定时间的时候就不需要离开当前这个添加事项视图。

  

  ---

  新增联系人按钮（Contact Add Button）对比

  新增联系人按钮是一个UIButtonTypeContactAdd类型的UIButton。

  
  

  iOS 7    iOS 6

  

  ---

  细节展开按钮（Detail Disclosure Button）对比

  细节展开按钮是一个UIButtonTypeDetailDisclosure类型的UIButton，点击后会在另一个表格或视图中呈现。

  iOS 7     iOS 6

  

  当细节展开按钮出现在表格的一行中，点击该行的其它地方不会激活该按钮；仅会选中该行。

  
  

  ---

  Info按钮（Info Button）对比

  Info按钮的类型是UIButtonTypeInfoLight或者UIButtonTypeInfoDark。

  
  

  iOS 7    iOS 6

  

  
  

  ---

  文本标签（Label）对比

  
  

  
  

  iOS 7                           iOS 6

  

  使用UIFont的方法preferredFontForTextStyle来获取显示在标签上的字体。

  
  

  ---

  页码控件（Page Control）对比

  iOS 7                     iOS 6

  

  
  

  
  

  ---

  拾取器（Picker）对比

  iOS 7                                 iOS 6

  

  
  

  
  

  ---

  进度视图（Progress View）对比

  iOS 7                                    iOS 6

  

  
  

  
  

  ---

  刷新控件（Refresh Control）对比

  iOS 7                                    iOS 6

  

  
  

  ---

  圆角矩形按钮（Rounded Rectangle Button）对比

  圆角矩形按钮在iOS 7中被弃用了。

  用系统的无边界按钮替代它。

  对应的类型是UIButtonTypeSystem的UIButton。

  iOS 7系统按钮不包括倒角和背景样式。

  
  

  
  

  
  

  

  注意：在iOS 7中，UIButtonTypeRoundedRect被重新定义成UIButtonType-System。

  
  

  如果你非要显示一个包含倒角的按钮，

  就使用UIButtonTypeCustom类型的按钮，

  该类型才支持自定义背景图片。

  
  

  
  

  
  

  ---

  分段控件（Segmented Control）对比

  iOS 7                              iOS 6

  

  
  

  ---

  滑动器（Slider）对比

  iOS 7                                 iOS 6

  

  iOS 7中依然可以对最小和最大轨道图像按下状态使用着色，

  
  

  使用三个属性来操作:

  minimumTrackTintColor

  maximumTrackTintColor

  thumbTintColor

  
  

  ---

  步进器（Stepper）对比

  iOS 7          iOS 6

  

  
  

  
  

  ---

  开关（Switch）对比

  iOS 7         iOS 6

  

  iOS 7继续可以对开、关、不可用三个状态使用着色。

  
  

  按下状态则使用下面三个属性着色：

  onTintColor

  tintColor

  thumbTintColor。

  
  

  ---

  文本域（Text Field）对比

  
  

  iOS 7                                iOS 6 

  

  使用UIFont的preferredFontForTextStyle方法来获取和显示文字域中的字体。

   

  ---

  临时视图（Temporary Views）对比

  ActionSheet，AlertView，ModalView 是三种临时视图，

  模态视图ModalView本质上是视图的一种

  注意：当临时视图出现时，iOS 7自动将背后那个标准视图变暗。

  
  

  ---

  动作列表（Action Sheet）对比

  iOS 7，默认是透明的，包括无边框的按钮

  iOS 7                                          iOS 6

  

  
  

  ActionSheet中危险的选项destructiveButtonTitle默认红色

  ---

  警告对话框（Alert）对比

  
  

  iOS 7                                 iOS 6

  

  iOS 7，警告对话框有三个按钮时，第三个按钮会显示在前两个按钮下一排

  ---

  模态视图（Modal View）对比

  
  

  
  

  iOS 7                             iOS 6

  

  
  

  
  

  ---

  联系人 对比 

  
  

  

  iOS 7，app的图标尺寸是120 x 120像素（高分辨率下）

  
  

  操作栏背景着色 使用barTintColor或tintColor

  
  

  UIViewController提供了以下属性

  1. edgesForExtendedLayout
     这个属性属于UIExtendedEdge类型，它可以单独指定矩形的四条边，也可以单独指定、指定全部、全部不指定。
     使用edgesForExtendedLayout指定视图的哪条边需要扩展，不用理会操作栏的透明度。
  2. 这个属性的默认值是UIRectEdgeAll。
  3. extendedLayoutIncludesOpaqueBars
     如果你使用了不透明的操作栏，
  4. 设置edgesForExtendedLayout的时候也请将 extendedLayoutIncludesOpaqueBars的值设置为No
  5. （默认值是YES）。
  6. automaticallyAdjustsScrollViewInsets
     如果你不想让scroll view的内容自动调整，将这个属性设为NO（默认值YES）。

  
  

  iOS 7允许视图控制器在app运行过程中改变系统状态栏的样式。

  开启这个功能，

  请在Info.plist文件中添加键UIViewControllerBasedStatusBarAppearance，

  并将值设为YES。

  动态改变系统状态栏的一个好方法是

  重写preferredStatusBarStyle方法，

  用一个动画模块来更新状态栏外观，

  并调用setNeedsStatusBarAppearanceUpdate方法。

  使用着色（Tint Color）

  
  

  因为UIWindows继承自UIView，你可以这样通过设置窗体的着色属性指定着色：

  window.tintColor = [UIColor purpleColor];

  
  

  
  

  重要：iOS 7不支持通过外观代理API来设置着色。

  当警告框（alert）和上拉菜单（action sheet）出现的时候，

  iOS 7自动将背后视图的着色变暗。

  为了响应该色彩变化，在渲染时使用tintColor的自定义视图的子类需要重写tintColorDidChange方法，以便在合适的时候刷新渲染。

  注意：在iOS 6中，tintColor可以用来给导航栏的背景着色、tab栏、工具栏、搜索栏、搜索栏的范围选择栏着色。

  而在iOS 7中，给背景着色只需要使用barTintColor属性就可以了。

  
  

  
  

  使用字体（Fonts）

  iOS 7引入了动态字体（Dynamic Type）

  最小字号                                                       最大

  

  
  

  
  

  请用UIFont类下的preferredFontForTextStyle方法来生成文字，

  而不是直接指定字体的名称和大小。

  
  

  操作栏和栏上按钮（Bars & Bar Buttons）对比

  iOS 7中，状态栏是透明的，

  其他的操作栏（导航栏、tab栏、工具栏、搜索栏、搜索栏下面的范围选择栏）是半透明的。

  通常情况下，你希望能看到操作栏背后是你的内容。

  大多数操作栏会将遮蔽住的内容进行模糊处理，除非你提供一张自定义背景图。

  为了标识操作栏的位置，iOS 7引入了barPosition属性，

  它可以帮助你指定什么时候自定义背景图片需要平铺在状态栏上。

  值UIBarPositionTopAttached表明操作栏贴近屏幕顶部，

  背景向上延伸入系统状态栏区域。

  相对的，值UIBarPositionTop表示操作栏位于当前局部内容的顶部（比如，在弹出式气泡的顶部）它不为状态栏提供背景。

   

  系统状态栏（Status Bar）对比

  使用常量UIStatusBarStyle来指定使用黑色风格还是白色风格：

  
  

  UIStatusBarStyleDefault显示黑色的文字内容。

  
  

  当状态栏后面的内容是淡色的时候适合使用。
  
  
  
  

  UIStatusBarStyleLightContent显示白色的文字内容。

  
  

  当状态栏后面的内容是深色时使用比较合适。

  
  
  
  

  有些情况下，

  
  

  导航栏和搜索栏的背景图片可以向上延伸到状态栏背后。

  
  

  如果状态栏下面没有其他栏，

  
  

  内容视图需要使用全屏高度。

  
  

  在iOS 7中，通过独立的视图控制器，

  
  

  可以在app运行的时候改变状态栏的风格。

  
  

  实现方法是在Info.plist中加入键

  
  

  UIViewControllerBasedStatusBarAppearance，

  
  

  并设置值为YES。

  
  

  
  

  • 导航栏（Navigation Bar）对比

  iOS 7                                  iOS 6

  

  • 
    
    

  如果你使用UIBarPositionTopAttached样式创建了一个导航栏背景，确保图像包含了系统状态栏的区域。

  
  

  具体来说，你需要一个高分辨率下128(64*2)像素的图像。

  
  

  下面这个表格描述了iOS 7如何对待不同高度的可变导航栏背景。

  表格 5-1 可变大小的背景图片处理策略

  
  搜索栏和范围选择栏（Search Bar & Scope Bar）避免使用超高的背景图片来制作导航栏下面的自定义投影，这种技术在iOS 7中不起作用，因为超高的图片会向上（系统状态栏方向）扩展，而不是向下（导航栏下面）扩展。

  
  

  如果你想给导航栏增加投影，可以创建一个自定义图片，然后使用shadowImage属性来自定义投影图片。

  
  

  
  

  iOS 7                                iOS 6

  

  
  在iOS 7中，UISearchDisplayController包含了displaySearchBarInNavigationBar属性，

  这样你就可以将搜索栏放进导航栏，就像日历app里面这样：

  如果你使用UIBarPositionTopAttached的位置为搜索栏创建了一个背景图片，请确保图片的高度包含了状态栏的高度。  

  

  范围选择栏则允许用户选择搜索结果的范围。

  注意：范围选择栏不能单独出现；必须依附在搜索栏下面出现。

  iOS 7                               iOS 6