克隆中型iOS应用程序-第2部分

注意：自从我开始撰写本系列文章以来，Medium已使用名为“ Stories”的新功能更新了其应用。 本系列基于以前的版本，该版本具有非常相似的UI。

更改ViewController的背景色

在处理导航栏之前，让我们更改视图的背景。 我们可以在ViewController.swift中通过更改view.backgroundColor属性来实现。 通过在Medium应用程序上使用方便的吸管工具，我们看到背景色应对应于（249,249,249）的RGB。 Swift中内置的UIColor构造函数使我们以一种不直观的方式创建颜色，但是幸运的是LBTAComponents库使用更好的构造函数扩展了UIColor类。 因此，在将库导入文件后，我们可以添加viewDidLoad方法

  view.backgroundColor = UIColor（r：249，g：249，b：249） 

如果您现在运行该应用程序，我们现在将具有与真实应用程序相匹配的灰白色背景！

自定义导航栏

现在该处理导航栏了。 为了提高代码的可读性和结构性，我们将使用一个名为setupNavigationBar的新方法来封装本节中的所有代码，该方法将在viewDidLoad中调用。 我们可以先处理背景色，恰好是纯白色

  navigationController？.navigationBar.backgroundColor = .white 

如果运行该应用程序，您会发现颜色有些不对劲。 这实际上是因为默认情况下，该条设置为半透明。 我们可以简单地改变它

  navigationController？.navigationBar.isTranslucent = false 

现在背景看起来正确了。 现在，我们将“中”徽标放置在中间。 我在Github存储库中包含了徽标的切口。

 让titleImageView = UIImageView（image：UIImage（named：“ medium_logo”）） 

  titleImageView.frame = CGRect（x：0，y：0，宽度：34，高度：34） 

  titleImageView.contentMode = .scaleAspectFit 

  navigationItem.titleView = titleImageView 

我们首先使用Medium徽标（位于资产文件夹中）创建一个UIImageView。 然后，我们通过首先将封装视图的框架设置为所需的大小，然后告诉图像缩放以适合该框架（通过.contentMode属性），来设置我们希望图像的大小。 最后，我们将titleView（已居中）设置为我们的自定义视图。

现在，让我们在右上角添加搜索按钮。 我们可以使用几乎所有的精确技术，而是创建一个自定义按钮并将其设置为导航栏的rightBarButtonItem。

 让searchButton = UIButton（type：.system） 

  searchButton.setImage（UIImage（name：“ search”）?. withRenderingMode（.alwaysOriginal），用于：.normal） 

  searchButton.frame = CGRect（x：0，y：0，宽度：28，高度：28） 

  navigationItem.rightBarButtonItem = UIBarButtonItem（customView：searchButton） 

如果我们现在运行该应用程序，我们会看到我们有一个很好的自定义导航栏

我们终于得到它了。 在下一部分中，我们将开始布局应用程序中的一些主要内容（提示：它将涉及很多UICollectionViews…），因此期待着。 希望您喜欢本教程。 请继续关注下一部分。