Start Developing iOS Apps (Swift

作者: raingu24 | 来源:发表于2017-06-03 21:55 被阅读100次

在本课中,你将继续使用FoodTracker应用的菜品场景的UI。你将重新排列现有的用户界面元素,并使用一个image pikcer(图片选择器)来添加图片到场景。当你完成后,你的应用看上去应该是这样的:


image: ../Art/WWVC_imageview_aspectratio_2x.png
  • 在Pin菜单中,点击Add 1 Constraints按钮
  • 在image view选中状态,打开Attribute inspector。
  • 在Attribute inspector中,找到Interaction(交互)字段,并选择User Interaction Enabled复选框。
    这个功能稍后你会需要,它让你的image view可以和用户交互。
  • 你的场景现在是这样的:


    image: ../Art/WWVC_imageview_finalconstraints_2x.png

    显示默认照片

    添加占位image来让用户知道他们可以和这个image view进行交互来选择一张图片。这张图片可以是从本课最后的可下载文件的Images/文件中的,也可以是你自己的图片。

    image: ../Art/assistant_editor_toggle_2x.png
  • 如果需要更大的空间,点击如下图的按钮。


    image: ../Art/navigator_utilities_toggle_on_2x.png

    你也可以关闭大纲视图。

  • 在storyboard中,选择image view。
  • 按住Control键,从画布中的image view拖拽一条线到右侧编辑器的代码上,拖拽到如图所示的位置时,松手。


    image: ../Art/WWVC_imageview_dragoutlet_2x.png
  • 在出现的对话框中,在Name字段,输入photoImageView。
    剩余的选项保持不变。你的对话框看上去是这样的:


    image: ../Art/WWVC_imageview_addoutlet_2x.pngimage: ../Art/WWVC_imageview_addoutlet_2x.png
  • 点击连接。
    Xcode会添加必要的代码到ViewController.swift,用来存储image view的引用吗,并且配置storyboard来设置这个连接。
  • @IBOutlet weak var photoImageView: UIImageView!
    

    现在你可以从代码访问image view来改变它的图片,但是你如何知道何时改变图片?你需要给用户一个用来指明他们想要改变图片的方式——例如,通过点击image view。然后,你将定义一个action方法,它在点击发生的时候改变图片。

    在视图(views)和控件(controls)之间存在细微差别。控件是一种特殊版本的视图,它可以响应用户特定的动作。视图用来显示内容,然而空间是用于以某种方式改变内容。一个控件(UIControl)是UIView的子类。事实上,你已经在你的界面中使用过视图(labels,image views)和控件(text fields, buttons)了。

    下载文件

    相关文章

    网友评论

      本文标题:Start Developing iOS Apps (Swift

      本文链接:https://www.haomeiwen.com/subject/dhmmfxtx.html